How to Inspect Element on iPhone or iPad

This guide shows you how to view and edit the HTML, CSS, and JavaScript of any webpage directly on your iPhone or iPad. You don’t need a computer or a special app — Safari’s built-in developer tools, combined with a few clever workarounds, let you inspect elements, test changes, and debug issues right on your device. Before you start, make sure your device is running iOS 16 or later for the best experience, and that you have a webpage you want to inspect open in Safari.

What You’ll Need

• An iPhone or iPad with Safari installed (iOS 16 or later recommended)
• A stable internet connection
• The URL of the webpage you want to inspect

Step-by-Step

1. Open Safari and navigate to the webpage you want to inspect. Make sure the page has fully loaded before proceeding.
2. Tap the URL bar at the top of the screen. This brings up the address field and the keyboard.
3. Type view-source: directly before the URL (without any spaces). For example, if the page is example.com, type view-source:example.com. Then tap Go on the keyboard.
4. Safari will display the raw HTML source code of the page in a new tab. This is the quickest way to see the underlying markup. You can scroll through it, but it’s not interactive — you can’t tap an element to see its styles.
5. For a full interactive inspector, open the page in a desktop browser emulator. Tap the aA icon in the address bar (on the left side).
6. Select “Request Desktop Website” from the menu that appears. Safari will reload the page as if you were viewing it on a Mac.
7. Now, tap the aA icon again and this time choose “Developer” from the menu. If you don’t see this option, you may need to enable it first (see Troubleshooting below).
8. Tap “Show Web Inspector” from the Developer submenu. A panel will slide up from the bottom of the screen.
9. The Web Inspector opens with the Elements tab active. This shows the live DOM (Document Object Model) of the page. Tap any element in the tree to select it.
10. To inspect a specific element visually, tap the crosshair icon (the “Select Element” button) in the top-left of the inspector panel. Then tap the element on the webpage itself — the inspector will automatically highlight and expand it in the DOM tree.
11. View and edit CSS in the right-hand sidebar. When an element is selected, you’ll see its styles listed. Tap any property value to edit it live. Changes apply instantly to the page, letting you experiment without saving anything.
12. To execute JavaScript, tap the Console tab at the top of the inspector. Type a command like document.title and press Go to see the result. You can run any JavaScript you like here.
13. To inspect network requests, tap the Network tab. This shows every resource the page loads (images, scripts, stylesheets) along with load times and status codes. Reload the page to see a fresh log.
14. To close the inspector, swipe it down or tap the X button in the top-right corner of the panel. The page returns to normal browsing.

Common Mistakes

• Forgetting the view-source: prefix — typing it after the URL won’t work; it must be at the very beginning.
• Using a third-party browser like Chrome or Firefox — these don’t have a built-in inspector on iOS. Safari is the only browser that exposes developer tools natively.
• Expecting the source view to be interactive — view-source: only shows static HTML; it won’t let you click elements or see computed styles.
• Not switching to Desktop Website first — the Developer menu option only appears after you’ve requested the desktop version of the page.
• Editing CSS and expecting it to persist — all changes made in the Web Inspector are temporary and reset when you reload the page.

Tips

• Pinch to zoom in the inspector to make the DOM tree easier to read on smaller screens.
• Use the search field in the inspector (the magnifying glass icon) to find specific elements by tag, class, or ID.
• Long-press on a style property to see a color picker or unit converter, depending on the property type.
• Combine the Inspector with the Console — select an element, then type $0 in the Console to reference it directly in JavaScript.
• If you need to inspect a page that blocks desktop view, try opening it in a new tab and pasting the URL with view-source: instead — it works even on mobile-only sites.

Troubleshooting

• “Developer” option missing from the aA menu: Go to Settings → Safari → Advanced and toggle on “Web Inspector”. If it’s already on, turn it off and on again, then restart Safari.
• Web Inspector shows a blank page: This usually means the page hasn’t fully loaded. Tap the reload button in the inspector or wait a few seconds and try again.
• Can’t tap elements with the crosshair tool: Some pages use overlays or iframes that block selection. Tap the element in the DOM tree instead, or scroll the page first to ensure the element is visible.
• Changes don’t appear on the page: Make sure you’re editing the correct element — check the highlighted outline on the page. Also, some CSS properties (like animations) may override your edits temporarily.
• The inspector is too small to use: Rotate your device to landscape orientation, or use the split view (if you have an iPad) to give the inspector more screen space.
• Console commands return errors: Ensure you’re typing valid JavaScript. Check for typos and remember that some pages have strict security policies that block certain commands.

Frequently Asked Questions

Can I inspect elements in Chrome on iPhone?
No. Chrome for iOS doesn’t include developer tools. You must use Safari’s Web Inspector or a third-party app like Inspect Browser, but Safari’s built-in tools are the most reliable and free.

Will my edits to the page affect the actual website?
No. All changes you make in the Web Inspector are local to your device and session. They disappear when you reload the page or close the tab. The website itself is never modified.

How do I copy the HTML of an element?
In the Elements tab, long-press on an element and select “Copy” from the context menu. You can also tap the element to select it, then tap the “Copy” button in the inspector toolbar.

Why does the page look different in Desktop mode?
Some sites serve different CSS to mobile and desktop user agents. Requesting the desktop version changes the layout and may load different assets, which is why the inspector shows different styles than the mobile view.

Can I inspect elements in an app, not a browser?
No, not directly. The Web Inspector only works on web content in Safari. For native apps, you’d need a Mac with Xcode and the device connected via cable, which is a much more complex process.

Is there a way to save my CSS experiments?
Not directly in Safari. You’ll need to copy the edited CSS properties manually and paste them into your own stylesheet or a tool like CodePen to save them.

Related

• How to Tell If an Integrated Software Package Works Together
• How to Use Widgets on iPad: Full Guide
• Two WhatsApp on One Phone: Full Setup Guide