iWebInspector

iWebInspector was deprecated around 2012 when Safari added support for remote debugging. The tool is not available anymore.

First of all, full credit of the hack behind the tool to Nathan de Vries. He has discovered some days ago a private API and he has published a post about it. With this solution we can enable a Remote Web Inspector on iOS Simulator included with Xcode 4.2 and iOS 5 SDK using some gdb (debugger) commands.

I’ve started this post as a tutorial on how to enable this option and debug webapps on the iOS Simulator. After writing this post, I’ve realized it was too difficult to use and enable for a typical web developer without Xcode experience.

My next thought was: “it should be great to have a tool making these steps for us“. And my saturday’s afternoon paid for that thought. I’d experience with Objective-C for iOS so it wasn’t difficult to create my first Cocoa Mac application using the same language. After a couple of hours, the first version of iWebInspector was ready to go.

The solution is not working -yet- on real iOS devices, just on the iOS Simulator -available only for Mac OS-. The tool can attach the Web Inspector to any tab opened in Safari for iOS, to a chrome-less webapp (full screen) or to a PhoneGap application -or any native application using UIWebView-.

iWebInspector #

With this free tool you can enable the full WebKit Web Inspector, including:

• See and browse every element on your HTML element. You can change attributes, content and styles and see how they apply on Safari
• See all the resources involved in this page, including Databases, Local Storage, Cookies and ApplicationCache
• Check all the network traffic on your website
• See all your scripts, create breakpoints, watches and debug your JavaScript code.
• Record a timeline showing you rendering, scripting and loading times while you browse on Safari
• Profile your JavaScript code
• Audit your code, showing you a report on performance and other stuff
• See and use the JavaScript console

I’m pretty sure that Apple will make this tool public in a future version of iOS.

Attaching to PhoneGap and UIWebView #

If you are creating a PhoneGap application or a native iOS app with some UIWebView content, it’s easy to enable the Remote Web Inspector with a line of code instead of using iWebInspector. This is a private API so remember to remove this line for the final compilation or you may have an AppStore rejection for private API usage.

Find your application:didFinishLaunchingWithOptions method on your AppDelegate.m file and add this line of code inside:

// Remove me after debugging
[NSClassFromString(@"WebView") _enableRemoteInspector];  

That’s all! After that, run your app on the simulator and localhost:9999 will be pointing to the same Remote Web Inspector as in iWebInspector.

Suggestions and Bug Report #

iWebInspector was created in a couple of hours, and this is the first version available.  If you find bugs, problems or if you have a suggestion, feel free to contact me or leave a comment here.

Enjoy!