How to Use Safari DevTools to View Mobile Versions of Web Pages
By Jash Unadkat, Technical Content Writer at BrowserStack - March 15, 2021
Web-developers often need to validate the appearance of their websites across various screen sizes to ensure cross browser compatibility. This helps them ensure web pages render correctly across unique mobile browsers and provide consistently superior user experiences.
A previous article discussed how to view mobile version of web pages on Chrome using device simulation and a real device cloud. This article illustrates how to use Safari DevTools to view the mobile version of a particular web page.
1. Responsive Design Mode in Safari DevTools for Mobile view
To start with, bear in mind that the Developer menu is, by default, disabled for Safari browser. In order to access the Responsive Design Mode, enable the Safari Develop menu.
Follow the steps below to enable the Develop menu:
- Launch Safari browser
- Click on Safari -> Preferences -> Advanced
- Select the checkbox -> Show Develop menu in menu bar
Once the Develop menu is enabled, it’ll show up in the menu bar as shown in the image below:
Did you know: How to remotely debug on iOS and Mac Safari
Now follow the steps below to view the mobile version of a web page using Safari DevTools:
- Launch Safari and navigate to the desired URL that needs to be loaded in mobile view.
- Click on the Develop menu and select Enter Responsive Design Mode.
- Now the target URL (Wikipedia in this example) can be viewed in the desired iPhone or iPad.
Refer to the image below for clarity:
Furthermore, developers can leverage the Web Inspector in case they need to inspect any particular element and debug a certain issue for specific screen size. One can find the web inspector in the Develop menu. Once the web inspector is active, inspect a particular element using the element selector.
Refer to the image below:
Note: This approach just allows the simulation of different viewports on a desktop browser. However, this is not the most accurate way to test the mobile version of a website on Safari, as it is just a device simulation. It cannot simulate all aspects of a real mobile device.
2. BrowserStack’s Real Device Cloud for Live Safari Testing on Apple Devices
A key benefit this method offers is that it also allows Windows users to test websites on real mobile Safari browsers directly from their web browsers.
Testing a website on real devices is the most effective way to validate its appearance and performance. This also allows team members to identify UI bugs that end users may face in the real world.
However, it is not feasible for every organization to set up on-premise device labs.
Teams or individuals can opt for cloud-based testing platforms like BrowserStack. Its real device cloud offers 2000+ real devices and browsers to test websites and apps across real devices.
At a high level the real device cloud offers:
- Latest iOS devices like iPhone X, iPhone 11 Pro, and more.
- Latest Android devices from Samsung, Oneplus, Google and Motorola.
- Multiple versions of leading browsers like Safari, Chrome, Firefox, Opera installed on real devices.
Testers can instantly test their web pages on the desired iPhone or iPad Safari directly from their web browser. Sign up for free, select an iPhone or iPad and Select the Safari browser. The image below is an exact representation of a live testing session (Safari Browser Testing on iPhone 12 pro max) on BrowserStack.
Users also get access to key features beneficial for overall web development. Listed below are a few:
- Users can easily access the – inspect mobile view feature for Safari with DevTools.
- Geo-location testing enables users to simulate traffic from different geographies for localization testing.
- Integrations with popular bug reporting tools like Jira, Trello, and Slack for easier testing.
- Testing of mobile device features like pinch to zoom and device rotation.
The methods explained above will help testers use Safari DevTools to retrieve the mobile view of web pages on Safari running on Mac devices. The second method, in particular, will also help cross-platform users view and test web pages on Safari browsers with DevTools for real iPhones or iPads.