Award Confetti logo-bs logo-dxn logo-odl Magento Piggy Bank 09AEAE68-D07E-4D40-8D42-8F832C1A04EC 79C8C7E9-0D9D-48AB-B03B-2589EFEE9380 1A734D92-E752-46DD-AA03-14CE6F5DAD57 E622E2D4-3B9C-4211-8FC3-A1CE90B7DFB2 Group 19

BrowserSync: time-saving synchronised browser testing

Creating websites for the multi-device web has forced designers and developers to rethink their principles and methodologies. RWD has become our approach of choice, but we’ve had to radically adapt our process to ensure we work efficiently and effectively for our clients.

Alongside techniques like style tiles, we do a lot of design in-browser, using our device lab to review websites in situ. This is great for optimising the experience for the point of access, however the testing time grows exponentially with each template, browser and device. We began looking at this problem six months ago, believing there was a clear opportunity to cut some repetition from the testing workflow.

The answer we found was synchronised testing. The existing tools we tried each had a strong individual feature: Remote Preview’s URL synchronisation, LiveReload’s file watching and GhostLab’s action synchronisation. None fully satisfied our criteria: we wanted a single solution that brought these features together, offered more portability and complimented our other tools such as Grunt.

So Shane set about building BrowserSync.

Introducing BrowserSync

BrowserSync keeps interactions and code synchronised across multiple browsers. It’s built on Node.js, so you can install and run it on MacOS, Windows and Linux. It implements to provide wide browser and device support, even IE7.

The key features:

  • Synchronised interactions: it replicates scrolls, clicks, refreshes and form inputs
  • Synchronised code: it updates browsers as you change HTML, CSS and other ¬†files
  • Easy integration: it runs alongside any back-end technology and slots straight into task runners like Grunt and Gulp

The power of BrowserSync really becomes apparent when you see it in action, so take a look at this short screencast (2 mins).

For installation steps and basic usage, checkout the BrowserSync site.

Free to use

BrowserSync is an open source project. You are free to download and use it under the MIT license. The source code is available on Github.

If you have ideas for the future of BrowserSync, or would like to help contribute, please use the issue tracker.

We’ve been using BrowserSync for six months and it has become indispensable. We hope it can make a difference for you too.