iWebInspector: Debugging webapps and PhoneGap apps on iOS

Debugging mobile web applications was always a painful process. In this post I’m presenting the free tool iWebInspector I’ve created to enable a full Web Inspector -including JavaScript debugging & profiling- in Safari for iPhone and iPad and in PhoneGap apps.

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-.


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.

Download iWebInspector

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.




29 thoughts on “iWebInspector: Debugging webapps and PhoneGap apps on iOS

  1. I just tried this with an app developed using NS Basic/App Studio. It works great!

    Congratulations on a great hack!

  2. if/when it can work on a real device, you will really have something. Just imagine being able to toggle between WiFi and carrier RF on a real device and compare the waterfall timings from the same target page. That will be absolutely awesome.

  3. Couldn’t find it on GitHub yet. :-)

    One thing that might be fun to play with would be to have you inject a script from disk into the WebView you’ve created. Say something like ~/.iWebInspector/profile.js .

    Any idea which revision of WebKit the simulator was built with? Would be nice to pull the original source, so we can figure out how to extend it.

  4. How to make this work with a Phonegap-type app that has multiple WebViews? I ask since I can’t seem to get it to refresh the ‘scripts’ list to show the various JavaScript files pulled down by the current WebView (hitting ‘Load’ again seems to not work). Thanks!

  5. To clarify, there is one problem where the app has multiple WebViews, but I seem to be able to access only one of them.

    Then there is a possible other problem, where I am not sure that iWebInspector is really getting the latest state of the WebView that it is actually currently looking at: For example, there may be script includes that have been dynamically added to the WebView’s ‘head’ tag that are not showing up.

  6. @ Patrick Mueller there is no much to add to GitHub, pero I can do it. Remember iWebInspector is just sending a private call to Mobile Safari, there is no work for the Inspector itself. It’s inside Mobile Safari. About the WebKit version, it should be the same as in the real device (iOS 5.0)

  7. @Chris M Balz I understand your problem. First, be careful with multiple UIWebViews working at the same time, I had lot of problems with that. About your problem, to be honest I can’t do many things for that. Remember iWebInspector is just “enabling” the hidden Remote Web Inspector on the iOS SDK. I didn’t create the Web Inspector, so the limitation you are experiencing should be a limitation inside the SDK itself. Maybe… that is why it’s not finished and it was hidden by Apple.

  8. Attaching (to Mobile Safari and my custom App) works great, but JavaScript errors don’t seem to appear in the console. :( Does that work for anyone?

  9. Hi Max, thanks for this app, really enjoy working with it.
    However, I run into a strange problems, it seems that I can’t see any errors if I load application from safari browser (if I type broken code in javascript console – it shows everything ok).
    Additionally, console.log() functionality seems to be broken. When you load a website into iWebInspector, switch to Console and type “console.log(true)” it displays “undefined”, whereas in Safari/Chrome it returns “true” and “undefined”

  10. Hi Max, it’s possible to do the same thing using Safari by just navigating to http://localhost:9999. I guess iWebInspector just makes this part a little easier. I did find using Safari to be a little more reliable. iWebInspector will frequently show a blank screen. My suggestion is to open source iWebInspector.

    Also, Console doesn’t seem to work at all using Safari or iWebInspector. No messages seem to appear and if you try to evaluate an expression while the debugger is paused using the console you get an Error. Has anyone been able to get the console working?

  11. Ryan, it’s possible to navigate to http://localhost:9999 but only after enabling the hidden feature. Regarding console’s problem, unfortunately I can’t do anything to solve them without injecting anything to the page. My guess is that Mobile Safari is catching the console output to show it in the Safari console window that you can enable from Settings > Safari. I’ll open source it when I have a minute. Remember iWebInspector is not doing anything special; I mean, there is no much code to open source ;) Read the original post where you will find how this hidden feature was enabled.

  12. I am so anxious/excited to try this tool… but the NSClassFromString snippet above isn’t working for me. Even when toggling off ARC I am getting errors and warnings about _enableRemoteInspector being “unrecognized” or “no known class method for selector”.

    Anyone have another way to get iWebInspector working w/latest XCode?

  13. Many thanks for the tool… Unfortunately I’m experiencing two problems:
    1) As Chris said, the snippet for Phonegap is not working. I get “No Known class method for selector _enable…Inspector. Any clues ? I’m using xCode 4.2.1 and Phonegap 1.5
    2) Your tool does not seems to be working with Phonegap 1.5 . Maybe that is because they have renamed all classes to Cordova ? Can you please release this project in github ? We want to contribute by fixing those issues… :)


  14. PhoneGap to Cordova name change has nothing to do, because the call to the private method is done to the private WebView call that has nothing to do with PhoneGap itself. Do you have the debugger running while trying to debug the PhoneGap app? Try to stop the debugger and open the app on the simulator manually.

  15. There is no relation between PG version and iWebInspector. Remember to close the Xcode debugger before trying to attach iWebInspector.

  16. Hi, thanks for the support. I figure out what was the problem… Apparently iWebInspector does not find the app in the process list if the app has a long name (Mine was oDataPhonegapTest). I have changed the app name for a short one and now it was able to find it. Max was right, nothing to do with phonegap versions.

    Max, any idea why _enableRemoteInspector is not being recognized (See my previous comment, item 1) ? Maybe Apple has blocked it in the latest xCode updates ? I’m using xCode 4.2.1 and iOS 5.0.

    Cheers, Alan

  17. Hi,

    I guess the updated snippet would be:

    Class class = NSClassFromString(@”WebView”);
    [class performSelector: @selector(_enableRemoteInspector)];

    Works for me at least, too bad it is only on the simulator, not on the device. Or am I missing something?

  18. I can’t get any output of console.log() to show up in iWebInspector. Bug or (missing) feature?


  19. I was wondering if you need the [NSClassFromString(@”WebView”) _enableRemoteInspector]; when one is on 10S 6. I am trying to debug a Phonegap/Sencha Touch app and need to have the debugger running when the app starts

  20. Thanks,but I am trying to debug a problem at startup and it seems that I cannot start the safari debugging till the Phonegap app loads in the simulator. Of course this is too late and I see no reload option that works with a pure web app in safari

Leave a Reply

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