Given that responsive design plays a huge part in modern web development it’s more important than ever to thoroughly test on real-world mobile devices. Thankfully at Box UK we have a good range of popular devices with which to test. Sometimes however debugging issues can be difficult without the Web Inspector tool. To get around this, Android and iOS devices allow you to use Chrome or Safari on your computer to enable remote debugging of websites on mobile devices. Here’s how!
On your Android device open up the Settings menu and select Developer options. On Android 4.2+ the developer options are hidden by default; to enable them open the Settings menu, select About phone and tap Build number seven times.
Now open the Developer options menu and select the option for USB debugging. If you’re using Windows you may also need to install a USB driver; these are documented on the Android Developer’s website.
So that’s it from your device’s perspective, now you need to get Chrome to discover the phone which will allow you to inspect the DOM on your device’s browser window. To do this in Chrome on your computer go to chrome://inspect and tick the box labelled Discover USB devices. If you haven’t already connected your device to the computer via USB cable then do it now and your mobile device will prompt you to confirm you want to allow USB debugging with the computer. Be aware that during remote debugging your device will not let the screen sleep – useful for debugging but a tad insecure so don’t leave it laying around!
Now on your computer go back to chrome://inspect and your device should be listed along with all its open Chrome browser tabs!
To start debugging a tab, click inspect beneath the title of the browser tab you want to look into. When you do this a new instance of Chrome DevTools will open on your computer and allow you to interact with the device in real time. As you select DOM elements on the page they will become highlighted and if you modify the CSS that will update too.
Here’s what it looks like:
Similarly to Android devices, Apple offers the same ability in iOS 6+ to allow remote web inspection.
The first step is to enable this on your iOS device; in Settings, Safari, Advanced toggle the Web Inspector option to On. Similarly in Safari you’ll need to enable the Develop menu by going to Preferences, Advanced and ticking the box labelled Show Develop menu in menu bar.
Connect your iOS device to the Mac via its USB cable and open up the website you want to debug in Safari Mobile. Then when you open up the Develop menu in Safari on your Mac it will list connected devices and their browser tabs.
Choosing one of these tabs will open up the Web Inspector for you to start modifying DOM elements and stylesheets!
You’ll notice I used the word “Mac” in the previous paragraph in place of “computer”. That’s because Apple only allows remote debugging from Macs to iOS devices; Windows & Linux aren’t welcome in Apple’s playground. By contrast, Google allows remote debugging of websites via Chrome DevTools from Mac, Windows, or Linux.