App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Home Guide How to inspect element on iPhone

How to inspect element on iPhone

By Jash Unadkat, Technical Content Writer at BrowserStack -

Table of Contents

In a constant endeavor to provide optimized performance across mobile devices, developers strive to build responsive websites. However, while doing so, developers might face multiple challenges.

For example, a developer might encounter a specific rendering issue that seems to occur on a specific iPhone while creating a responsive design for a website. In such cases, they need to inspect specific web elements on real devices to figure out the exact solution. Here’s where QAs and developers need to be aware of handy solutions that can help save time spent on troubleshooting.

This article aims to explain two easy methods for inspecting elements on an iPhone.

Different Ways to Inspect Element on iPhone Devices

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

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

Using iPhone Devices on BrowserStack

BrowserStack is a cloud-based platform that allows web-developers to test their web apps instantly for cross browser compatibility across a range of devices. Its real device cloud enables developers or QAs to instantly run manual tests on real mobile and desktop devices. For extensive testing, QAs can also use its Cloud Selenium Grid for automated cross browser testing on multiple real devices.

Developers also get instant access to Dev tools on both platforms (Android and iOS) during live testing. This allows developers to eliminate their testing pain points as they can instantly test websites across a variety of iOS devices like iPhone X, iPhone, iPhone 11 Pro, and many other earlier versions on desired browsers.

Try Inspect Element on Real iPhone for Free

The image below represents a sample BrowserStack Live session running on Safari – iPhone XS

How to Inspect element on iPhone

One can inspect an element on iPhone in 3 simple steps –

  1. Sign up for Free on BrowserStack Live
  2. Select the desired iPhone device to inspect on
  3. Click on Dev Tools to start inspecting.

As web developers get upfront access to the DevTools in the dashboard, inspecting specific elements on any iPhone becomes much easier for them. Developers have multiple real mobile devices to choose from and can switch between device-browser-OS combinations at any point. This ensures web-developers or QAs can quickly troubleshoot any rendering issues and fix them with minimal time and effort.

Using Safari developer tools to inspect elements on an actual device

Apple provides a very intuitive feature that enables web developers to debug and inspect web elements on actual iPads and iPhones. One just needs to connect their iPhone and enable the Web Inspector to get started.

Enable the Web Inspector on your iOS mobile device by:

Going to Settings > Safari > Scroll down to the bottom > Open Advanced Menu> Turn on the Web Inspector

Note: This feature only works on the actual Apple Mac and not on Safari running on Windows.

One just needs to enable the “Show Develop menu in the menu bar”. The steps to do so are as follows:

  1. Open Safari browser
  2. Click on Safari > Preferences > Advanced
  3. Tick the checkbox Show Develop menu in the menu bar

How to Inspect element on iPhone

Once done, the Develop menu will be enabled in the top-bar. Click on the Develop menu and it will show the connected iPhone in the options along with the web-page that is active on the connected device.

Click on that page and it will open the Web inspector window for the same page.

How to Inspect element on iPhone

When you interact with any element in the web inspector, it immediately highlights that particular element on the iPhone in real-time. This helps developers identify exactly what they are inspecting as they continue to interact with the elements providing an interactive test experience.

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.

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.

Adobe Edge inspect does not support local testing. Learn how to test Local Website on mobile.

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.

Sign up and start testing for free.


Also read: How to test mobile applications manually


BrowserStack also provides a Responsive checker that lets users view their websites on multiple mobile and desktop devices in order to verify the site’s responsive design.

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.

Is your Website Responsive across all devices?

Check what your customers see, with our FREE Responsive Checker Tool.

Tags
Cross browser testing Emulator and Simulator Manual Testing Mobile App Testing

Featured Articles

How to run Mobile Usability Tests for the best results

How to install .ipa test file on iPhone

Curated for all your Testing Needs

Actionable Insights, Tips, & Tutorials delivered in your Inbox
By subscribing , you agree to our Privacy Policy.
thank you illustration

Thank you for Subscribing!

Expect a curated list of guides shortly.