Enable Remote Debugging with Safari Web Inspector in iOS 6

*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, run Javascript commands, and do everything you could normally do from the desktop inspector.

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.
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
- dmackerman
  
  Seems like Apple is jumping ship on Windows Safari. It makes sense really – the product was never up to Apple standards and not maintained well. Luckily there are still 3rd party solutions such as Weinre:
  
  http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/
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
- dmackerman
  
  Seems like Apple is jumping ship on Windows Safari. It makes sense really – the product was never up to Apple standards and not maintained well. Luckily there are still 3rd party solutions such as Weinre:
  
  http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/
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

Enable Remote Debugging with Safari Web Inspector in iOS 6

Let's Talk

Modus Newsletter

Recent Entries

Categories

Archives