It is not constrained to a single device, it works across desktop and mobile devices at the same time. It will update code changes, synchronize scroll positions and form inputs automatically across all browsers and devices.
Browser-Sync has been tested to work with desktop (Chrome, Firefox, IE 7-10, Safari, Opera) and mobile (Android, iOS, Windows Phone, Opera Mobile, Firefox Mobile) browsers.
BrowserSync does not require a browser plugin to be installed. This is because it serves the files directly itself, and uses a script which opens a socket between the browser and the server.
Sometimes when setting up BrowserSync in Windows some errors will pop up. Most of the time this is because npm throws errors when trying to compile BrowserSync and some of the dependencies need Visual C++ runtime libraries.
This is easily solvable by installing Visual Studio. Once it's installed, there should not be any more problems.
Very easy to use even for the very first time. There is the option to display the doc icon, menu bar icon or both. There also is an option to show files in the Finder.
It is also possible to bring Codekit to front when there is an error when compiling, when there are warnings or when the file has syntax issues and shows error messages that are easy to spot, making them actually useful.
This also gives users an easy way to "watch" a SCSS file to output it (no need for terminal).
In addition to a browser live-update capability, CodeKit has built-in:
Built-in server
Bower, a package manager for web-development.
Autoprefixer, that automagically adds vendor prefixes based on latest information
Libsass, instant Sass compiler
Source maps support for Sass, Less, CoffeeScript, JavaScript and TypeScript files
Hooks, that trigger actions on file saves
CoffeeLint
and other features...
After installing and opening up CodeKit drop the website folder in and start working. No files need to be edited and nothing else needs to be installed to begin. To enable live-update, click preview in the upper right corner.
I actually look forward to the update notification and thus read each release note. It's spiced with (mostly bad taste) humour that cracks me up. Hints --> https://codekitapp.com/updates/
LiveReload supports LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML and Jade out of the box. It instantly compiles them and puts the compiled files in the specified folder.
To use LiveReload, a code snippet needs to be added inside the view, or an extension to be installed to the browser(s) of choice. While it's not too much work, it can be a hassle and a deal-breaker for some people.
Doesn't need any additional software or browser extensions to be installed on any device. If every device is pointed to the IP address that it provides it will automatically reload that page on every file change.
Ghostlab offers a testing page which when opened displays a lot of useful information. Such as, but not limited to: viewport width and height, user agent string, pixel ratio etc...
Every time the page is reloaded on a device, it's automatically reloaded on every other device connected. It also registers scrolls, form inputs and clicks across different devices and automatically synchronizes them to each connected device.
Ghostlab offers developers the opportunity to test their site in multiple browsers and devices at the same time. Once the Ghostlab server is deployed, it offers an IP address running on port 8080 which automatically reloads on every file change.
Setting up GhostLab is very easy, by simply dragging a URL or a local folder it creates automatically a new site entry and is ready to work.
It can then be named or choose the specified file extensions that need to be watched.
Ghostlab utilizes weinre, an open-source remote debugger to remotely inspect the code on different devices. By double clicking the device name that needs to be inspected, and clicking the 'Debug' button, Ghostlab opens a Chrome inspector which can inspect any item in the page of the device and manipulate the CSS and HTML.
Live.js has multiple browser support, it supports Chrome, Firefox, Opera, Safari and IE6+. Basically almost all the browsers that are currently in use.
Setting up Live.js is extremely easy, the developer either adds the live.js script inside their page, or if they want to monitor only CSS changes, they can add the bookmark that is found on the Live.js homepage.
Reloadr has a reloadr.php file included, which when configured, monitors and .php file in the project folder. Once a .php file is updated, reloadr automatically reloads the page.
Setting up Reloadr is rather easy. There are only two files that need to be included in the project folder, then the reloadr.js needs to be loaded in the view and the method to run Reloadr needs to be called. After that, everything is set up and ready to go.
Adobe Edge Inspect requires at the bare minimum, the Edge Inspect itself to be installed and a Chrome extension, just to get live-reloading and syncing for desktop. For mobile it requires additional apps to be installed from the Play Store or the App Store.
Setting up Adobe Edge Inspect is rather easy. The Edge Inspect application itself is needed for desktop and a chrome plugin. For mobile devices, there is the Adobe Edge Inspect mobile app which needs to be installed. Once the Inspect program is "switched on", it will start watching all devices that have Edge Inspect enabled.
For mobile devices, the Inspect app will generate an authentication code which needs to be inserted into the Chrome plugin. Once that's done, the devices are synchronized.
Blisk offers a lot of different devices: phones, tablets, laptops, desktops. support touch event, landscape or portrait mode, have a proper screen resolution, device pixel ratio and user agent. The list of devices updates constantly.
Blisk synchronizes URL and scroll position for both mobile and desktop. Mobile and desktop follow each other by URL and scroll position. Blisk does the routine work for you. It always shows the same page and same portion of the content on desktop and mobile.
Blisk monitors page errors in JavaScript and resources that failed to load. Blisk notifies you when the issue appears and searches for the solution on StackOverflow.
Blisk delivers best DevTools (same as in Chrome). You can launch separate DevTools for desktop and mobile and use them simultaneously to inspect elements, measure performance etc.