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.

Before you start: Ensure you have a USB cable to connect your iPhone to a Mac if you plan to use Safari Developer Tools.

How to inspect website elements on your iPhone

Follow these steps to debug websites on your iPhone using various methods available.

You Might Also Like
How to open Epub files on any device with software across platforms
How to open and read EPUB files on any device
Weazel Plaza GTA 5 location: Where to find it?
GTA Online: How to participate in the Weazel Plaza Shootout?
In this article, we are going to be covering how to fix iOS 16 AirPods not working, so you can continue using your headphones without any issues.
Fixed: iOS 16 AirPods not working

Using Safari Developer Tools

  • Connect your iPhone to your Mac with a USB cable. This is necessary to use Inspect Element in Safari on your iPhone.
  • Enable Web Inspector on your iPhone:
    • 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).
  • Go to the website you want to inspect on your iPhone using Safari.
  • On your Mac, click the Develop menu. You’ll see your iPhone listed here.
  • Hover your mouse over your iPhone and select the website. 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.
  • If you want to use Inspect Element without leaving your iPhone plugged in, click the Develop menu again and select Connect via Network.

Using the Web Inspector extension

  • Install Web Inspector from the App Store. Search for “Web Inspector” by “And a Dinosaur,” or download directly from this link.
  • Enable the Web Inspector extension in Safari:
    • Open Safari and go to any website.
    • Tap Aa in the address bar.
    • Tap Manage Extensions.
    • Tap the switch next to “Web Inspector” to enable it.
    • Tap Done.
  • Go to the webpage you want to inspect. You can now inspect an element directly from Safari.
  • Give Web Inspector access to the website:
    • 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, select Always Allow.
  • Tap Aa again and select Web Inspector to expand the Inspect Element tool at the bottom of Safari.
  • When you’re finished, double-tap Aa to close Web Inspector.

Using a JavaScript bookmark

  • Go to the website you want to inspect.
  • Create a bookmark or favorite:
    • Chrome: Tap the three-dot menu and select Add to Bookmarks.
    • Safari: Tap the Sharing icon at the bottom, then tap Add to Favorites.
  • Edit the bookmark to replace the URL.
  • Replace the bookmark contents with code. Rename the bookmark “Inspect,” paste the following code into the URL or Link field and save it:
    javascript:(function () {var script=document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda";document.body.appendChild(script); script.onload = function () { eruda.init() } })();
  • Refresh the website and open the bookmark. In Chrome, tap the three dots, select Bookmarks, and tap Inspect. In Safari, find the Inspect bookmark in your favorites.
  • Tap the gear to open Inspect Element. Use the Elements tab to inspect elements on the current page.

Using the Edit Webpage shortcut

  • Open the Shortcuts app on your iPhone.
  • Tap Gallery, at the bottom-right corner of the page.
  • Search for the Edit Webpage shortcut and tap it from the search results.
  • Tap Add Shortcut at the bottom of the page.
  • Allow scripts in the Shortcuts app by adjusting settings:
    • Open your iPhone’s Settings.
    • Scroll down and tap Shortcuts.
    • Tap Advanced.
    • Toggle on “Allow Running Scripts.”
  • Open the website you want to inspect in the Safari app.
  • Tap the Sharing icon and select Edit Webpage.
  • Tap Allow to give the shortcut permission to edit the site.
  • Tap the X to close the menu and return to the website, which you can now edit visually.
  • Tap any element to edit it directly.

Pro tip: Consider using dedicated apps for more advanced debugging and inspection features on your iPhone for more convenience and additional functionality.

You can confidently debug websites on your iPhone by exploring these methods. Each offers a unique way to access the Inspect Element feature without the need for complex setups or expensive applications. Understanding the different options allows you to choose the one that best fits your needs and available resources, whether you are at home with a Mac or on the go. Embracing these tools will empower you to get the most out of your web browsing experience.