How do I open debugger in Safari?
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. Show
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. 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. Method 1: Debug using the Web Inspector feature on iPhones or iPadsDebugging 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:
To enable the Develop menu, follow the steps below:
Method 2: Debugging on Real iPhones or iPads on BrowserStack’s Real Device CloudDevelopers 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 Test on Real iPhones 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 displays a BrowserStack Live test session on iPhone XS: 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. We're sorry to hear that. Please share your feedback so we can do betterThanks a lot for your feedback! Featured ArticlesHow to request a desktop site on the iPhoneHow to Inspect an Element on MacCurated for all your Testing NeedsActionable Insights, Tips, & Tutorials delivered in your Inbox Thank you for Subscribing!Expect a curated list of guides shortly. Where is the debugger in Safari?Debugging websites on Safari using Web Inspector
Connect your iPad or iPhone to the machine. Navigate to Settings > Safari > Advanced and enable the Web Inspector toggle button.
Does Safari have a debugger?Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize websites for peak performance and compatibility on both platforms. And with Responsive Design Mode, you can preview your web pages in various screen sizes, orientations, and resolutions.
|