Remote debugging websites on mobile devices

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!

Talk to one of our digital experts

Tom Houdmont

Head of Business Solutions

Do you have an idea or a project you need support with?

Tom leads Box UK’s Business Solutions team and has over 15 years experience in the web industry.  Tom is passionate about creating impactful solutions that solve real problems and deliver the outcomes our clients need.

Book a meeting with Tom

Or call us on 020 8098 2093

Remote debugging on Android devices

Step 1 – Open developer options

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.

Step 2 – USB debugging

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.

Step 3 – Configure Chrome to inspect the DOM

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!

Step 4 – Start debugging

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.

One more ProTip: if you’re testing a local website then you can also use port forwarding or vhost mapping to access the site on your device.

Here’s what it looks like:

Remote debugging on iOS devices

Similarly to Android devices, Apple offers the same ability in iOS 6+ to allow remote web inspection.

Step 1 – Enable Web Inspector

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.

Step 2 – Connect your device

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.

Step 3 – Start debugging

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.