How to Debug Websites on iPhone Safari

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.

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.

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.

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
• 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 it
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.
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.
   Image source

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

• Select “Console” from the 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.

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.

• 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.

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

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 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.