Browsersync – time saving features you didn’t know about
We’ve done over 30 releases since v2 tweaking the performance and adding an array of saving features that may have slipped under your radar.
1 – Bundled UI (user interface)
If you’ve not seen it or used it, you’re missing out on great features such as remote debugging, network throttling, history tracking and much more.
Every time you run Browsersync, whether it’s from the command line, or from within your custom build setup, you’ll also have access to the UI. It contains not only useful information (such as connection URLS), but also a whole extra set of features that cannot be used through the API alone. Open another browser tab and point it at the address listed under the UI section of the CLI output.
Try it: Look out for the UI and UI External links in the command line output.
2 – Network Throttle
It’s like the network throttle feature in Chrome Dev Tools, but better!
The core focus of Browsersync has always been about cross-device website testing and development. We enable you to view your work-in-progress on any devices that are connected to the same Wi-Fi connection. This is often a game-changing workflow enhancement, but it does bring a false sense of speed to the table.
The problem is that whilst you’re reaping all the benefits of testing on actual devices, you’re doing so over your super-fast Wi-Fi network and everything seems to load really quickly and without any latency. The reality is that many of your mobile users will be accessing your website on much slower connections. Setting a Network Throttle in your Dev Tools can’t help you here —that will only take effect on desktop.
Enter Browsersync! Our network throttle feature affects connections lower down, at the server level, so you can access the provided URL from any device and the throttle will still apply. Now you can test loading animations/transitions, image loading or any other aspect of your website, all the time simulating what it will be like for users on slower connections.
Try it: Load up the UI and select the Network Throttle tab.
3 – URL Tunnelling
Exposing your work-in-progress website to anyone on your Wi-Fi network is something that Browsersync has supported since day 1. It’s a great way to test on multiple devices, as well as being a creative way to share your work with others in the office!
But what happens when you want to show your current project to someone who is NOT connected to the same wifi connection? What if you wanted to share it with a remote colleague, or a client in another country? This is where the tunnel option from Browsersync comes into play.
Anytime you start Browsersync, you can pass the tunnel: true option (or a flag on the command line, seen below) and a temporary public URL will be generated (thanks to localtunnel.me) —this means that anyone on the internet can now access your project!
Pro tip: disable ghostMode by setting ghostMode: false if you don’t want any viewers of this public URL to be able to control your other connections.
Try it: set
4 – CSS Debugging Tools
One important difference between the features of Browsersync and something like Chrome Dev Tools is that we have the opportunity to apply features across multiple devices. This means we can do things such as apply CSS/JS to a page (via the UI in this case) and the results are seen on every device.
One of our personal favourite use-cases for this is to apply box-shadows to every single element on a page. It might sound crazy, but this is actually an extremely useful technique for multiple reasons: debugging layout problems, checking the size of hit areas, sanity checks for your understanding of the box model… etc etc
Try it: Visit the ‘Remote Debugging’ tab in the UI and select ‘CSS Depth Outlining’
5 – History Tracking
When you fire up a new device to begin testing your work, you may want to start at the homepage, but more often than not you’ll want to kick things off at a particular URL path, such as ‘/category/shoes/women’, it’s very likely that you’ve visited that path before in another browser (like your desktop development browser). If so, you can find a list of visited URLs in the ‘History’ tab of the UI; here you can click ‘sync all’ on any path and all connected devices will gather to that single point.
Try it: Visit the ‘History’ tab of the UI and click ‘Sync all’
This is just a taster of some of the most useful features we have to offer – but there are many more! You should check out the documentation for details.