How To Inspect Elements On iPhone?

Harish Rajora

Posted On: February 18, 2022

view count79907 Views

Read time18 Min Read

Every modern web browser contains a robust set of developer tools for testing element alignment and functionality. It is the fastest way to resolve web issues, especially with JavaScript, responsive web design, and CSS. For example, inspecting the element on a Chrome browser on large desktop screens is relatively straightforward – develop a web app, test it on a browser, check responsiveness, and other issues. But if we turn the table to a mobile device, then there is no way you can inspect the same elements. Since iOS captures 29% of the global market share, it’s crucial to know how to inspect element on iPhone.


In this post, we discuss different methods on how to inspect elements on iPhone. By the end of this post, you will not only be able to inspect elements on iPhone and iPad but will have various options to choose from as per your choice.

Let’s begin!

Different methods to inspect elements on iPhone

There are various advantages to inspecting elements. Listed below are four methods to inspect elements on iPad or iPhone.

  1. Using Responsive Testing Tools
  2. Using Safari Developer Tools
  3. Using Cross Browser Testing platforms
  4. Using Adobe Edge Inspect

Read MoreHow To Debug Websites On iPhone?

How to Inspect Element

Inspect Element is a feature in modern web browsers for examining and modifying webpage code. It’s a powerful tool for developers and designers, aiding in real-time changes and debugging.

To inspect elements on a webpage, right-click and choose ‘Inspect’ or ‘Inspect Element’ in any modern web browser. On Mac, use Command+Option+i, or on PC, press F12. This native browser tool allows you to examine HTML, CSS, and JavaScript code, making real-time modifications for testing and debugging.

How to Inspect Elements on iphone with Safari Developer Tools

The most convenient way to inspect elements on iOS devices is to utilize the inspect elements feature in the Safari browser on the desktop. As you may have predicted, Apple developed this method, and since Apple developed it for their browser, they do not provide options for using Android or any other OS.

To inspect elements using Safari developer tools, you need three things – an iPhone/iPad, a Mac, and a USB cable.

Below are the steps on how to inspect elements on iPhone using Safari Developer tools.

  1. Inspect Elements on iPhone using Safari:
    • Open Settings on your iPhone and tap Safari.
    • Settings on your iPhone

    • Scroll down and tap Advanced.
    • tap Advanced

    • Toggle on Web Inspector.
    • Toggle on Web Inspector

  2. Inspect Elements on Mac using Safari:
    • Open Safari on your Mac.
    • Click Safari in the menu bar and select Preferences.
    •  select Preferences

    • In the upper right corner, click the Advanced tab.
    • Select “Show Developer menu in menu bar” at the bottom of the screen.
    • at the bottom of the screen

  3. Connect iPhone to Mac:
    • Connect the iPhone to your Mac using a USB cable.
    • On your Mac, click Develop in the menu bar and select the connected iPhone.
  4. Maintain Connection without Cable:
    • Go to the Developer menu on your Mac and select your iPhone from the menu.
    • Choose “Connect via Network” to maintain the connection wirelessly.
  5. Start Inspecting Elements:
    • Open Safari on your iPhone and navigate to the webpage you want to inspect.
    • Ensure your iPhone is unlocked and open Safari on your Mac.
    • Go to the Develop menu on your Mac and hover over your iPhone in the menu.
    • Select the desired web page to inspect. The Web Inspector window opens, highlighting corresponding areas on the mobile website as you move your cursor.

Inspect step 3

Here you can inspect it like a browser on your system.

Notice above how I have mentioned “Mac” repeatedly instead of the generic term “system” or “PC,” etc. Because this option is only available to those who work in the Apple ecosystem, if you do not own a Mac, this option won’t work on any other OS such as Windows, even if Safari is installed on it.

This is the sole reason I believe this option is in between decent and mediocre. The following image shows the market share of macOS globally.

Now begin your app testing through iOS simulator.

As per the above data, macOS covers just 9.5% of the market. It means out of 100 people, only 9 – 10 will be able to use this option and inspect elements on iPad/iPhone. If you have all the iPhone devices you are targeting for your application and fall in the above 9.5% category; you are lucky enough. But if you are one of 90 people, we have more flexible options ahead.

Wondering how to inspect elements on iPad Safari? Try cloud-based platforms like LambdaTest and inspect elements on iPad real devices and iPad simulators. Also, you can test on Safari browsers online and check the browser compatibility of your websites and web apps on real Safari browser versions.

Now run your app testing on iPad simulator!!!

Also, ReadRemote Debugging Webpages In iOS Safari

Inspecting element with Responsive Testing tools

LambdaTest platform is a great tool to inspect elements while performing cross browser testing. However, while that can quickly establish our inspect elements task, developers still might need a little bit more to test for responsiveness and other issues specific to mobile. Hence, the LT Browser – a responsive checker tool by LambdaTest works like a charm here.

LT Browser is a mobile-specific browser developed to provide a complete mobile testing environment. With LT Browser, you can quickly inspect elements on 50+ pre-installed device viewports like mobiles, tablets, desktops, and laptops of your web app.


Here is a quick overview of LT Browser!

You can also follow the LambdaTest YouTube Channel and stay updated with the latest tutorials on Automation testing, Online Browser testing, Responsive testing, and more.

The following steps will guide you on how to inspect element on iPhone or iPad using LT Browser.

  1. Download and install LT Browser on your system.
  2. Open the browser, select the iPhone device viewport from the left device panel, and enter the website URL you want to inspect.
  3. LT Browser

  4. Press the debugger button to open the web inspector and start inspecting elements on an iPhone or an iPad.

LT Browser Step 3

You can also right-click anywhere on the screen and select “Inspect element” to open the same developer tools panel.

And to inspect elements on iPhone using Safari’s developer tools: Go to Settings > Safari > Advanced, then toggle on Web Inspector. Alternatively, right-click anywhere and choose ‘Inspect element’ for quick access to the developer tools panel.

iPhone Real D

Read Why Developers Should Use LT Browser?

You can also refer to the below tutorial on how to perform responsive testing using chrome dev tools protocol In Selenium 4.

Inspecting elements with Cross Browser Testing platforms

iPhones and iPads use different versions of the iOS operating system. Based on the frequency and availability of OS upgrades, you can find a certain level of iOS version fragmentation. Given this, a business must ensure that its apps operate correctly across different iOS versions and provide a seamless user experience. This is where cross browser testing comes into play. People generally aim for tools that could run without any in-house device installations. Using LambdaTest for inspecting elements on iPhone or iPad addresses the shortcomings of Safari Developer Tools and Adobe Edge Inspect.

LambdaTest allows you to perform live-interactive browser compatibility testing on over 3000 desktop and mobile browsers. You’ll get instant access to your preferred web browser, browser version, operating system, and screen resolution. In addition, every browser on the LambdaTest cloud includes pre-installed native developer tools to enable you effortlessly debug your websites and web apps. You can also debug elements on iPhone or iPad using LambdaTest real device cloud to test various scenarios in real-world environments and get accurate results.

Now you must have already guessed that you don’t even need a real iPhone or iPad device to inspect elements on it. This way, you don’t have to worry about buying an in-house physical device, be it iPhone or any other, and just focus on development and testing.

Read How To Test Mobile Applications Manually

Below are the steps on how to inspect elements on iPhone or iPad using LambdaTest.

  1. Make sure you have a LambdaTest account. In case you’re not registered, visit the LambdaTest registration page.
  2. Login in your LambdaTest account, and it will redirect you to the dashboard page.
  3. From the left panel, select Real Time Testing.
  4. LT Dashboard

  5. Enter test URL, select DEVICE TYPE, DEVICE, OS, and BROWSER on which you want to run the test, and click START.
  6. Testing Page

  7. The website will be launched in the selected configuration.
  8. RealDevice Testing

  9. From the left floating tool panel, choose developer options, and the developer tools will open up on the selected device.
  10. Now you can start testing on the selected configuration using our iPhone simulator for browser testing.

LambdaTest also provides a feature – Local page testing to run them locally or privately hosted projects. This feature, called local tunnel testing, creates a secure tunnel between your local server and LambdaTest’s infrastructure.

Read MoreComplete Guide to Responsive Testing Of A Locally Hosted Website

Adobe Edge Inspect

Adobe Shadow is a tool developed by Adobe in 2011 and was later renamed Adobe Edge Inspect. Adobe Edge Inspect was a part of the Adobe Edge suite with capabilities of inspecting elements on multiple devices. Adobe Edge Inspect overcomes the challenges of our previous solution as it does not require macOS running devices. In addition, it is available for both Windows and macOS.

Adobe Edge Inspect also supports synchronized browsing. You open the website on one device, and it will be synced to all the connected devices, i.e., it will open automatically on all of them. The connection between the devices is established through Wi-Fi.

Below are the methods on how to inspect elements on iPhone using Adobe Edge Inspect.

  1. To use Adobe Edge Inspect and inspect elements on iPad/iPhone, download the software on your system and connect all the devices with the same Wi-Fi connection.
  2. Once done, the list will appear on the software.

  3. When you open a website ( here), you will notice that it will open on all connected devices. These connected devices will show the debugger sign (<>) in front of them.
  4. Select the debugger sign in front of the device you would like to inspect the element on.

This will open up the developer tools, and you can inspect elements on iPhone or iPad, just like debugging a website on PC. It is an easy, quick, and very effective solution.

With that being said, it does have a lot of holes that cannot be ignored. This has been discontinued by Adobe now. Although, its executable files are available all over the internet for all the operating systems.

Secondly, Adobe Edge Inspect lacks one significant part of web app development – local web testing. Web developers spend hours inspecting elements on different devices because they don’t want their issues to reach the customer. If you incorporate a new feature on an already published website, it’s another story. But if you are developing the website for the first time, you probably have no URL to open it on the Adobe Edge Inspect and inspect an iPhone with it.

Read How To Inspect Elements On Android Devices?

In the other section of this tutorial on how to inspect elements on iPhone, the rest of the options will cover all the anomalies of our previous options.

Additional options to Explore

These methods on how to inspect elements on iPhone conclude our limited options through which we can inspect elements. This concludes with options that are practical when we have more than one iOS device (which we have almost all the time). There are also other options on how to inspect elements on iPhone in the pool!

Some methods can help you host the website through a temporary URL service and use that link to open the web application on your iPhone or iPad. This way, you cannot inspect elements directly on the iOS device but can understand the elements creating the issues. Then you can correct them on your system and repeat the process.

Chrome plugins are also available that come in varying sizes and let you see how your website will look on different devices. However, this method gives inaccurate results and is therefore not recommended. Wondering how to inspect elements on iPad Chrome? Try LambdaTest mobile device cloud testing for free and quickly inspect and test web elements across 3000+ real iOS and Android devices.

Read Best Chrome Extensions for Developers and Designers

Watch this video to learn how to emulate network conditions in Selenium WebDriver by using the ChromeDevTools Protocol.

One other option takes support from native applications. For example, iOS applications available on Apple’s App store, such as Shortcuts and VT view source. These applications require extensive hard work from the tester, though. So instead, once you open the website on the iPhone/iPad (published or through a temporary URL service), you can link it to these applications after installation. These applications then allow you to look at the source code, elements, and inspector and directly edit these elements on the mobile.

You need to perform testing, including editing and correcting the device only. You cannot use your system here unless you use an app like the MIH tool that allows remote inspection through weinre.

Wrapping Up!

In this tutorial on how to inspect elements on iPhone, we discussed different methods for inspecting elements on iPhone and iPads. If you have a method that you use and want to share with the community, we welcome your comments and will be happy to include them in this post. Also, if this is your first time or you have used one of the methods described in this post, let us know your feedback and suggestions. Start free cross testing on iOS browser simulators.

Learn how to request the Desktop Site On iPhone with this Comprehensive Guide and Examples. This guide provides detailed insights and practical examples on how to access the desktop version of a website on your iPhone.

Till then, happy testing!

Frequently Asked Questions (FAQs)

How do you inspect elements on iPhone?

To inspect elements on an iPhone, you’ll need to use Safari’s Web Inspector feature. First, enable the ‘Web Inspector’ option in your iPhone’s Safari settings under ‘Advanced’. Then, on your Mac, open Safari and go to ‘Develop’ > ‘Your iPhone’s name’ > ‘The page you want to inspect’. Now you can inspect elements just like you would on a desktop browser.

How do I inspect element in Chrome on iPhone?

Unfortunately, Chrome on iPhone doesn’t have a built-in feature to inspect elements. However, you can use remote debugging with Chrome DevTools on your computer. Connect your iPhone to your computer, open Chrome on both devices, and navigate to ‘chrome://inspect’ on your computer. Select your iPhone and the webpage you want to inspect.

Can you inspect text on iPhone?

Yes, you can inspect text on an iPhone using Safari’s Web Inspector. Enable the ‘Web Inspector’ in your iPhone’s Safari settings, then connect your iPhone to a Mac. Open Safari on your Mac, go to ‘Develop’ > ‘Your iPhone’s name’ > ‘The page you want to inspect’. Now you can hover over the text on your Mac, and it will be highlighted on your iPhone.

How do you inspect element on iPhone without a computer?

Inspecting elements directly on an iPhone without a computer is not natively supported. However, you can use JavaScript bookmarklets or third-party apps like ‘Inspect Browser’ to achieve a similar result. Please note that these methods won’t provide the same level of detail as a full-fledged inspection tool.

How do I use Web Inspector on my iPhone?

To use Web Inspector on your iPhone, you need to enable it in your iPhone’s Safari settings under ‘Advanced’. Then, connect your iPhone to a Mac, open Safari on your Mac, and navigate to ‘Develop’ > ‘Your iPhone’s name’ > ‘The page you want to inspect’. The Web Inspector window will open on your Mac, allowing you to inspect elements on your iPhone.

How do I inspect Chrome app on mobile?

To inspect the Chrome app on mobile, you can use remote debugging with Chrome DevTools on your computer. Connect your mobile device to your computer, open Chrome on both devices, and navigate to ‘chrome://inspect’ on your computer. Select your device and the webpage you want to inspect.

How do I inspect HTML in Safari?

To inspect HTML in Safari, you need to enable the ‘Show Develop menu in menu bar’ option in Safari’s ‘Preferences’ > ‘Advanced’. Then, right-click on the webpage and select ‘Inspect Element’. The Web Inspector will open, and you can inspect the HTML of the webpage.

How do I inspect my iPhone on Windows?

Inspecting an iPhone on Windows is not straightforward as Apple’s Web Inspector only works on Mac. However, you can use third-party tools like ‘RemoteDebug iOS WebKit Adapter’ or ‘BrowserStack’ to inspect your iPhone from a Windows machine. These tools allow you to debug web content on iOS devices from a Windows PC.

Author Profile Author Profile Author Profile

Author’s Profile

Harish Rajora

I am a computer science engineer. I love to keep growing as the technological world grows. I feel there is no powerful tool than a computer to change the world in any way. Apart from my field of study, I like reading books a lot and write sometimes on .

Blogs: 87


Test Your Web Or Mobile Apps On 3000+ Browsers

Signup for free