Web development involves considerable trial and error. Does this resemble your technique?…
- Open your site in a browser.
- Write or edit a line or two of code.
- Hit the browser’s refresh button. Return to step 2.
Then repeat — in multiple browsers on numerous devices using a multitude of test methods. How many hours did this incur during the past year?
Fortunately, there are tools which can radically improve your work rate. I’ve been using BrowserSync for a year and it’s revolutionized my workflow. Version 2.0 has just been released and it’s even better. The latest edition offers:
Modify a file and your page will reload in all browsers. CSS is re-injected so the full page doesn’t need to be refreshed.
Your scroll, click and form actions are mirrored across every browser. This is especially useful when testing mobile devices; you can modify an input field on your desktop and the same string will appear on all attached phones and tablets. Goodbye on-screen keyboards!
You can choose which actions are mirrored.
You can debug pages remotely using the Chrome Inspector-like weinre (WEb INspector REmote) tool.
Simulate slower connections
Throttle the response time of all files to discover how the site will be perceived by those on slower connections.
Your browsing history is recorded so you can push a test URL to all devices instantly.
As well as the command-line, you can now control BrowserSync from a web-based user interface.
You can run BrowserSync on its own but I normally deploy it using Gulp. It’s also compatible with Grunt and many other task runners.
Install anywhere for free
BrowserSync is open source and works on Windows, Mac OS and Linux. Installation takes minutes and, unlike some alternatives, there’s no need to install browser plug-ins or additional software.
How Does BrowserSync Work?
BrowserSync starts a small web server. If you’re already using a local web server or need to connect to a live website, you can start BrowserSync as a proxy server. It injects small script into every page which communicates with the server via WebSockets. When an event occurs — such as a file modification or scroll action — the server sends an update notification to all connected devices.
But you don’t need to worry about any of this; BrowserSync just works and you’ll be the envy of your peers (or accused of witchcraft).
How to Install BrowserSync
Ensure you have Node installed by entering
node -v on the command line. Then install BrowserSync globally:
npm install browser-sync -g
Depending on your set-up, Mac and Linux users may require
sudo at the start of that line.
Test your installation using:
Command-line help is available with:
How to Use BrowserSync
It’s easiest to illustrate usage with an example. Presume you have a website located in a
test folder which has a number of HTML files and CSS files in a
css sub-folder. Access this folder from the command line:
then start BrowserSync:
browser-sync start --server --files "*.html, css/*.css"
This starts the BrowserSync server and instructs it to watch all .html files and any .css files in the
css sub-folder. Your console should show something similar to:
[BS] Access URLs: ------------------------------------- Local: http://localhost:3000 External: http://192.168.1.21:3000 ------------------------------------- UI: http://localhost:3001 UI External: http://192.168.1.21:3001 ------------------------------------- [BS] Serving files from: ./ [BS] Watching files...
You can enter the “External” address in the location bar of any browser on your network, i.e.
http://192.168.1.21:3000. This will load your default page (index.html) and automatically refresh it when the HTML or CSS changes.
The control panel can be loaded in your browser with the “UI External” address (
http://192.168.1.21:3001). The panels allow you to check settings, change synchronization options, view/push the page history, initiate remote debugging and reload all attached browsers.
Spend half an hour playing with BrowserSync today and you’ll wonder how you ever worked without it.