Join the DZone community and get the full member experience.
Join For Free
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.
Comments