Web

How to Improve Your Workflow With BrowserSync 2.0

Craig Buckler
Share

Web development involves considerable trial and error. Does this resemble your technique?…

  1. Open your site in a browser.
  2. Write or edit a line or two of code.
  3. 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:

Live reloading
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.

Interaction synchronization
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!

Synchronization customization
You can choose which actions are mirrored.

Remote inspector
You can debug pages remotely using the Chrome Inspector-like weinre (WEb INspector REmote) tool.

990-browsersync2-weinre

Simulate slower connections
Throttle the response time of all files to discover how the site will be perceived by those on slower connections.

URL history
Your browsing history is recorded so you can push a test URL to all devices instantly.

New UI
As well as the command-line, you can now control BrowserSync from a web-based user interface.

990-browsersync2-gui

Build-tool compatibility
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

If you don’t have it already, install Node.JS from nodejs.org. I understand many PHP, Ruby, Python, .NET etc. developers don’t want to clutter their development machines with yet another runtime, but Node.JS is rapidly becoming invaluable. Besides, it’s JavaScript. At the very least, you can use it for testing code snippets in the REPL.

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:

browser-sync --version

Command-line help is available with:

browser-sync --help

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:

cd test

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.

Many other options are available from the command line. Refer the website at browsersync.io for examples or consult the full documentation.

Spend half an hour playing with BrowserSync today and you’ll wonder how you ever worked without it.