Back to Blog
By Soraia· Jun 9, 2026· 6 min readWeb Development

How to Inspect Element on iPhone (2026 Guide)

How to inspect element on iPhone the honest way: connect to a Mac and use Safari Web Inspector, plus no-computer workarounds and how to view page source.

You found a layout, a button, or an animation on your iPhone and you want to see how it's built. So you long-press, you dig through the share sheet, you check Settings, and there's nothing. No inspect element, no view source, no developer tools you can open on the phone.

That's not your iPhone being broken. Safari on iOS genuinely has no built-in inspector you can open on the device itself. The good news is there's a real, supported way to inspect an iPhone's pages, plus a couple of honest workarounds when you don't have the hardware for it.

Key takeaways:
  • iOS Safari has no on-device inspect element. You cannot open developer tools on the phone alone.
  • The real method needs a Mac. Enable Web Inspector on the iPhone, connect by USB, and inspect the page from Safari's Develop menu on the Mac.
  • No Mac? Third-party inspector apps and bookmarklets like Eruda approximate it. They are workarounds, not the genuine Web Inspector.
  • Viewing source on iOS is possible with a small bookmarklet, which is lighter than full inspection.
  • Copying the code cleanly is the real bottleneck. Spotting an element is easy. Reusing its HTML and CSS is the hard part.

Why there's no inspect element on the iPhone itself

On a desktop you right-click and choose Inspect, and developer tools open in the same window. iOS doesn't work that way. Safari for iPhone ships without any visible developer tools, and there's no setting that adds an in-page inspector.

Apple's reasoning is that the inspector is heavy and built for a keyboard-and-mouse workflow. So instead of running on the phone, the tooling runs on a Mac and reaches across a cable into the iPhone's live Safari session. The phone renders the page. The Mac does the inspecting.

That means the honest answer to "how to inspect element on iPhone" is: you inspect it from a computer, not on the phone. Here's exactly how.

The real method: inspect an iPhone page from a Mac

This is the supported, accurate path, and it gives you the genuine Safari Web Inspector with the live DOM, real styles, the console, and the network panel.

  1. On the iPhone, turn on Web Inspector. Open Settings, go to Apps, then Safari, then Advanced, and switch Web Inspector on. (On older iOS versions the path is Settings, Safari, Advanced.)
  2. Connect the iPhone to the Mac with a USB cable. A wireless connection is possible later, but a cable is the reliable way to start. Tap Trust if the iPhone asks.
  3. On the Mac, enable Safari's Develop menu. Open Safari, go to Settings, then the Advanced tab, and tick Show features for web developers (older versions call it "Show Develop menu in menu bar").
  4. Open the page on the iPhone. Browse to the site you want to inspect in Safari on the phone and leave that tab open.
  5. On the Mac, open the Develop menu. Click Develop in the menu bar, find your iPhone by name in the list, and choose the open tab underneath it.
  6. Inspect. The Web Inspector opens on the Mac, showing the iPhone's live page. Hover nodes to highlight them on the phone, click an element to see its styles, and use the console exactly as you would on desktop.

This is the only way to get Safari's true inspector against a real iPhone. If you have a Mac, use it. Nothing else is as accurate.

No Mac? Honest workarounds

If you're on Windows, or you simply don't have a Mac nearby, there's no first-party route to Safari's Web Inspector. Be clear-eyed about that. What follows are approximations, useful but imperfect.

Third-party inspector browsers. Some iOS apps (search the App Store for an "Inspect Browser" type tool) bundle their own lightweight DevTools-style panel. You browse inside the app rather than Safari, and you get a basic element view and console. The catch: it's the app's engine and its own inspector, not Safari's, so results can differ from what real Safari renders.

A bookmarklet console like Eruda. Eruda is an open-source mobile debug console you load into any page by tapping a bookmark. It injects a floating panel with elements, console, and network tabs. It runs inside the page, so it can't see everything a native inspector can, but for quick checks on the go it's genuinely handy.

Desktop emulation as a sanity check. When you only need to understand a responsive layout, open the same URL in Chrome DevTools on a desktop and switch on device emulation. It mimics an iPhone viewport. It is not the same as a real device, but it's fast and it's free.

How to view page source on iPhone

Sometimes you don't need a full inspector. You just want the raw HTML. Safari on iOS hides the view-source: trick, but a bookmarklet brings it back:

  1. Bookmark any page in Safari.
  2. Edit that bookmark and replace its address with a small JavaScript snippet that opens the current page's source (search "view source bookmarklet" for a ready-made one).
  3. Tap the bookmark on any page to read its markup.

This is lighter than inspection and good for a quick look at meta tags or structure. For live, rendered HTML and CSS, you still want the Mac and Web Inspector route above. If you want the full picture of source-viewing across devices, see how to view and copy any website's source code.

The part everyone skips: copying the code cleanly

Here's the honest pivot. Even once you're inspecting an iPhone page from a Mac, seeing the code and reusing it are two different jobs.

Web Inspector and DevTools let you copy a single node's HTML or its computed styles. But you don't get the full cascade, the inherited rules, the hover states, or the child elements' CSS. Paste that into a fresh project and it looks broken. For one button, fine. For a whole section, you're rebuilding it by hand.

This is where the desktop side of your workflow does the heavy lifting. MiroMiro is a desktop Chrome extension, so you run it on the Mac or PC after you've spotted something on mobile. You click an element or a whole section on the live site and get its complete, clean code in one step: the HTML plus the CSS that actually applies, as Tailwind or vanilla, with the real structure intact. It's the web inspector for reuse, not just for looking.

If your goal is to take what you found on your phone and actually build with it, the desktop extraction step is what saves the afternoon. You can read more about that flow in turn any website into clean code, and this whole topic sits under our pillar guide, how to inspect element on any device.

One less monthly bill in your stack

If you build for a living you're probably already paying for Cursor, Claude, and v0, which is €75+/month before you ship anything. MiroMiro is the one tool in that workflow that doesn't have to be another recurring bill. It's free to install, and there's a €69 one-time option (125 lifetime spots) instead of €9/month:

The lifetime math

Price now€49
Next: €69

0 of 25 claimed at €49 — then it’s €69.

Your AI/design stack, monthly

  • Cursor€20/mo
  • Claude Pro€20/mo
  • v0€20/mo
  • Figma Dev Mode€15/mo
  • MiroMiro Pro (monthly)€9/mo
Per year €1008

Every year. Forever. Until you cancel.

MiroMiro lifetime — one-time

€49€149

Paid once. Used forever. No renewals.

  • Pays for itself in 6 months vs Pro monthly
  • €59 saved in year 1 alone
  • One less monthly bill in your stack, permanently
Claim your lifetime spot →

Ready to speed up your workflow?

Join 10,000+ designers and developers who save hours every week with MiroMiro.

S

Soraia · Founder of MiroMiro

Soraia builds MiroMiro, a Chrome extension used by 10,000+ designers and developers to extract clean code, design tokens, and assets from live websites. These guides come from testing the workflow daily on real sites like Stripe, Linear, and Vercel.

Follow on X
how to inspect element on iphoneinspect element iphoneinspect element safari iphoneinspect element on mobileweb inspectorview source iphonesafari web inspectormobile web debugging
Share: