Effortlessly Debug Websites on Real iPhone Devices on BrowserStack

Debug your website on Safari & real iPhone devices using BrowserStack Live for a seamless user experience

Get Started free
Home Guide How to Debug Websites on iPhone Safari

How to Debug Websites on iPhone Safari

By Jash Unadkat, Community Contributor -

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

Safari Browser Market Share - May 2023

Consequently, testers must 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 ways developers or QAs can debug websites and web apps on iPhone via the Safari browser.

Note: For developers or QA engineers seeking to debug errors on specific iOS devices (For example, iPhone X, iPhone 11Pro) the second method will be more effective.

Why is it important to debug on iPhone?

iPhone holds a significant share of Apple’s revenue and has been one of its pioneer products. With the rising iPhone Sales from 40 million units in 2010 to more than 206 million units in 2020, which is ever-increasing, the prominence of the iPhone and its user base is also growing. This makes debugging websites on iPhones important.

Let’s understand how to debug Safari on iPhones and iPads using two different methods.

BrowserStack Live Banner 5

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 Inspector How to inspect Safari in iPhone using Web Inspector
  • 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.How 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

How to debug errors on iPad or iPhone using the Safari Console menu?

  • Select “Console” from the iPhone Safari Web Inspector Menu iPhone Safari Web Inspector Menu
  • Console is a Command Line API that allows you to debug Safari on iPhone using Developer Tools. The Console allows access to the DOM and JavaScript of the open page, allowing you to inspect HTML nodes and JavaScript objects in more detail by using the console commands.

iPhone Safari Debug Console 1

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

Developers or QAs often have to deal with rendering bugs for a specific device or platform (Android, iOS). In such cases, they need to use specific mobile devices for testing, debugging, and optimizing websites for mobile devices to ensure a consistent cross-device user experience.

Here’s where BrowserStack empowers teams by offering them a real device cloud for manual and automated testing of websites and apps on real devices.

Screenshot 2023 06 27 at 12.41.20 PM

  • Teams can instantly choose from Android or iOS devices installed with popular browsers like Chrome, Safari, Firefox, etc.
  • During live testing, team members also receive upfront access to Devtools of specific browsers for both platforms.
  • This simplifies the debugging process on the desired device by letting users test on iOS devices like iPhone X, iPhone 12 Pro, iPhone 13, iPhone 14  etc.

Talk to an Expert

The image below displays a BrowserStack Live test session for Safari on iPhone 13 running iOS 16:

Debug iPhone on Safari using BrowserStack Live

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

UI bugs can range from annoying to 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 to create apps that work perfectly in real user conditions. Instead of wondering how to debug iOS apps in Safari, follow the steps in this article, and start releasing highly functioning web apps on iOS.

Cross browser testing Emulator and Simulator Manual Testing Mobile App Testing

Featured Articles

Top iOS Devices to Test your App or Website on

How to Test In-App Purchases on iOS Devices

Debug website on Real iPhone Devices

Debug website on real browsers & iPhone devices in real time using BrowserStack Live for accurate results