How to inspect element on iPhone

A research around the smartphone market share shows that Apple iPhones still remain among the top choice of smartphones across the world. As you are developing mobile applications for the iOS ecosystem, it is essential that you test your applications before it reaches your users.

It is critical that you leverage the Inspect element tool provided by Safari browsers to help you understand why things appear or behave a certain way on a webpage, troubleshoot issues, and even make temporary fixes on your iPhone.

Some of the benefits include identifying visual issues such as non-functioning buttons, styling issues such as incorrect headings or overlapping text, or other minor issues that your HTML code introduces.

Different Ways to Inspect Element on iPhone Devices

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

1. Using Safari developer tools to inspect elements on an actual device
2. Using iPhone Devices on BrowserStack
3. Debug using the Web Inspector feature
4. Adobe Edge Inspect

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.

Method 2: Using iPhone Devices on BrowserStack

BrowserStack is a cloud-based platform that enables web developers and QA teams to test web apps for cross-browser compatibility on a wide range of devices. It offers manual testing on real mobile and desktop devices through its real device cloud and automated testing via the Cloud Selenium Grid.

Additionally, developers can access developer tools for Android and iOS during live testing, making it easy to debug and test websites on various iOS devices like iPhone 15, 14, and 13 across preferred browsers.

Steps to Inspect Elements on iPhone 15 Using BrowserStack:

1. Sign up for free on BrowserStack Live.
2. Select iOS > iPhone 15 with Safari browser and wait for the device to boot.
3. Navigate to www.browserstack.com in the Safari browser.
4. Right-click on the desired element (e.g., a button) and select Safari Web Inspector.
5. Use the Elements tab to edit the text, such as changing “App & Browser Testing Made Easy” to “Let’s Start Testing.”

Method 3: Debug using the Web Inspector feature on iPhones or iPads

Apple has a web inspector feature that allows developers and testers to debug their web pages from their mobile phones. Before, we see how to inspect elements on iPhone using this option, let us take a look at the requirements. To perform this,you will need two things.

1. Your deployment machine
2. The device on which you want to test the webpage or app.

Getting all the devices on which you want to inspect and test is quite a difficult task. This is as good as maintaining an in house device library. But, the problem with maintaining one is the high setup and maintenance cost that it comes with. You will have to ensure that the devices are updated, and well maintained. And, even if you were to do that, you will be able to test one version of the browser. What would you do if you want to test an older version?

These are a few fallbacks with this method. However, BrowserStack overcomes all these issues by providing you with a real device cloud, that allows you to access any device and version that you want.

That said, we have listed the detailed steps to debug using the web inspector feature on iPhones or iPads in this article. Please head over to the above link to know more.

Talk to an Expert

Method 4: Inspect using Adobe Edge

Adobe Edge Inspect is one of the easy methods to inspect elements on any iPhone device. Adobe has discontinued this feature, but you can find the source for this on the internet. Therefore using this poses a security threat and should be used with discretion. The user using this would be liable for any data leak or security concerns.

Adobe Edge Inspect does not require a mac operating system and can be accessed from windows as well. As it supports synchronized browsing the web page that you open will be synced with all the devices that are connected to the system.

Now let us see how to use Adobe Edge Inspect:

1. Download their software on the deployment system and ensure that all the devices that you want to test are connected to the same wifi. The sync happens by establishing the connection via wifi.
2.  Next, open the website. You will notice that the website opens up on all the devices that are connected to the deployment machine. There will be a debug sign next to the device name.
3. Select the debug sign for the device you want to inspect.
   You will now have access to the developer tools and can start inspecting.

Given all the four options and the concerns associated with it, it is best to choose BrowserStack to inspect elements on your iPhone.

Why Inspect Elements on iOS using Real Device Cloud?

All of these approaches give you the platform to check how your applications function on Safari and the experiences that your users will get. Though each uses the same Safari developer tools, the option to use a real device cloud such as BrowserStack, gives you an edge.

With BrowserStack, you can combine the inherent inspect elements feature offered by Safari with the range of Browserstack features such as, access to real devices, testing your mobile application in staging, test for media capabilities, scenarios related to sim cards, location tests, accessibility testing, and much more.

Conclusion

It’s very important for web developers and QAs to be aware of techniques that can help them resolve critical UI bugs occurring on specific devices. The methods explained above will help them trace bugs quickly and ensure the faster release of optimized websites.

BrowserStack provides access to more than 3500+ browser combinations, a real device cloud that can empower your developers to test your applications expansively. You can see how your applications perform on popular devices and browser combinations.