Home Guide How to Debug on iPhone Safari

How to Debug on iPhone Safari

By Jash Unadkat, Technical Content Writer at BrowserStack -

This article will highlight two methods by which developers can debug issues for their mobile web app on the Safari browser running on an iPhone.

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

Method 1: Using the Web Inspector feature on iPhones or iPads

Debugging issues for mobile webpages 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
  • Now open the desired web page to debug or preview on your mobile Safari. Once done, enable the Develop menu on our 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
  • 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
  • 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

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

Try Testing on Real iPhone on Cloud for Free

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 a range of Android or iOS devices installed with popular browsers like Chrome, Safari, Firefox, and much more. Team members also receive upfront access to Devtools of specific browsers for both platforms during live testing. This simplifies the debugging process on the desired device by letting users test on any iOS device like iPhone X, iPhone 11 pro, etc.

The image below gives a glimpse of a BrowserStack Live test session on iPhone XS

How to debug on iPhones

As developers and QAs get the flexibility to preview, or inspect elements on any iPhone, debugging on desired 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. The methods highlighted above will help teams to trace bugs effectively and deliver flawless websites on all iOS devices.

Cross browser testing Emulator and Simulator Manual Testing Mobile App Testing

Featured Articles

How to request a desktop site on the iPhone

How to Inspect an Element on Mac

Best Practices for Selenium Test Automation

BrowserStack Logo Test Instantly on 2000+ Real Devices & Browsers Get Started Free