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

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

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.

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 tool-chain is astounding.

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.

Add Comment

Required fields are marked *. Your email address will not be published.