I recently wrote a guide on tools for synchronized cross-device testing; useful when you’re targeting the multi-device web. One of the tools I didn't come across at the time was Browser-Sync, which has an impressive feature-set and works across all platforms. We'll talk about it today.
Synchronized testing automatically performs the same interaction (clicks, scrolls, etc.) across a number of browsers and devices at the same time. It's immensely powerful for catching visual regressions and bugs during RWD and multi-device development.
Browser-Sync is a free, MIT licensed open-source tool by Shane Osbourne which supports synchronizing:
- Scrolls - keeping page scrolls in sync across devices
- Clicks & Navigation - clicks persist across all browsers so navigation is kept in sync too
- Form data - any data entered into a form on one device gets copied to the others
As well as:
- CSS injection - Like Emmet LiveStyle, CSS files are watched for edits, getting injected across all pages without the need for a full browser reload. Really useful for iterating on styles for views and templates.
- Live Reload - watch local source files and automatically refresh browsers on all devices when a change is made
- a Static file server - for serving HTML/CSS/JS etc.
You can install Browser-Sync with npm by running:
npm install -g browser-sync.
For a free offering, this is simply amazing, works great on Mac/Windows/Linux and captures the complete feature-set I was originally after for synchronizing interactions and workflow across my devices.
In addition to being well documented, Browser-Sync also comes with an optional Grunt task by the same author and works well with a plethora of different setups.
Until now, I've been recommended GhostLab for synchronizing scrolls, clicks, form-fills and live-reload but Browser-Sync is a more than worthy competitor. Unlike GhostLab (which I still maintain is amazing), Browser-Sync is:
- Works on Windows and Linux
- Doesn't require a commercial license - that said, tools you regularly use do deserve to be financially supported
The fact that it also addresses the CSS injection use-case as part of the same toolchain is astounding. For the CSS-inclined, you can read more about the CSS injection features of Browser-Sync in a post Shane authored for CSS-Tricks.
In terms of UI, Browser-Sync is currently a command-line tool but there appear to be plans for simple interface work such as notifications and the ability to trigger different modes without returning back to the command-line.
The author is also looking at integrating with debugging tools such as Weinre and Chrome DevTools, however it's still early days on those fronts. Be sure to watch the Browser-Sync repo to keep track of the project.
I really like Browser-Sync and encourage you to try it out.
That said, if you have an existing GhostLab license and are on a Mac, it may be a good idea to stick with it unless you need CSS injection. It otherwise remains a great tool with a number of advanced features Browser-Sync doesn't yet capture (the gap here is closing however). It also has a user-friendly UI, a well-documented workflow and already supports debugging via Weinre.
If however you haven't invested in an existing solution, please do check-out Browser-Sync.
It has a fantastic feature-set and at least 5 developers I've spoken to this week alone swear by it for their own synchronized cross-device testing. That isn't to say it isn't without it's flaws, but it's an excellent solution worth playing around with.
If nothing else, Browser-Sync will help you future-proof your users against users like this:
..and that can't be a bad thing!
Kudos go out to Stéphane Coué from my Facebook page for bringing Browser-Sync to my attention. It rocks!