Debugging Web Content on iOS

Inspecting and debugging a website though a web inspector is a common practice among web developers. This blog explains how to do the same when using web content on an iOS device. You will need Safari 6.0 or higher to do this.

1. Connect your iOS device to your Mac

2. Enable Web Inspector in iOS

The first step is executed on your iOS device. Under Settings -> Safari -> Advanced you will find an option called Web Inspector. Enable this option (as shown in image 1) and your device is set for Developing purposes.

Image 1

3. Enable Develop Menu in Safari

The second step in the process is executed on your Mac. Open Safari and enable the Show Develop menu in menu bar option. To do this, select Safari -> Preferences -> Advanced. In the bottom of the popup you will find this option (as shown in image 2)

image 2

4. Select the Content To Debug

When the settings are correctly set, you can inspect content within an application on your iPhone. To do this, simply start your application on your device and view the menu within Safari as shown in image 3:


image 3

A list of options will appear. In this example an iPhone (Berry-iPhone) is used to inspect the content on Safari.

When the option is selected, a list of websites that are currently opened on the iOS device will be shown. This can be websites that are running on Safari or in a currently open native iOS application.

This doesn’t only work when using an actual device, it is also possible to do the same on an iOS-Simulator. Image 3 also shows the iPhone Simulator as an available option in the development menu.

5. Start Debugging the Content

When a choice has been made for the website that needs to be debugged, the Web Inspector will appear. You can now use the web inspector to inspect web content, debug JavaScript etc.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s