4 Easy Ways to Inspect Element on an iPhone

PDF download Download Article
A simple guide to inspecting web elements on iOS
PDF download Download Article

Need to debug a website on your iPhone but can't find "Inspect Element?" While this common browser feature isn't built into Safari on your iPhone, there are still ways you can inspect website elements without paying for an app. The official way is to use Safari Developer Tools, which requires you to connect your iPhone to a Mac. If you're not near a computer, you can install a free app called Web Inspector, or create a JavaScript bookmark (which also works on Chrome). Or, if you're not debugging a web app and just want to change the way a website looks, you can use an iPhone shortcut called Edit Webpage.

Things You Should Know

  • Use Safari Developer Tools to inspect elements by connecting your iPhone to your Mac.
  • To inspect an element without a computer, install the Web Inspector app, or use a JavaScript bookmark.
  • To edit text or remove images from a website, try the Edit Webpage shortcut in the Shortcuts app.
Method 1
Method 1 of 4:

Using Safari Developer Tools

PDF download Download Article
  1. If you want to use Inspect Element in Safari on your iPhone without a third-party tool, you can do so using Safari Developer Tools. The only catch is that Developer Tools is only available on macOS, so you'll have to be near your computer to use this method.
  2. Here's how:
    • Open your iPhone's Settings .
    • Scroll down and tap Safari .
    • Scroll down and tap Advanced .
    • Tap the "Web Inspector" switch to turn it on (green).
    Advertisement
  3. If you already see a menu called Develop when Safari is open on your Mac, you can skip this step. If not, here's how to enable it: [1]
    • Click the Safari menu.
    • Click Settings .
    • Click Advanced .
    • Select "Show Develop menu in menu bar." [2]
  4. Use Safari on your iPhone to navigate to the site on which you want to use Inspect Element.
  5. You will see your iPhone listed here.
  6. This opens the Inspect Element panel on your Mac for the site that's open on your iPhone.
    • As you select items in the Elements tab on your Mac, you'll see the selected element highlighted on your iPhone. [3]
    • If you want to continue using Inspect Element without leaving your iPhone plugged in to your Mac, click the Develop menu again and select Connect via Network .
    7. Advertisement
Method 2
Method 2 of 4:

Using the Web Inspector Extension

PDF download Download Article
  1. This free Safari extension for iPhone and iPad allows you to inspect elements without a computer. Search the App Store for "Web Inspector" by "And a Dinosaur," or download directly from https://apps.apple.com/us/app/web-inspector/id1584825745 .
    • Web Inspector is useful for inspecting elements in Safari as it doesn't require you to connect your iPhone to a Mac. If you want to debug in Chrome, you'll need to use a JavaScript bookmark instead.
    • While this extension does have the same name as Safari's "Web Inspector," it's not an official Apple tool.
  2. Here's how:
    • Open Safari and go to any website.
    • Tap Aa in the address bar.
    • Tap Manage Extensions . [4]
    • Tap the switch next to "Web Inspector" to enable it.
    • Tap Done .
  3. Now that you've enabled Web Inspector, you'll be able to inspect an element directly from Safari.
  4. To do so, tap Aa again and select Web Inspector .
    • To allow Web Inspector to inspect elements on this website for one day only, select Allow for One Day .
    • If you want to use Web Inspector for longer than just a day, or for multiple websites, select Always Allow instead. Then, you can choose Always Allow on This Website or Always Allow on Every Website .
      • If you choose the latter option, you won't have to give Web Inspector permission to access websites again in the future.
  5. This expands the familiar Inspect Element tool at the bottom of Safari.
    • When you're finished, double-tap Aa to close Web Inspector.
    6. Advertisement
Method 3
Method 3 of 4:

Using a JavaScript Bookmark

PDF download Download Article
  1. 1
    Go to the website you want to inspect. This trick involves creating a bookmark that contains a string of JavaScript code to bring Inspect Element to any iPhone web browser. This trick will work in both Safari and Chrome, though the process of creating the bookmark will be a little different.
  2. Create a bookmark or favorite . [5]
    • Chrome: Tap the three-dot menu and select Add to Bookmarks .
    • Safari: Tap the Sharing icon at the bottom, then tap Add to Favorites .
  3. Now that you have a bookmark, you'll need to edit it.
    • Chrome: Tap the three-dot menu and select Bookmarks at the top. Tap and hold the new bookmark, then tap Edit Bookmark. [6]
    • Safari: Tap the open book icon at the bottom, then tap Favorites . Tap and hold the bookmark you just created, then tap Edit . [7]
  5. Rename the bookmark "Inspect," paste the following code into the URL or Link field exactly as it is, then save the bookmark. 
     javascript 
 : 
 ( 
 function 
 () 
 { 
 var 
 script 
 = 
 document 
 . 
 createElement 
 ( 
 'script' 
 ); 
 script 
 . 
 src 
 = 
 "//cdn.jsdelivr.net/npm/eruda" 
 ; 
 document 
 . 
 body 
 . 
 appendChild 
 ( 
 script 
 ); 
 script 
 . 
 onload 
 = 
 function 
 () 
 { 
 eruda 
 . 
 init 
 () 
 } 
 })();
  6. To open the bookmark in Chrome, just tap the three dots, select Bookmarks , and tap Inspect . In Safari, you'll find the Inspect bookmark in your favorites. In a few moments, you'll see a gear icon appear on the page you want to inspect.
  7. You can now use the Elements tab at the top of the panel to inspect elements on the current page.
    8. Advertisement
Method 4
Method 4 of 4:

Using the Edit Webpage Shortcut

PDF download Download Article
  1. If your goal is to edit the look of a website using Inspect Element, you can get the same effect using the iPhone shortcut called Edit Webpage. While this Shortcut won't bring up the traditional Inspect Element screen, you'll be able to make live changes to any website to see how they look.
    • You'll find the Shortcuts app in your App Library. [8]
    • This is helpful if you want to edit text or remove images and other objects from a website you're viewing.
  2. You'll see it at the bottom-right corner of the page.
  3. Type edit webpage into the Search bar, then tap Edit webpage at the top of the search results.
  4. It's the blue button at the bottom of the page.
  5. You'll need to make a quick change in your Shortcuts settings to allow Edit Webpage to work: [9]
    • Open your iPhone's Settings .
    • Scroll down and tap Shortcuts .
    • Tap Advanced .
    • Toggle on "Allow Running Scripts."
  6. This can be any website you want to modify.
  7. The Sharing icon is the blue square with an up-arrow at the bottom of the screen.
  8. This gives the shortcut permission to "edit" the site in your browser window.
  9. You'll return to the website, which you can now edit visually.
    • Tap any element to edit it. Now you can edit text and images on the website without having an official Inspect Element feature built into Safari.
    10. Advertisement

Expert Q&A

Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Video

      Tips

      • There are also several paid apps that will allow you to inspect web elements on your iPhone, including Achoo HTML Viewer & Inspector and Inspect Browser.
        Thanks
        Helpful 0 Not Helpful 0
      • Adobe Edge Inspect was a popular tool for inspecting elements on websites, but the tool is no longer in development or receiving updates.
        Thanks
        Helpful 0 Not Helpful 0
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      You Might Also Like

      How to
      Open BIN Files
      How to
      Install APK Files on Android
      How to
      Extract a GZ File on Windows, Linux, Mac, & Mobile
      How to
      Open DLL Files
      How to
      Open a DAT File
      How to
      Remove Unneeded & Unused Files in Windows 10 & 11
      3 Easy Ways to Protect a Folder With a Password
      4 Simple Ways to Scan and Save Documents
      How to
      Compress Large Files
      Quick Ways to Open JPEG Images on Windows, Mac, and Mobile
      6 Simple Ways to Play SWF Files Without Adobe Flash Player
      How to
      Use 7-Zip to Compress Files to the Smallest Size
      How to
      Open TMP Files
      How to
      Create a TXT File on Mac
      Advertisement

      References

      1. ↑ https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac
      2. ↑ https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac
      3. ↑ https://support.apple.com/guide/safari-developer/inspecting-overview-dev1a8227029/mac
      4. ↑ https://support.apple.com/guide/iphone/get-extensions-iphab0432bf6/ios
      5. ↑ https://support.apple.com/guide/iphone/bookmark-favorite-webpages-iph42ab2f3a7/ios
      6. ↑ https://support.google.com/chrome/answer/188842?hl=en&co=GENIE.Platform%3DiOS&oco=0#zippy=%2Cedit-a-bookmark
      7. ↑ https://support.apple.com/guide/iphone/bookmark-favorite-webpages-iph42ab2f3a7/ios
      8. ↑ https://support.apple.com/guide/shortcuts/welcome/ios
      9. ↑ https://support.apple.com/en-us/guide/shortcuts/apdfeb05586f/ios

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 63,620 times.

      Is this article up to date?

      Advertisement