Posted Dec 18 by AppWorks Developer.
Updated Dec 19 by Benjamin Chilibeck.

This article will show you how to debug web applications on your iOS device.

4392 views. 0 comments.

Author: Ben Barth, Mobile Software Developer at OpenText

Developing web applications can be fun and exciting. Even though browsers (and developers) are getting better at following standards — bugs can be exposed in your mobile browser that aren't visible in your desktop browser. My hope for this article (and AppWorks as a whole) is to provide an avenue in which you can quickly leave those pesky mobile bugs behind you and spend your time on things you and your users really care about.

Requirements

  • Mac (OS X)
    • Lion or greater
    • Safari version 6.0 or greater
  • iPhone, iPad, or iOS Simulator (iOS)
    • iOS 6 or greater

Mobile Device

On your mobile device launch the Settings app.
Navigate to Settings > Safari > Advanced and enable the Web Inspector option.

Once this setting has been enabled, launch Safari (on your mobile device) and enter the url of the web application or page you'd like to debug.

Now you'll need to physically connect your iPhone or iPad to your Mac.

iOS Settings

Mac

By default, Developer options are disabled in Safari. Let's go ahead and enable it.

  1. Open Safari's Preference pane by going to Safari > Preferences or using the keyboard shortcut “?,“.
  2. Under the Advanced tab, enable the Show Develop menu in menu bar option.
    Safari
  3. Now you'll have a new menu in the menu bar labelled Develop.
    If you are debugging your iPhone there will be a menu item labelled iPhone with a list of currently open Safari (iOS) tabs. Similarly, the menu will display iPad for iPad, etc.

Develop Menu

Debugging

Believe it or not — it's that easy!

Now you can debug your mobile web application as if it were on your desktop!


Table of Contents

Your comment

To leave a comment, please sign in.