A new tool I recently discovered called ‘BrowserSync’, has changed the speed I can test across devices and browsers so significantly that I’ll never leave it out of my Gulp or Grunt file again.
Sync them all
When you have ‘BrowserSync’ running, it will run a server locally which can then be accessed by any device on your local network. What you’ll first notice when you do this is when you scroll up and down in one browser, that the effect will be mirrored on all connected devices or browsers. It’s not just the scrolling that is mirrored though, it’s every interaction. I find this most useful when I have multiple desktop browsers open eg. chrome, firefox, safari, as each have their own unique rendering bugs. It’s quicker to spot cross browser layout bugs this way. This can extend across the network to a Virtual Machine running Internet Explorer 8 for example. Again, working this way speeds things up significantly. The server can also be tunnelled so the running server can be accessed anywhere. Very useful for quickly showing and liaising with clients as you are building your layouts for example.
Other standout features include:
- Auto reload - change any file eg. HTML / PHP within your project and you server will reload the page.
- CSS injection - update a SASS file and the change will be injected into your page in seconds without a page reload.
- Remote inspector – uses WEINRE to debug any connected mobile devices.
- Serve any local site – use it on any local site eg. WordPress/PHP, rails etc.
Checkout Browser Sync and stick it in your front end work flow.