Debugging on the iPad, iPhone or iTouch

I’ve been working on some responsive designs recently for the iPad. Sometimes debugging on mobile devices or tablets can feel almost impossible. Luckily with the iPad you can debug remotely fairly easily.

Remote debugging for the iPad, iPhone or iTouch

There are plenty of articles and forum posts on how to connect your device to your Mac and remote debug the DOM. Unfortunately it’s not quite as easy at it looks. Many people including myself have issues with the Safari DOM inspector not working correctly, for example not fully loading CSS or HTML. This will just add to your frustrations. I have also seen people having troubles with the JavaScript debug console. It’s a classic case of two steps toward and one step back.

WebKit nightly builds to the rescue!

A post on Stack Overflow suggested debugging with the WebKit Nightly Builds browser instead as the best solution to the problem. I simply downloaded the Nightly Builds browser and from there I was able to access the remote DOM inspector in the same way without any issues.

How to?

This will only work with an Apple Mac and either and iPhone, iPad or iTouch, for best results you should upgrade to the latest OS on both devices.

Step 1:

You will need to download WebKit Nightly Builds and install it on your Apple Mac.

Step 2:

Connect your iPhone, iPad or iTouch to your Apple Mac using a USB cable.

Step 3:

Open up the WebKit Nightly Builds browser and go to “Safari > Preferences > Advanced” and check the “Show Develop menu in menu bar” checkbox.

Step 4:

On your Mobile Device go to “Settings > Safari > Advanced” and turn on “Web Inspector”.

Step 5:

In the WebKit Nightly browser go to “Develop > iPad” and from there you can access the DOM inspector (If your using an iPhone or iTouch, then it will say that device instead of the iPad).

Debug to your hearts content

This actually really speeds up the debugging and development process and once your set up it becomes super quick to test, view and fix code for any Apple device.

Leave a Reply

Your email address will not be published. Required fields are marked *