BrowserSync is a tool that will help you in many ways. It creates a local server that will proxy your application. You can surf to this server from different browsers, both from your computer and your phones.
BrowserSync will then keep all these tabs in sync. If you scroll down on your phone your computer’s browser tab will scroll down as well. It will listen to clicks, form actions, refreshes and scrolling.
When testing in 4 browsers, 2 operating system and lots of phones this tool is extremely valuable.
You can run it from your terminal or from a task runner like Gulp. That’s how we use it here at Fortnox, gulp watch for changes, build bundles and then reload browser with the help of BrowserSync.
This means all your devices get reloaded on every change. Change the background to red and it will instantly be red everywhere. You will spot problems and design flaws much faster. If you are just changing CSS the new styles will get injected, without reloading the browser.
BrowserSync also gives us a admin panel where you can toggle what features should be synced, simulate slower connections, CSS outlining, request history and remote debugging.
It’s free, open source and has lots of examples at browsersync.io.
Take one and half hour to play with it and you won’t regret it.
Don’t believe me? 1:24 min screencast proof:
I could give some gulp examples to get you started, but browsersync.io/docs/gulp/ have already done that.
Thanks for reading!