Web
Article

How to Improve Your Workflow With BrowserSync 2.0

By Craig Buckler

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.

Comments
frikki

This is absolutely brilliant.

Ophelie

This was really good, Craig! Useful for UX testing as well as development.

freakyrag

BrowserSync is fantastic, but I cannot get it to work with the enterprise PHP application at work. All the public pages work, but when I try to login only one browser gets "inside". Which browser can successfully login is a random timing issue, so the first one (or last one?) to send the login request wins. I think that the problem is the session handling that relies on cookies, because every browser gets a different session cookie. It would have been awesome if BrowserSync in proxy mode would synchronise the cookies between browsers. I found a closed issue on Github issues page, but it doesn't work for me.

@ceeb, have you experienced problems like this or do you have an idea how to solve this?

TomB

I actually released something similar a couple of months ago: https://github.com/TomBZombie/NoF5 smile Mine takes it a step further and also reloads the page when an .php, .tpl, .xml or any other file that's required to generate the page is modified... it also doesn't use a browser addon, you just include the .phar file in your php script on the server and it just works.

ceeb

Interesting problem. I've only used BrowserSync on public sites so haven't experienced it.

I don't see why it wouldn't work if every browser follows the login procedure. However, if your system only permits one logon session per user, only one browser would get it - the rest would fail.

ceeb

That looks good, Tom. I think BrowserSync can follow any file type too - I just used HTML and CSS in my example. Nor does it use a browser addon - it just inserts a small script into your page (automatically or you can do it manually).

molona

Never tried it so now it will have to go in my list of things to try. Because you really need to try what's out there to see if you can improve...

You're cruel guys... Do you know how much stuff is out there that you make me want to try? I don't have time for everything ! wink

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.