Using the Desktop Safari Web Inspector to Debug Your Installed iOS App


You can install your app on your iOS device and monitor its usage on your desktop monitor, including console feedback. Here’s how.

1. Install your app on the iOS device. Make sure the device is plugged into your Mac. (Web Inspector is available on iOS 6.0 and later.)

2. In your iOS device (I’m using an iOS 6.1 iPod touch), open the Settings app, navigate through Safari > Advanced, and turn on Web Inspector. Exit the Settings app.

3. Open the app in the device.

4. On the computer, start the Safari web browser.

5. Open Safari > Preferences.

6. Under Advanced, check the box for “Show Develop menu in menu bar.” Exit Prefs.

7. Click on Develop in the menu bar when it appears.

8. The name of the device should appear in the list. Tapping on it should show the name of the app opened in the device. (If not, go to User Agent in the desktop Safari and choose what your device has.)

9. Tap on the index link mentioned in the previous step. The Web Inspector appears. If you run your mouse over the lines on the page, the DOM, you should see matching sections of the page in the device be shaded.

10. Go ahead and interact with the app in the device and watch the information update on the desktop. Click on the tabs in the Web Inspector menu bar. If you have console.log messages, they and any errors and warnings should appear in the Console window.

11. Exiting the app will shut down the Web Inspector.

For more information about using this tool, see:

Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s