How to Inspect Element on Your iPhone?

Inspecting elements on an iPhone may seem tricky since mobile browsers do not have built-in developer tools like desktop versions. However, there are methods you can use to analyze web page elements on an iPhone. Whether you are a developer troubleshooting a website or just curious about how a webpage is structured, various options allow you to inspect elements. Below is a detailed manual explaining different techniques to achieve this.

Using Safari Developer Tools on macOS

If you own a Mac, Apple provides a built-in tool to inspect webpage elements on an iPhone. You can utilize the Safari Developer Tools for this process.

Steps to Enable Web Inspector on iPhone

1. Activate Developer Mode on Mac:
   • Open Safari on your Mac.
   • Go to “Preferences” and select the “Advanced” tab.
   • Check the box labeled “Show Develop menu in the menu bar.”
2. Enable Web Inspector on iPhone:
   • Launch “Settings” on your iPhone.
   • Scroll to “Safari” and select it.
   • Tap “Advanced.”
   • Toggle on “Web Inspector.”
3. Connect iPhone to Mac:
   • Use a USB cable to link your iPhone to the Mac.
   • Open Safari on your Mac and visit the website you want to inspect on your iPhone.
4. Inspect the Elements:
   • Click “Develop” in Safari’s menu bar.
   • Select your connected iPhone from the dropdown list.
   • The website displayed on your iPhone will now be accessible through Safari’s Developer Tools on your Mac.
   • You can inspect elements, check styles, and debug scripts.

Using Third-Party Apps

For those without access to a Mac, third-party applications provide an alternative way to inspect elements on an iPhone.

1. Using Inspect Browser

The Inspect Browser app allows users to view and modify a webpage’s elements on an iPhone.

• Download and install Inspect Browser from the App Store.
• Open the app and enter the URL of the webpage.
• Tap and hold any section of the page to inspect the underlying elements.
• Modify HTML or CSS in real time to preview changes.

2. Using DevTools App

Another reliable option is DevTools – Inspect Elements, which offers features similar to browser developer tools on a desktop.

• Install DevTools from the App Store.
• Launch the app and go to the desired webpage.
• Use the built-in inspector to examine page elements and test different modifications.

Using Remote Debugging in Google Chrome

For those who prefer Chrome, remote debugging can be performed using a desktop.

Steps to Enable Remote Debugging

1. Install Chrome on Both Devices
   • Ensure you have Google Chrome on your iPhone and desktop (Mac or Windows).
2. Enable Web Inspector on iPhone
   • Open Safari settings on your iPhone.
   • Enable Web Inspector under the Advanced section.
3. Connect iPhone to Computer
   • Use a USB cable to link your iPhone to the computer.
   • Open Chrome on the computer.
   • Type chrome://inspect into the Chrome address bar and hit Enter.
4. Start Debugging
   • Locate your iPhone under “Devices.”
   • Click “Inspect” next to the webpage open on your iPhone.
   • Chrome’s Developer Tools will now show the web elements.

Bookmarklets for Inspecting Elements

Another simple way to inspect elements on an iPhone is by using bookmarklets. These are small JavaScript snippets saved as browser bookmarks.

Steps to Use Bookmarklets

1. Open Safari on your iPhone and bookmark any page.
2. Tap the “Edit” option for the bookmark.
3. Replace the URL with this JavaScript snippet:
   javascript:(function() { var script = document.createElement(‘script’); script.src = ‘https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js’; document.body.appendChild(script); })();
4. Save the bookmark and open any webpage.
5. Tap on the bookmarklet, and it will inject JavaScript to allow inspection.

Using Online Tools for Inspection

If installing an app is not an option, online tools can be used to inspect web pages.

1. DebugBear

• Open Safari or Chrome on your iPhone.
• Visit debugbear.com/labs.
• Enter the webpage URL and analyze the elements.

2. BrowserStack Live

• Sign up for BrowserStack Live.
• Launch a remote browser session.
• Access and inspect webpages on an iPhone simulation.

Editing Webpage Elements Using Safari’s Reader Mode

While Safari’s built-in tools are limited, Reader Mode allows users to modify temporarily.

• Open Safari and visit a webpage.
• Tap the “aA” icon in the address bar.
• Select “Show Reader View” to see a simplified page version.
• Modify text or styles using accessibility settings.

Conclusion

Although iPhones do not have built-in element inspection tools like desktop browsers, several alternative methods can help achieve the same result. Users can efficiently analyze and modify webpage elements using Safari’s Developer Tools, third-party applications, remote debugging, bookmarklets, or online tools. Whether you are a developer debugging a site or simply exploring web structures, these approaches offer practical solutions to inspect elements directly from an iPhone.