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