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

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.

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.

 

Enjoy!

Share
Loading Facebook Comments ...
  1. #1 written by ghenne November 21st, 2011 at 15:26

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

    Congratulations on a great hack!

    RE Q
  2. #2 written by Bertrand Dufresne November 21st, 2011 at 16:40

    Xmas a month earlier! Thank you Santa @firt.

    RE Q
  3. #3 written by MH November 21st, 2011 at 20:51

    One question, is the performance of the iOS simulator the same as an actual iPhone/iPad?

    RE Q
  4. #4 written by Tony Perez November 21st, 2011 at 23:58

    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.

    RE Q
  5. #5 written by Patrick Mueller November 22nd, 2011 at 14:13

    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.

    RE Q
  6. #6 written by Chris M Balz December 9th, 2011 at 00:03

    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!

    RE Q
  7. #7 written by Chris M Balz December 9th, 2011 at 19:21

    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.

    RE Q
  8. #8 written by firt December 9th, 2011 at 23:44

    @ 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)

    RE Q
  9. #9 written by firt December 9th, 2011 at 23:46

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

    RE Q
  10. #10 written by aley December 13th, 2011 at 11:08

    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?

    RE Q
  11. #11 written by Oleg December 26th, 2011 at 12:56

    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”

    RE Q
  12. #12 written by Ryan December 27th, 2011 at 00:30

    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?

    RE Q
  13. #13 written by firt December 27th, 2011 at 14:14

    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.

    RE Q
  14. #14 written by chris February 10th, 2012 at 11:47

    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?

    RE Q
  15. #15 written by firt February 10th, 2012 at 12:48

    You don’t need any code for iWebInspector. You need the code if you want to do it yourself without iWebInspector

    RE Q
  16. #16 written by Alan Rubin April 6th, 2012 at 12:24

    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… :)

    Cheers,
    Alan

    RE Q
  17. #17 written by firt April 6th, 2012 at 13:56

    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.

    RE Q
  18. #18 written by Nishan April 12th, 2012 at 11:15

    Agree with Alan.Does not work when change to PG 1.5 version. When use PG 1.3 version does work

    RE Q
  19. #19 written by firt April 13th, 2012 at 16:34

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

    RE Q
  20. #20 written by Alan Rubin April 16th, 2012 at 09:42

    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

    RE Q
  21. #21 written by Jussi Hagman April 18th, 2012 at 15: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?

    RE Q
  22. #22 written by Alan Rubin April 20th, 2012 at 12:52

    Yes, it works… Thanks Jussi !

    RE Q
  23. #23 written by Tim July 18th, 2012 at 09:45

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

    Tim

    RE Q
  24. #24 written by firt July 18th, 2012 at 13:34

    The Safari console (you can enable it from Settings) is trapping the console messages unfortunately.

    RE Q
  25. #25 written by Giorgio Natili October 21st, 2012 at 14:05

    I noticed that it works when emulating iOS 5 or greater, someone else found issues with earlier iOS versions?

    RE Q
  26. #26 written by firt October 21st, 2012 at 21:41

    It works only on 5.x, not before, not 6.x (you have an official remote debugger there)

    RE Q
  27. #27 written by John McFetridge December 14th, 2012 at 14:54

    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

    RE Q
  28. #28 written by firt December 14th, 2012 at 14:57

    On iOS6 you don’t need this anymore. You can just use the remote debugger on Safari for Mac, it will connect to your WebView

    RE Q
  29. #29 written by John McFetridge December 14th, 2012 at 17:30

    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

    RE Q

SetPageWidth