• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

AppleToolBox

Tools and Fixes for Mac, iPad, iPhone & iPod

Search posts

  • About
  • Contact

CONNECT WITH US

CATEGORIES

';
  • All
  • iPhone
  • iPad
  • Mac/MacBook
  • Apple Watch
  • How-To’s
  • Reviews

SITE

  • Home
  • About Us
  • Contact
  • Advertise

Search posts

You are here: Home / How-to / How to Use Web Inspector to Debug Mobile Safari (iPhone or iPad)
web inspector feature in iOS and iPadOS

How to Use Web Inspector to Debug Mobile Safari (iPhone or iPad)

By SK 23 comments Last updated February 5, 2020

Developing web pages for mobile devices or debugging your hybrid app is often difficult. But luckily for folks designing on iOS, starting way back with iOS 6, Apple offers a remote web inspector feature in iOS.


Web Inspector allows web and mobile app developers to use macOS and OS X Safari Developer Tools to remotely debug web content or hybrid apps in mobile Safari on iPad or iPhone.

It’s an easy and practical way to debug, optimize and modify your web pages or hybrid apps on iOS. How to use Web Inspector to debug mobile Safari

To access these development tools, enable the Develop menu on your Mac’s Safari’s Advanced preferences.

Contents

  • 1 Quick tips
    • 1.1 Related Articles
  • 2 Mac Computer Required
  • 3 Use the Same Apple ID and iCloud Sync!
    • 3.1 And Check that Safari is the Same Version Too
  • 4 Reset your location and privacy settings
    • 4.1 Pro Keyboard ShortCut Tip on Mac for Web Devs
  • 5 Use Web Inspector to debug mobile Safari
  • 6 iDevice Not Showing Up in the Develop Menu in Safari?
  • 7 Reader Tips 
    • 7.1 Related Posts:

Quick tips quick tips 2019

Follow these quick tips to get web inspector working so you can debug your site or app for Safari

  • Reset your location and privacy settings on your iPhone, iPad, or iPod touch. Go to Settings > General > Reset > Reset Location & Privacy
  • Make sure you sign into the same Apple ID on the computer as your iPhone, iPad, or iPod touch
  • Turn Safari iCloud syncing on for both the computer and any iPhone, iPad, or iPod touch
  • On the iPhone or iPad, go to Settings > Safari > Advanced and toggle on Web Inspector
  • On the computer, open Safari and go to the Safari menu > Preferences > Advanced and checkmark Show Develop menu in menu bar

Related Articles

  • View Webpage HTML Source Code on iPad or iPhone. No App Required!
  • How To View HTML Source Code in Safari
  • How To See Favicons in Safari for iPhones and Macs

Mac Computer Required

Sorry Windows folks but Safari’s Web Inspector is only compatible with Macs!



Use the Same Apple ID and iCloud Sync!

Make sure both your iDevice and your Mac are signed in with the same Apple ID and that you toggle ON Safari in iCloud.

For your iDevice: Settings > Apple ID Profile > iCloud > Safari > toggled ON

For your Mac: Apple Menu > System Preferences > Apple ID or iCloud > Safari > Checkmarked

And Check that Safari is the Same Version Too

Make sure Safari on your Mac is the same version as Safari on your iDevice. You may need to update your iOS version or your version of Safari running on your Mac.

Reset your location and privacy settings

  1. Go to Settings > General
  2. Select Reset
  3. Choose to Reset Location & Privacy App Store Displays No Purchases for Previous Purchases

Pro Keyboard ShortCut Tip on Mac for Web Devs

If you press CTRL+Command+R in Safari, you can see how a website would look on a particular device by selecting the device.

Web Developer view on Safari using Mac
Toggle the keyboard shortcut to exit out of web dev view.

Use Web Inspector to debug mobile Safari

1. On your iPad, iPhone or iPod touch, tap Settings > Safari > Advanced and toggle on Web Inspector. And enable JavaScript if it isn’t already onSafari web inspector on iOS device

2. On your Mac, launch Safari and go to Safari menu > Preferences > Advanced then check “Show Develop menu in menu bar” if you have not done so alreadydevelopers menu on Mac OSX

3. Connect your iOS device to your Mac with the USB cable. This is critical–you must connect the devices manually, using a cable. It does not work via WiFi!

4. Now on your iPad, open the website that you want to debug, then, on your Mac, open Safari and go to the “Develop” menu. You now see your iDevice that you connected with your Mac. If you do not have any page open on your iDevice, you see a message saying “No Inspectable Applications.”Mac OSX develop menu

5. Now debug the page that is open on mobile Safari just like you would debug on Mac, inspect DOM elements, modify CSS, measure page performance and run Javascript commands.

Use the debugger tool to help you find the cause of any JavaScript errors on your webpage. You can add breakpoints, debug the javascript and inspect the value of the variables at runtime.

Safari should also detect any CSS, HTML, and JavaScript errors. And you’ll see the details of each error in the debugger.IPhone iPad web inspector

iDevice Not Showing Up in the Develop Menu in Safari?

  •  Clear your Safari cache and cookies
  • Update Safari on your Mac and iDevice if an update is available
    • If you run a beta iOS or macOS version, you may need to run the latest beta on all devices
  • Try another cable and/or port on your Mac. Make sure that cable is a genuine Apple lightning cable or MFI Certified (Made For iPhone)
  • Check that Web Inspector is toggled ON. iOS updates sometimes toggle this back to the default OFF setting. So just make sure to check Settings > Safari > Advanced > Web Inspector
    • Try toggling Web Inspector Off, wait 10 seconds, and toggle back on
  • Try Safari Technology Preview browser instead
  • Quit of Safari on your Mac and restart it. See if your Mac’s Safari then recognizes your device and allows debugging
  • Check that you are not using Safari’s Private Browsing mode if your iDevice only briefly shows up in Safari’s Develop menu and then disappears
  • Open Activity Monitor and check what’s going on with Safari

Reader Tips 

  • If you’re using an older iDevice with iOS 6 or earlier, your device’s Safari web browser has its own built-in Debug Console! Just access Safari’s Debug Console by going to Settings > Safari > Developer > Debug Console
sudz - apple
SK( Managing Editor )

Obsessed with tech since the early arrival of A/UX on Apple, Sudz (SK) is responsible for the editorial direction of AppleToolBox. He is based out of Los Angeles, CA.

Sudz specializes in covering all things macOS, having reviewed dozens of OS X and macOS developments over the years.

In a former life, Sudz worked helping Fortune 100 companies with their technology and business transformation aspirations.

Related Posts:

  • iOS 13 or iPadOS problems and how to fix them - Troubleshooting GuideiOS 13 or iPadOS problems and how to fix them -…
  • What is iCloud Drive and how is it different from iCloud?What is iCloud Drive and how is it different from iCloud?
  • Sidecar not working in iPadOS and macOS? How to fix Sidecar problemsSidecar not working in iPadOS and macOS? How to fix…
  • The Definitive Guide to iCloud Photos (2020 update)The Definitive Guide to iCloud Photos (2020 update)
  • Taking Photo But iPhone Says Storage is Full?Taking Photo But iPhone Says Storage is Full?
  • iMessage not working iOS 13 or iPadOS? Fix it todayiMessage not working iOS 13 or iPadOS? Fix it today
  • iMessage Not Working iOS 12? Fix Message App ProblemsiMessage Not Working iOS 12? Fix Message App Problems
  • iCloud not syncing? How to troubleshoot iCloud syncing problemsiCloud not syncing? How to troubleshoot iCloud…
  • How To Reset the Screen Time Passcode on iOS, iPadOS, or macOSHow To Reset the Screen Time Passcode on iOS,…

Reader Interactions

Write a Comment Cancel reply

Show 23 Comments

  1. mybrainisopen says

    December 2, 2019 at 8:06 AM

    I had a problem with inspecting an iPad. The key thing that solved it for me was this:

    Reset your location and privacy settings on your device.
    Settings > General > Reset > Reset Location & Privacy

    Reply
    • Richard Tallent says

      January 2, 2020 at 3:27 PM

      Thanks! This worked for me.

      Reply
    • Nathan Broadbent says

      February 5, 2020 at 7:33 AM

      I can confirm that this also fixed the issue for me. As soon as I reset the settings, my iPhone showed up in the Develop menu on my Mac. (iPhone 6S running 13.3.1, macOS Catalina 10.15.3)

      Reply
    • Soulshake says

      February 12, 2020 at 8:32 AM

      This fixed it for me too, THANK YOU!!!

      Reply
  2. Lindsey says

    December 18, 2018 at 3:31 PM

    just wondering if it’s possible to use this feature if you don’t have a live site? I want to make changes to a test site that has not launched yet and test on mobile. Thanks!

    Reply
    • SK says

      December 19, 2018 at 8:49 AM

      Hi Lindsey,

      It should work even if the site isn’t public. As long as you can access it on your Mac or iDevice, you can use the web inspector.

      Sam

      Reply
  3. zac says

    July 10, 2018 at 2:18 AM

    Thanks for writing this. Out of dozens – if not hundreds – of times I tried to do this though, I’ve got it working just a few. I’ve got different problems with it but at the moment, whatever website I try to inspect, I click on it (Developer -> device -> website) and nothing happens.

    Reply
  4. Ginga says

    July 2, 2018 at 7:24 PM

    How do you know when mobile device has been debugged?

    Reply
    • SK says

      July 3, 2018 at 9:32 AM

      Hi Ginga,

      Web Inspector is used to debug websites and mobile hybrid apps, not the mobile device itself.

      Web Inspector allows a developer to modify, debug, and optimize a website and then preview those changes on web pages. You can even see your content using various screen sizes, orientations, and resolutions.

      To access these Safari developer tools, just enable the Develop menu in your Mac’s Safari’s Advanced preferences.

      Reply
  5. Sergey says

    April 13, 2018 at 5:45 AM

    Thx for this information man! 🙂

    Reply
  6. Tod says

    March 12, 2018 at 3:09 AM

    It would be nice if you could just connect an apple product to another apple product without having to scour the web for days or having to backup/upgrade/downgrade 2 operating systems and Safari apps to do so. This basically makes development and maintenance of iOS apps a painful & massive waste of time.

    Well done biggest company in the world! Nice ‘ecosystem’ you have here, what a good reason to pay 10x over the odds for Apple hardware.

    On this note, this article ends by saying:

    “If your iDevice only briefly shows up in Safari’s Develop menu and then disappears.”

    Then…. what, exactly? Please finish the sentence. Which versions of iOS / Safari are compatible enough to connect to one another?

    Reply
    • Jette says

      November 18, 2019 at 5:58 AM

      And this is still a problem in 2019! I just need to debug scrolling behavior on an iPad but Apple is doing EVERYTHING to prevent me from completing this freaking simple task.

      Reply
  7. Manish Modi says

    February 12, 2018 at 11:26 PM

    I am trying to see Web Inspector on my Mac but it shows my iPhone for a fraction of sec and iPhone is disappeared immediately, what can be the cause of it. Please can guide me.

    Reply
    • SK says

      February 13, 2018 at 1:06 PM

      Hi Manish,

      It sounds like you aren’t running the same version of Safari on your Mac and iPhone–this often happens when a device only briefly shows up in Safari’s Develop Menu or flickers on/off. First update your iOS and your macOS (if applicable.)

      If you’re running any betas, you probably need both your Mac and your device to run the Safari betas as well.

      SK

      Reply
  8. Sori says

    December 14, 2017 at 2:28 AM

    Good web site, helped me with my Safari issue on my iPhone 6S. Thx.

    Reply
  9. Denee says

    December 7, 2017 at 2:52 PM

    Mobile inspector did the trick to get Safari back in business on my iPad! Thx

    Reply
  10. liSir says

    November 23, 2016 at 12:57 AM

    The safari in the iphone occure the problem that reload the webpage,when I try to debug the safari using mac.

    Reply
  11. Jonathan says

    June 8, 2016 at 1:46 AM

    Ralph says things he doesn’t quite know anything about.

    Reply
  12. Carrie Pacheco says

    June 24, 2015 at 6:05 PM

    I WILL NOT DOWNLOAD SAFARI BEOWSER TO MY LAPTOP!!!!!!!!!!!!!!!!!! It’s being
    red lined” by the Kasperasky Internet Security I have installed, and I feel confident that program knows what it’s talking about!!!!!!!!!!!!!!!!

    Reply
    • ralph says

      December 8, 2015 at 6:26 AM

      Kasperasky is the most shittiest internet security you can have!

      Reply
  13. na says

    June 19, 2015 at 7:20 AM

    Safari 8 on ios8.3 … this does not work. In safari when i select develop > ipad … all i see is “use for development”

    Useless!

    Reply
  14. Thomas Trace says

    May 9, 2015 at 8:15 PM

    Hi I was wondering since in the advance settings it says, “Web Inspector” I was curious if it can track other iOS device website data. If that iOS device allows you to. Thanks!
    -Tom

    Reply
  15. Elena says

    October 6, 2014 at 10:38 AM

    What if I still see “No Inspectable Applications” message?
    – Cache is cleared
    – Private browsing is off
    – Web Inspector enabled in Settings>Safari>Advanced

    Reply

Primary Sidebar

Popular Posts

  • How To Calibrate Your Apple Watch
  • Notes app on iPhone How to Retrieve Deleted Notes on Your iPhone or iPad
  • Can’t watch YouTube in 4K on macOS Big Sur? How-to Fix
  • HomePod Mini Review
  • How To Use Apple’s Breathe App For Meditation

Connect with us

Recent Comments

  • Gretchen on How do you cancel Disney+ on Roku, Apple TV, and Android? It’s easy!: “Wow Liz Jones, thank you, I’ve been trying for months to get rid of that $6.99 dink. I think I’ve…”
  • Dianne on How to Chat Directly with Apple Support: “Have an old iPad – 2014, want contents transferred to my deceased husbands 2017 iPad. I have a password but…”
  • cica on Can’t Unlock Apps on Mac With Your Apple Watch? How-To Fix: “unpair and pair again. worked for me.”
  • Adam David on Can’t Enter Your Password in macOS Big Sur? Here’s How to Fix It: “Danke, es hat funktioniert.”

Footer

ABOUT

  • About Us
  • Contact us
  • Advertise
  • Privacy
  • Terms of Use

DEVICES

  • iPhone
  • Mac & MacBook
  • Apple Watch
  • iPad
  • AirPods
  • Apple TV
  • iPod Touch

GUIDES

  • iOS 13 & iPadOS
  • Apple ID
  • iCloud
  • App Store
  • iTunes
  • FaceTime
  • iMessage
  • Siri
  • Books and iBooks
  • Game Center
  • AirPlay

CONNECT

  • Facebook
  • Twitter
  • FeedBurner
  • YouTube

© Copyright 2010-2021 AppleToolBox · All Rights Reserved

This site and its content are in no way affiliated or endorsed by Apple, Inc. · Reproduction without explicit permission is prohibited