Last Updated: December 26, 2018

Debug HTML/JavaScript on iOS with Safari 5&6

Debugging web content within an IOS application has recently become a significant part of my day. The developer features offered in Safari have become an invaluable tool in this effort. Specifically, the Safari Web Inspector allows you to:

Inspect and edit the DOM & CSS
Inspect and execute JavaScript
Set breakpoints in the JavaScript
Analyze client-side storage, databases and cookies

Here is how you can take advantage of these features:

iOS 5 & Safari 5
Insert the following code into your iOS application's AppDelegate.m file to enable the remote inspector when running in the iOS 5.0 Simulator

#if TARGET_IPHONE_SIMULATOR
    [NSClassFromString(@"WebView") performSelector:@selector(_enableRemoteInspector)];
#endif

After launching your iOS app in the simulator, open Safari 5 and browse to localhost:9999. You will see a list of any instances of UIWebView running in your iOS app. Select one to access the features of the Web Inspector.

iOS 6 & Safari 6
For iOS 6 & Safari 6, the process is a bit more simple and does not require the above code. After launching your iOS app in the iOS 6 Simulator, open Safari 6. Ensure, that under the Advanced tab in Safari Preferences, the Show Develop menu in menu bar checkbox is enabled. Then, under Develop in the menu bar, you will see iPhone Simulator which will list all instances of UIWebView running in your iOS application.

Select one to launch the Safari Web Inspector and begin debugging the UIWebView.