September 19, 2012

Enable Remote Debugging with Safari Web Inspector in iOS 6 By Dave Ackerman

ios-feature

*NOTE: You will need to upgrade to Safari version 6.0 to enable this functionality. *

With the recent release of iOS6, Apple has finally introduced a remote web inspector for debugging web applications on iOS devices. Enabling it is simple, but it’s buried under a few options on your phone.

On your device, head to Settings > Safari > Advanced

You’ll find the Web Inspector toggle there.

Web Inspector in Safari Settings

Once enabled, you’ll need to physically connect your iPhone or iPad to your Mac. Yes, this is Mac only at this point. In Safari’s Preferences pane under Advanced, check the Show Develop menu in the menu bar checkbox.

Safari Develop Menu

Select the Develop menu, and your iDevice should be a menu option. You should now be able to inspect DOM elements, modify CSS on the fly, and run Javascript commands.

iPhone Remote Debugging in Action

As a side note, this procedure will also enable remote debugging of your PhoneGap (Cordova) and other UIWebView based projects.

Do you need professional help with developing hybrid HTML5 mobile applications?

Modus Create is a product development, training, and services company based out of Reston VA. We help clients realize their product vision, and build in-house development capabilities.

Interested in working with us, or have a question? Feel free to contact us anytime, or call us directly at 1-855-663-8727.

  • KK

    Will this work on the Windows version of Safari? I tried it and the iPhone doesn’t appear on the Develop menu.

    • dmackerman

      Unfortunately not. This is a Mac only feature at this point.

  • KK

    Will this work on the Windows version of Safari? I tried it and the iPhone doesn’t appear on the Develop menu.

    • dmackerman

      Unfortunately not. This is a Mac only feature at this point.

  • devdev

    Mac only at this point. Do they want us to ignore iPad?

    • dmackerman

      Not sure what you mean by “ignore iPad”? The remote inspector works on the iPad as well from my experience.

  • devdev

    Mac only at this point. Do they want us to ignore iPad?

    • dmackerman

      Not sure what you mean by “ignore iPad”? The remote inspector works on the iPad as well from my experience.

    • Craig Jacobs

      Get a Mac. You can thank me later.

  • acid

    Why is this mac only…that is total crap man…don’t I have a mac but i dun develop on it i develop on my workstation…do u guys not want to get our apps

  • acid

    Why is this mac only…that is total crap man…don’t I have a mac but i dun develop on it i develop on my workstation…do u guys not want to get our apps

  • joe

    I can´t get it works, my iPhone doesn’t appear on the Develop menu. I´m using Mac and ios 6 any idea?

    Regards!

    • dmackerman

      Are you sure your device is connected? I’ve done this a few times in my foolishness.

      I would try restarting Safari as well. Sometimes it can get hung up.

      • Violett

        I have followed all steps and couldn’t get it running on iPod touch (There is no iPhone options in develop menu). Just wondering if it is the same problem as Joe mentioned or simply doesn’t work with iPod?

        Thanks!

        • dmackerman

          Are you positive you’re running iOS 6?

          We haven’t verified it works on an iPod Touch, but I imagine that it would. There are lots of more tidbits of information available on HTML5 and iOS6 in this article (that mentions the iPod Touch):

          http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers

          • Violett

            Thanks a lot for your quick response. I already tested on iPhone5 and also not able to see the iPhone option in the develop menu. I just noticed that my iTunes version is 10 and I’m asked to update it. Does this have anything to do with this problem?

            Thanks!

          • dmackerman

            I’m running iTunes 10.7. Can you check your iOS Version? Plug in your iPhone/iPod/iPad and look at the top of iTunes. You should see something like this:

            http://dl.dropbox.com/u/68704/Screenshots/4h.png

            Make sure that “Software Version” is 6.0. If it’s not, you’ll need to upgrade to access the remote inspector.

          • Violett

            Hi,
            I’ve already checked it on both devices and iTunes as well. The iOS versions on both iPhone and iPod are 6.This is very wired! I don’t know how to get them work.

            Any suggestions are very appreciated,
            Thanks!

    • skippykawakami

      You also need to update to Safari 6. Safari 5 and under doesn’t support this.

      • grrr

        Apple pulled safari 6, didn’t they?

        • dmackerman

          What do you mean by “pulled safari 6″?

  • joe

    I can´t get it works, my iPhone doesn’t appear on the Develop menu. I´m using Mac and ios 6 any idea?

    Regards!

    • dmackerman

      Are you sure your device is connected? I’ve done this a few times in my foolishness.

      I would try restarting Safari as well. Sometimes it can get hung up.

      • Violett

        I have followed all steps and couldn’t get it running on iPod touch (There is no iPhone options in develop menu). Just wondering if it is the same problem as Joe mentioned or simply doesn’t work with iPod?

        Thanks!

        • dmackerman

          Are you positive you’re running iOS 6?

          We haven’t verified it works on an iPod Touch, but I imagine that it would. There are lots of more tidbits of information available on HTML5 and iOS6 in this article (that mentions the iPod Touch):

          http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers

          • Violett

            Thanks a lot for your quick response. I already tested on iPhone5 and also not able to see the iPhone option in the develop menu. I just noticed that my iTunes version is 10 and I’m asked to update it. Does this have anything to do with this problem?

            Thanks!

          • dmackerman

            I’m running iTunes 10.7. Can you check your iOS Version? Plug in your iPhone/iPod/iPad and look at the top of iTunes. You should see something like this:

            http://dl.dropbox.com/u/68704/Screenshots/4h.png

            Make sure that “Software Version” is 6.0. If it’s not, you’ll need to upgrade to access the remote inspector.

          • Violett

            Hi,
            I’ve already checked it on both devices and iTunes as well. The iOS versions on both iPhone and iPod are 6.This is very wired! I don’t know how to get them work.

            Any suggestions are very appreciated,
            Thanks!

    • skippykawakami

      You also need to update to Safari 6. Safari 5 and under doesn’t support this.

      • grrr

        Apple pulled safari 6, didn’t they?

        • dmackerman

          What do you mean by “pulled safari 6″?

  • grrr

    This article is crap, there’s no where to download safari 6!!

    • dmackerman

      Which OS are you running? I’m pretty sure Safari 6 isn’t supported on Windows, if that’s what you’re trying. If you’re on Mountain Lion you should be able to update through Software Update. Otherwise try downloading here:

      http://download.cnet.com/Apple-Safari/3000-2356_4-34119.html

      • http://bowdenweb.com/ J. Albert Bowden II

        correct, apple has ceased developing safari for windows…last version was in the 5′s…so certainly not 6

    • ModusJesus

      Um… Have you tried: http://apple.com/safari ??? A simple google search for “safari 6 download” would have yielded that result!

  • grrr

    This article is crap, there’s no where to download safari 6!!

    • dmackerman

      Which OS are you running? I’m pretty sure Safari 6 isn’t supported on Windows, if that’s what you’re trying. If you’re on Mountain Lion you should be able to update through Software Update. Otherwise try downloading here:

      http://download.cnet.com/Apple-Safari/3000-2356_4-34119.html

    • ModusJesus

      Um… Have you tried: http://apple.com/safari ??? A simple google search for “safari 6 download” would have yielded that result!

  • Ares

    As a side note: You do NOT require to have a actual device plugged in. You can also use the iOS Simulator. Just open Safari on the simulator and it should appear on under the Develop menu on Safari.

    • dmackerman

      Good tip, Ares.

  • Ares

    As a side note: You do NOT require to have a actual device plugged in. You can also use the iOS Simulator. Just open Safari on the simulator and it should appear on under the Develop menu on Safari.

    • dmackerman

      Good tip, Ares.

  • Pingback: Mobile Safari Debugging | Mobile Musings

  • Pingback: Did you know – Safari Remote Debugging and PhoneGap | SDK News

  • http://twitter.com/danielsitek Daniel Sitek

    Hmm i see connected iDevice in development menu, but than no apps to control. Are there any other options to get it works?

    • dmackerman

      Do you have a website/webapp open on your phone? If you can see the iDevice, you’ve gotten past the “hard part” and it should work pretty seamlessly from there.

      • http://twitter.com/danielsitek Daniel Sitek

        Aaaah! I got it wrong :) I thought that project, i want to test, must be opened in safari on my mac, but it was wrong.

        Project, i want to test must be opened in safari on iDevice :) Great! :)

        • dmackerman

          Glad you got it working!

  • http://twitter.com/danielsitek Daniel Sitek

    Hmm i see connected iDevice in development menu, but than no apps to control. Are there any other options to get it works?

    • dmackerman

      Do you have a website/webapp open on your phone? If you can see the iDevice, you’ve gotten past the “hard part” and it should work pretty seamlessly from there.

      • http://twitter.com/danielsitek Daniel Sitek

        Aaaah! I got it wrong :) I thought that project, i want to test, must be opened in safari on my mac, but it was wrong.

        Project, i want to test must be opened in safari on iDevice :) Great! :)

  • http://bluesmoon.info Philip Tellis

    Any idea how to get the debugger to stay open when I close a tab or close the browser? I’m trying to debug the pagehide event and the debugger closes immediately after this event fires, so I can’t read the logs. I’m about this >< close to recording a screencast so I can play it back and hit pause before the debugger closes.

    • dmackerman

      Could you try opening 2 tabs? Not sure if the debugger will monitor 2 at once, but it’s worth a shot.

      • http://bluesmoon.info Philip Tellis

        yeah, opening two tabs is not the problem — it opens two debugger windows. when I close a tab, the debugger window associated with that tab closes, so I still can’t debug what’s happening in the pagehide event.

  • http://bluesmoon.info Philip Tellis

    Any idea how to get the debugger to stay open when I close a tab or close the browser? I’m trying to debug the pagehide event and the debugger closes immediately after this event fires, so I can’t read the logs. I’m about this >< close to recording a screencast so I can play it back and hit pause before the debugger closes.

    • dmackerman

      Could you try opening 2 tabs? Not sure if the debugger will monitor 2 at once, but it’s worth a shot.

      • http://bluesmoon.info Philip Tellis

        yeah, opening two tabs is not the problem — it opens two debugger windows. when I close a tab, the debugger window associated with that tab closes, so I still can’t debug what’s happening in the pagehide event.

  • http://www.allthingsweb.net.au/ Carly Willats

    This is a huge addition to my toolkit! Thanks for the instructions, too easy!

  • Manu

    Hi,
    Thanks for this useful post.
    I can see my device in the develop menu of safari, but I can’t see the phonegap application launched on my device…
    Any idea?
    Thanks

  • Pingback: Mobile Remote Debuggin in Chrome and Safari | Aenigma

  • Luis Alberto Hernandez Monroy

    Very useful for production site.. but don’t work with local site

  • Pingback: My Development Workflow for PhoneGap iOS Apps : Devgirl's Weblog

  • Pingback: Building a custom PhoneGap plugin for iOS | Modus Create

  • Grgur

    Heads up: If you’re having problems inspecting your web apps in Xcode5/iOS7, upgrade to Safari 6.1 or use WebKit nightly http://nightly.webkit.org

  • coding solver

    i connected ipad to my windows pc. but when i go to develop option in safari there is no ipad listed. will it work with windows pc? or i have to use apple pc only ?

    • Marc

      In the text is says “Yes, this is Mac only at this point.”

  • Pingback: Cordova 3.3.0 Now on PhoneGap Build | SDK News

  • Pingback: Remote Debugging Mobile Browser - Jim Floss : Jim Floss