One of the most difficult parts of building a responsive website, or a mobile website, is debugging. Mobile development has always involved simulators and emulators and quality assurance for mobile can be extremely time consuming. About halfway through building this website I found an app that ended up saving me hours of time.
I constantly have the webkit debugging tools open when building any website. While the same tools that allow you to debug desktop websites can be used for mobile, there are some drawbacks. Testing screen size and rotation is imperfect, you can’t test device only apis or simulate touch. The iOS Simulator will get you in the ballpark, but there has been no way to debug and edit html/css/js on the device. Enter iWebInspector.
IWebInspector hooks into private APIs for iOS5 and allows you to use a tool very similar to the webkit debugging tools with the iOS simulator. With these tools you can debug websites, webapps, and even Phonegap applications.
The Steps
The first step is to download Xcode from the Mac App store. Right now the only way to get the iOS Simulator is to download all of Xcode. You can grab Xcode here. On my machine the simulator was installed in /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iOS Simulator.
The second step is to download iWebInspector. You can get iWebInspector here.
Once you have the apps installed, open them both up and load a webpage into Safari in the iOS Simulator. There is a Hardware > Device menu that allows you to switch between different iOS devices. You then need to load the code into iWebInspector. Click on the “Load from Safari” button at the top of iWebInspector and then select your page from the list below. You can then traverse the DOM and edit your page just as you would a desktop website.
I hope this helps those of you out there building mobile or responsive websites for the first time. I know it’s saved me hours of development time, and a little bit of sanity.
Comments