permalink

4

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.

IMG_5150

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:

Optimized-Screenshot 2013-12-05 at 22.13.29

..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!

4 Comments

  1. Pingback: Marc's Voice » 2nd week of Dec 2013 blogging

  2. Pingback: Browser-Sync: Sync Scrolls, Clicks, Varieties And Edits In More than one Browsers For Free | Web Design Database

Leave a Reply

Required fields are marked *.