Add to Chrome
Add to Edge
Add to Firefox
Add to Opera
Add to Brave
Add to SafariWhen comparing LiveReload vs Browsersync, the Slant community recommends Browsersync for most people. In the question“What are the best cross-browser live-update / synchronization tools?” Browsersync is ranked 1st while LiveReload is ranked 3rd. The most important reason people chose Browsersync is:
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.
Question Ranking
Pros
Pro Great bundled compilers
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.
Pro Works with most modern browsers
LiveReload supports Safari, Chrome, Firefox, Mobile Safari and Opera with web sockets enabled.
Pro CSS injection
Once the monitored .css file is saved, changes are implemented without a refresh.
Pro Works concurrently across multiple devices
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.
Pro Synchronized form field input
When filling out a form in one browser, same information will be repeated in other browsers.
Pro Works with basically every desktop and mobile browser
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.
Pro Cross-platform
Works on Windows, Linux and OS X.
Pro CSS injection
Once the monitored .css file is saved, changes are implemented without a refresh.
Pro Free and open source
Licensed under MIT.
Pro Remembers scroll position
Remembers scroll position and synchronize it across all browsers so you don't have to move to the appropriate part of the page after each reload.
Pro Works as a standalone npm package or as a Grunt plugin
To install as a standalone npm package
npm install -g browser-syncTo install as a grunt-plugin
npm install grunt-browser-syncPro Synchronized navigation
When navigating in one browser, other browsers will automatically follow to the same place.
Pro Doesn't require a browser plugin
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.
Pro Works with older versions of IE
Browser-Sync works with all supported IE versions - IE7 and up.
Cons
Con To use it, a code snippet or an extension to the browser needs to be added
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.
Con Setting up in Windows can be a little tricky
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.
