Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

iWebInspector: Debugging webapps and PhoneGap apps on iOS

DZone's Guide to

iWebInspector: Debugging webapps and PhoneGap apps on iOS

· Mobile Zone
Free Resource

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!

 

Source: http://www.mobilexweb.com/blog/debugging-web-safari-phonegap-iphone-ipad

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}