How to Use Safari DevTools to View Mobile Versions of Web Pages
By Jash Unadkat, Technical Content Writer at BrowserStack - October 25, 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.
Why test mobile view of a website on Safari Browsers?
As of October 2021, Safari occupies 19.06% of the global market share. Given that a significant number of users leverage Safari to access the internet, any website or web app must be compatible with this browser in order to adequately serve those users. Additionally, there are multiple versions of Safari in usage, and a website must be able to render and operate flawlessly on each. There is also the question of how a particular Safari version may interact with the hardware specifications of a particular device, adding another layer of verification required in the website development pipeline.
Needless to say, emulators and simulators are unable to replicate all the specifications required for accurate testing. They may not contain and utilize all the features of every Safari version, which means that any test run on emulators and simulators will be able to provide only inconclusive results.
It is much easier and far more effective to view and test websites on real Safari browsers. Not only does it guarantee 100% accurate results, but it also reduces a step in the testing process. No website can be released without being tested on real browsers and devices. Therefore, it is best to do away with emulators and simulators completely, and just test on a real device cloud.
Now, let’s explore how to use Safari DevTools to view mobile versions of websites.
Method 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 the 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:
Note: Fundamentally, this feature is built to check responsive design in Safari. When it comes to actually verifying the features, functions, and offerings of a website, it is best to utilize the second method – a real device cloud. Try Testing for Free.
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.
Method 2: BrowserStack’s Real Device Cloud for Live Safari Testing across 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.
Note: It is quite common for devs and testers to look for answers to “how to check responsive in Safari in Windows” or something along those lines. With BrowserStack, it is possible to run tests on certain versions of Safari installed on Windows devices. Try for Free.
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.