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
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.
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.
You will need to download WebKit Nightly Builds and install it on your Apple Mac.
Connect your iPhone, iPad or iTouch to your Apple Mac using a USB cable.
Open up the WebKit Nightly Builds browser and go to “Safari > Preferences > Advanced” and check the “Show Develop menu in menu bar” checkbox.
On your Mobile Device go to “Settings > Safari > Advanced” and turn on “Web Inspector”.
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.