How to inspect element on iPhone

Inspecting elements on an iPhone lets web developers and testers directly view and modify a webpage’s code. It helps identify problems like non-functioning buttons, incorrect styling, overlapping text, and other HTML-related issues. You can also use it to see how your site looks on different screen sizes and devices, and spot layout problems.

This guide will give you four different ways to inspect elements on iPhone devices and test your website on real devices.

Different Ways to Inspect Element on iPhone Devices

Listed below are the different ways to inspect elements on any iPhone devices

Method 1: Using Safari developer tools to inspect elements on an actual device

Apple provides a simple way for developers to debug and inspect web elements on iPhones and iPads using Safari’s Web Inspector. Here’s how:

Step 1: Enable Web Inspector on Your iPhone

Go to Settings > Safari > Advanced on your iPhone and turn on the Web Inspector.

Step 2: Open the Safari browser, go to Safari > Preferences > Advanced, and check the box for Show Develop menu in the menu bar.

Step 3: Connect and Inspect

Connect your iPhone to your Mac. Open Safari’s Develop menu, select the connected iPhone and the active web page you want to inspect. This will open the Web Inspector for that page.

Real-Time Interaction: Inspecting an element in the Web Inspector highlights the corresponding element on the connected iPhone in real-time, offering developers an interactive and accurate debugging experience.

How to Inspect Element on iPhone Without a Computer Using JavaScript Bookmarklets?

You can inspect elements on your iPhone without a computer using JavaScript bookmarklets. JavaScript bookmarklets are small JavaScript snippets saved as browser bookmarks that help you view page source or inspect content.

Here are the steps:

Step 1: Enable Safari Bookmarks

Ensure Safari is enabled for bookmarks in iCloud settings.

Step 2: Create a New Bookmark

1. Open Safari on your iPhone.
2. Visit any webpage (e.g., google.com).
3. Tap the Share icon (square with arrow).
4. Tap Add Bookmark.
5. Save it with a name. For example: Inspect This Page
6. Tap Save.

Step 3: Edit the Bookmark to Add JavaScript

1. Tap the Bookmarks icon (open book symbol).

2. Find the bookmark you just saved.

3. Tap Edit.

4. Replace the URL field with the following JavaScript:

javascript:(function() {

  var source = document.documentElement.outerHTML;

  var win = window.open();

  win.document.open();

  win.document.write('<pre style="white-space: pre-wrap; word-wrap: break-word;">' + source.replace(/</g, '&lt;') + '</pre>');

  win.document.close();

})();

5. Tap ‘Done’ and save changes

Step 4: Use the Bookmarklet to Inspect Elements

• Visit any webpage preferred for inspecting.
• Tap the Bookmarks icon.
• Tap your Inspect This Page bookmark.
• A new tab will open showing the HTML source of the page.

How to Inspect Element in Google Chrome iPhone

Google Chrome on iOS does not natively support developer tools or inspection features because iOS forces all browsers (including Chrome) to use WebKit, the same engine as Safari. That means Chrome on iPhone is just Safari underneath, and it doesn’t have developer tools like the desktop version.

However, you can use JavaScript Bookmarklet, online “View Source” Tools or a developer app to inspect elements on iPhone Google Chrome.

You can open the online ‘view source’ tool in Chrome, paste the link you want to inspect and submit to view the full HTML structure.

As for developer apps, you can simply download them and leverage them easily as their working is similar to that of Chrome DevTools.

Now, you can learn how to use JavaScript Bookmarklet to inspect elements in Chrome on Iphone. Here are the steps:

• Open Chrome on your iPhone.
• Visit any page and bookmark it.
• Go to Bookmarks > Edit your new bookmark.
• Replace the URL with this JavaScript code:

javascript:(function() {

  var source = document.documentElement.outerHTML;

  var win = window.open();

  win.document.open();

  win.document.write('<pre style="white-space:pre-wrap;word-wrap:break-word;">' + source.replace(/</g,'&lt;') + '</pre>');

  win.document.close();

})();

• Save it.
• Visit any page, open your bookmarks, and tap the bookmarklet to view the source.

Best Practices for Using Inspect Element on iPhone

Here are the best practices to follow inspecting element on iPhone:

• Use DevTools Apps: Apps like Inspect Browser provide a desktop-like inspection experience, letting you view the DOM, CSS, and console directly on your iPhone.
• Create Bookmarklets: Bookmarklets are small JavaScript tools saved as bookmarks. You can use them to view HTML source or image links with a single tap.
• Use “Request Desktop Site”: Switching to the desktop version of a site helps you inspect responsive layouts more accurately, especially when combined with other tools.
• Avoid Sensitive Pages: Don’t use inspect tools on login or banking pages, as they may block scripts or pose security risks.
• Use Real Devices: Testing directly on real iPhones via a real-device cloud can give the most accurate results for layout, performance, and behavior, far more reliable than emulators or simulators.

Talk to an Expert