What started as a simple Grunt task capable of auto-reloading browsers and injecting CSS, has now evolved into a indispensable tool used by Designers and Developers all over the world in their quest to offer device-agnostic experiences when building for the Web.
Since BrowserSync’s inception, the code and action syncing features have improved the efficiency of multi-device/multi-browser workflows for developers across the globe. Having said that, we have listened to feedback from the community and thought about how we could go even further.
Whilst having clicks, scroll position and form inputs mirrored across devices is extremely helpful (and a bit magic) – it’s also fairly limiting. For us to realise our extensive list of ideas we were going to need a platform on which we could provide controls and information.
That’s why we created the BrowserSync UI.
BrowserSync + User Interface = the future of device testing.
- It comes bundled with BrowserSync! That means there’s no need for any separate installs, configuration or external apps.
- It runs automatically in a browser! This creates some unique use-cases that other tools simply cannot match (such as accessing the UI via a phone or tablet, for example).
- It’s cross-platform! Just as BrowserSync is, the UI opens in a browser and will work on Mac, Windows and Linux.
UI features at launch
We’ve created an extendable system that will allow us to continue adding features easily in the future (and boy, do we have ideas!) but the following are all available at launch:
This section displays simple information regarding your project such as the BrowserSync access URLs, current browser connections & base directories (if using server mode).
You can now enable/disable all sync actions with simple toggles while running. This can be especially useful if you are a sharing the URL and don’t want the receiver to be able to control other devices. If any files are being watched, this section will also include a toggle that can temporarily disable/enable file watching.
As you navigate through your website on any device, the paths you visit are tracked and displayed in a simple list. This allows you to push any of these previous urls to all devices in 1 click. When you have multiple devices open and some are at different urls, the ability to gather them all to a single path has proved one of the simplest, but most useful features.
The UI includes the
weinre project that enables remote debugging on connected devices. Think ‘inspect element’ – but not limited to dev tools. Along with weinre, our Remote Debug section also includes some simpler tools that we’ve found to be especially useful when working with multiple devices.
- CSS Outlining: Toggles CSS outlines on every element in your page. Extremely helpful for debugging the alignment of elements.
- CSS Depth Outlining: Toggles CSS box-shadows on every element in your page. This can quickly highlight any potential layout bugs you may have in your CSS / HTML
- Latency: With a simple slider you can simulate slower connections by throttling the response time of each request. You’ll find this especially useful when trying to test things like loading spinners and for ensuring your pages are still functional whilst you wait for things like async scripts & images to download.
We think you’ll really like the initial features that come as standard in the new UI – they are super useful and will be a welcome addition to new & seasoned BrowserSync users – however, they are just the beginning.
You can think of this first release as a base platform. We have many more ideas for future releases and we look forward to sharing them with you.
How do I get it?
Because it now comes bundled with BrowserSync, all you need to do it ensure that you’re running at least version 2.0.0. Follow our install guide for more information.
Share the love
We have put a huge amount of time and effort into supporting this free and open-source project at JH, if you have used it and found it to be beneficial to your workflow, we’d appreciate your support! Here are a few small things you can do…
- Star the project on github.
- Tweet about how cool you think @BrowserSync is.
- Write blog posts or make screencasts showing other people how you use our tool.
The more people we get using BrowserSync, the better it becomes and the more time we will get to work on maintaining and improving it.