Enable Remote Debugging with Safari Web Inspector in iOS 6

September 19, 2012

*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?

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.
- Craig Jacobs
  
  Get a Mac. You can thank me later.
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/
  - David Luu
    
    Um, the github site/page for that project and download appears removed? Where to get this now? The phonegap group/user still exists on github but it doesn’t contain a weinre project anymore.
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()
Luis Alberto Hernandez Monroy

Very useful for production site.. but don’t work with local site
- Jared
  
  Sure it does, I use it on all my local projects.
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()
David Luu

For those asking about Windows/PC support, you can also take a look at this option: http://blog.falafel.com/Blogs/josh-eastburn/2014/03/04/ios-web-inspector-on-windows-with-telerik-appbuilder
http://www.webcodeman.com Remote PHP Developer

Awesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.Freelance Web Developer
satish

great its working
Qingping Zhang

it’s great, may i ask you a irrelevant question? I have tried and connected my Iphone5 with Mac, i want to get http trace record for one page on iphone/safari, actually i don’t know how to use the develop panel to do.
Louis Tristan

Thank you. This helped us fix the mobile version of our site : )
bilalrabbi

For some reason my computed style and tags will not open.
Josh Mouch

This is only available from a Mac machine??! Really!?? That should be the first line of the article. That’s ridiculous. Probably 99% of development is done from Windows machines.
- JayGarcia
  
  99% of development is done from Windows machines? You sure about that?
  - Josh Mouch
    
    No, but enough of it is that Apple shouldn’t make this available to only Macs. I’m working on four projects right now that support iPad and not one person on our 30 person team owns a Mac.
    - JayGarcia
      
      You can blame the technology. I’d blame your management. =)
      - Josh Mouch
        
        Open source has been doing this for years (http://muellerware.org/papers/weinre/manual.html). The richest technology company in the world not doing this is laziness or a far-too-transparent marketing ploy.
      - JayGarcia
        
        I don’t disagree =). Apple has been known to leverage Open Source for their own gains.
        
        What you’re pointing out still doesn’t fix the problem you’re facing. Your management should have equipped your team w/ the tools necessary to get the job done. I provide whatever hardware/software my team needs to get their jobs done with excellence.
      - Josh Mouch
        
        I guess we’ll set up a Mac in the corner next to a pink dunce hat for the one time a month we have an iPad-only javascript error to debug. =)
      - Will O
        
        Mac People are silly, there CPU use to be better, now they all run PC chips, all you pay for is the “design” and the clunky locked down OS.. I can not drag music i OWN from my computer to my mobile device, or vice versa? Syncing to a desktop, then swapping desktops presents all sorts of problems… HATE ios, but love my iphone.. HAHHA
adnan

thanks a lot for the article man. you solved my problem.
Danny Glover

Still relevant for iOS 8 thanks!

What We Do

We’ll work closely with your team to instill Lean practices for ideation, strategy, design and delivery — practices that are adaptable to every part of your business.

See what Modus can do for you.

LET'S GET STARTED

We're Hiring!

Join our awesome team of dedicated engineers.

APPLY NOW

Enable Remote Debugging with Safari Web Inspector in iOS 6

Related Posts

What We Do

We're Hiring!