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.
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 socket.io 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.