Browser-Sync: Sync Scrolls, Clicks, Forms And Edits In Multiple Browsers For Free

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.

Browser-Sync

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.

Thoughts

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:

• Open-source
• 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.

Roadmap

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.

Conclusions

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!