How to Debug Websites on iPhone Safari

With iOS holding 27.73% of the global mobile OS market share, its popularity speaks for itself. Safari holds 18.17% 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.

Apart from these compelling arguments, the iOS device also is well loved due to the longer software support that it offers, which means users stick to that device for longer.

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 15 Pro, iPhone 15) 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 50 million units in the first quarter of 2024, which is ever-increasing, the prominence of the iPhone and its user base is also growing. This makes debugging websites on iPhones important.

Some of the reasons why debugging in real time matters are:

• Identify how an application performs in real-world conditions, including varied network conditions, hardware differences, and user interactions.
• Identify and fix bugs specific to certain hardware configurations, operating systems, and device models.
• Provide accurate performance metrics such as battery usage, memory consumption, and CPU load.
• Identify how your application performs under real network conditions, including different types of cellular connections and varying signal strengths.

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

How to Debug Websites on iPhone Safari?

There are 3 different Methods to Request a Desktop Site in iPhone:

• Method 1: Debug using the Web Inspector feature on iPhones or iPads
• Method 2: Debug errors on iPad or iPhone using the Safari Console Menu
• Method 3: Debug iPhones or iPads using BrowserStack’s Real Device Cloud

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:

Step 1. Connect the iOS device to the machine.

Step 2. Enable the Web-Inspector option. To do so:

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

Step 3. 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:

Step 1. Launch Safari browser

Step 2. Click on Safari at the top > Open Preferences > Advanced

Step 3. Mark the checkbox – Show Develop menu in the menu bar to enable it

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

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

Method 2: Debug errors on iPad or iPhone using the Safari Console Menu

Step 1. Select “Console” from the iPhone Safari Web Inspector Menu

Step 2. 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 3: Debug iPhones or iPads using BrowserStack’s Real Device Cloud

With access to more than 9000 device and browser combinations, developers can benefit from observing how their application interacts with different devices. Due to multiple integrations that BrowserStack Live offers, tracking bugs and resolving them also gets easier.

In this example, we will open the bstackdemo.com website, access the developer tools to inspect elements, and change the pricing of the iPhone 12 Mini temporarily. The Chrome DevTools is currently only available in Android 7 and above.

Talk to an Expert

Get started by following three simple steps listed below:

Step 1. Sign up on BrowserStack Live for a free trial or purchase a plan.

Step 2. Navigate to the Live Dashboard after successful sign-up.

Step 3. Click iOS > iPhone, and then select Safari.
Wait for the device to be booted.

Step 4. In the browser on the device, enter https://the-internet.herokuapp.com/broken_images.

Step 5. Inspect specific elements to access the HTML code and debug in real time.

• Right-click the broken image, and then select Safari Web Inspector.

• Replace the file name with img/avatar-blank.jpg.

• Click anywhere on the Live dashboard to apply the changes.
  You can see the following change applied.

It is important to note that these changes are not permanent and just apply to the current session. Using this feature helps you simulate situations that you might encounter as part of your testing.

Why Debug Websites using Real Device Cloud?

Though all browsers give access to a set of simulators for popular devices, this doesn’t reflect the reality of the current world. You want to simulate the situations such as network interruptions, SIM card scenarios, and so on along with your typical testing process. This requires access to a robust infrastructure equipped with real devices across operating systems and browser versions.

Instead of investing in creating and maintaining infrastructure overheads, it makes logical sense to rely on SOC2 compliant real cloud device providers, such as BrowserStack.

Conclusion

BrowserStack Live stands out as an efficient solution to ensure that your customers get a seamless experience when they use your applications. Some of the outstanding features that BrowserStack Live gives are:

• Access to devices on Day 0 of its availability.
• Test your local or staging websites.
• Test workflows for password reset, OTP-based authentication, and responses to SIM-based interruptions.
• Test performance in slower network profiles like 2G, 3G, EDGE, etc.

You can also use the free BrowserStack Responsiveness testing tool to understand how your web application performs across popular devices and browsers.