Web Development Recipes, 2nd Edition

Recipe 33

Testing Websites on Real Devices

Problem

We’re building a new web app that needs to work on iOS and Android, not to mention all of the major desktop web browsers. We need a simple way to manage all of the web browsers throughout the design process, so we can test things out as we go without tons of extra effort.

Ingredients

• BrowserSync^[98]

Solution

BrowserSync is a free, open-source tool that, as its name suggests, syncs browsers. When you point all of your browsers at BrowserSync’s server, the links, refreshes, and scroll position are updated on every connected browser. Best of all, it supports watching files for changes, so when we update CSS, the new CSS is injected into the page for us. And when we change HTML or JavaScript, the ...