Inspect elements instantly on real iPhones

Test your apps & websites on real iPhones. No emulators or simulators

Sign up and start debugging for FREE

How to inspect an element on iPhone

Method 1: Using Web Inspector
  • Plug in physical device
  • Enable the Show Develop menu
  • Enable web inspector
  • Enable develop menu to replicate and debug issues on current device
Only works on in-hand physical devices
Best Practice
Method 2: Using Real Device Cloud
  • Login to BrowserStack
  • Access 1000s of real browsers/devices on the cloud
  • Navigate to a website on real iPhone-Safari combination
  • Use in-built devtools to inspect elements
  • Test on multiple real iPhones/Safari versions. No physical devices needed

This method only allows you to inspect elements when you actually have physical access to the iPhone in question i.e., to inspect elements on an iPhone 13, you’ll need an iPhone 13 in your hands. Without an in-house device lab with 1000s of latest & older devices installed with real iOS versions, this method is ineffective for debugging. For comprehensive device coverage, the second method is recommended.

With iOS holding 26.47% of the global mobile OS market share, its popularity speaks for itself. Safari holds 18.43% of the global browser market share. Therefore, it is safe to assume that millions of users across the world expect to access websites and web apps via the Safari browsers on their iOS devices, most commonly iPhones.

Consequently, testers will have to test websites on iPhone-Safari combinations to ensure flawless functionality. This forms a crucial part of a project’s cross browser testing mandate.

This article will highlight two methods by which developers or QAs can debug websites and web apps on iPhone via the Safari browser.

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

Debugging issues for mobile web pages can be difficult at times. However, starting from iOS 6, Apple provides a web-inspector which makes debugging web pages much easier on iPhones or iPads. Follow the steps below to use it:

  • Connect the iOS device to the machine.
  • Enable the Web-Inspector option. To do so:
    Go to Settings > Safari > Scroll down to the bottom > Open Advanced Menu>
    Turn on Web InspectorHow to Debug iPhone
  • Open the desired web page to debug or preview on your mobile Safari browser. Once done, enable the Develop menu on the Mac device.

To enable the Develop menu, follow the steps below:

  1. Launch Safari browser
  2. Click on Safari at the top > Open Preferences > Advanced
  3. Mark the checkbox – Show Develop menu in the menu bar to enable itHow to debug on iphone using safari
  4. Now, you’ll be able to view the Develop menu in the top bar. Click on it and it will show the connected iPhone or iPad along with the URL that is active on Safari. Get started freeHow to Debug on iOS devices
  5. By Clicking on that URL, a new inspector window will open that allows the developer to inspect, preview, or debug the page on a mobile browser from their Mac. Just click on the Resources section, and then all interactions with the web elements will be highlighted in real-time on that iPhone.remote debugging on iOS safari
    Image source

Method 2: Debugging on Real iPhones or iPads on BrowserStack’s Real Device Cloud

BrowserStack solves the issues of Method 1 by offering testers and teams a real device cloud for manual and automated testing of websites and apps on 3000+ real browsers and devices. Sign up for free, and test on thousands of real devices and browsers anytime, from anywhere. You won’t have to purchase a device or install a browser or OS for testing ever again. 

Test on Real iPhones for Free

Teams can instantly choose from a range of Android or iOS devices installed with popular browsers like Chrome, Safari, Firefox, and much more. Team members can also access Devtools for debugging during live testing.

Follow the steps below to debug websites running on real iPhones. 

Note: In this example, we will try debugging a site on a Safari browser running on iPhone 13 Mini. Currently, BrowserStack does not support DevTools for Chrome on iPhones. 

  1. Sign Up for Free on BrowserStack Live. If you already have an account, log in. 
  2. Navigate to the device-browser dashboard.
  3. Select iPhone 13 Mini. You’ll see the Safari browser icon show up. Click on it.
  4. Once you click on the Safari icon, a real Safari browser will load on a real iPhone 13 Mini on our real device cloud.
    In this case, we are accessing
  5. Once the browser-device duo loads in real-time and you have accessed the website of your choice, click on DevTools.
  6. Once DevTools open up, you’ll be able to explore specific web elements and debug in case there are errors or anomalies showing up in real user conditions.
  7. Click on the cursor at the topmost left of the DevTools panel. It is highlighted in red in the image below.
  8. Once you click on the cursor, you can move to the real device and click on any element that you wish to inspect. The corresponding code will be highlighted in the DevTools panel.
    In this example, we are inspecting the Get Started Free button on the homepage.You can see that, on clicking the button, the element itself as well as the corresponding code has been highlighted. They have been bordered in red (by the author) for easier understanding.
  9. Click on any other element you want to inspect by repeating the same process highlighted above.
  10. Repeat the process on any of the real iPhones on the BrowserStack cloud in order to inspect elements on real iPhones. As you can see, no setup or installation is necessary.

As developers and QAs get the flexibility to preview and inspect elements on any iPhone, debugging on those iPhones becomes an effortless task. They can also choose to switch between multiple device-browser combinations from the dashboard.

Test and Debug on Real iOS Devices

Also read: How to test mobile applications manually

UI bugs can range from being annoying to being majorly disruptive for user experience. Thorough testing on real devices is the most effective way to discover and deal with these bugs. Debugging on iPhones is mandatory for iOS app developers and testers so as to create apps that work perfectly in real user conditions. Instead of wondering how to debug iOS apps in Safari, just follow the steps in this article, and start releasing highly functioning web apps on iOS.

Debug on real iPhones

Inspect elements instantly on real iPhones

Enter any URL below to debug on all versions of Safari on all iPhone models using BrowserStack Live