How to use Devtools for Safari Mobile View?

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 superior user experiences.

Apple is undoubtedly the most innovative product company in the world right now.

• Apple Safari is the native browser for the Apple ecosystem and offers robust customization options, powerful privacy protections, and optimized battery life.
• The adoption rate of Safari is huge. Hence, ensuring a stable and reliable browsing experience on all devices becomes essential.
• Hence, it is imperative to test on Safari and its various versions before they are released to the public.

This article illustrates how to use Safari DevTools to view the mobile version of a particular web page with three different methods.

Why test Safari Mobile View of a Website?

• As per Statcounter Report March 2023, Safari occupies 19.5% of the global market share, and 25.07% is their mobile browser market share worldwide.
• Given that macOS and iOS users leverage Safari to access the internet, any website or web app must be compatible with this browser to serve those users adequately.

• 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 specific device, adding another layer of verification required in the website development pipeline.
• Emulators and simulators cannot replicate all the specifications required for accurate testing. They may not contain and utilize every Safari version’s features, which means that any test run on emulators and simulators can provide only inconclusive results.

It is much easier and far more effective to view and test websites on real devices sunning 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 devices-browser-OS combinations. Therefore, it is best to do away with emulators and simulators and test Safari mobile view on a real device cloud which will be explained in method 3 below.

Now, let’s explore how to use Safari DevTools to view mobile versions of websites.

How to use DevTools to test Safari Mobile View?

Method 1: Responsive Design Mode in Safari Mobile Web

Follow the steps below to enable the Develop menu:

1. Launch Safari browser
2. Click on Safari -> Settings -> Advanced
3. 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:

Now follow the steps below to view the mobile version of a web page using Safari DevTools:

1. Launch Safari and navigate to the desired URL that needs to be loaded in mobile view.
2. Click on the Develop menu and select Enter Responsive Design Mode.
3. The target URL (BrowserStack App Live in this example) can be viewed on the desired iPhone or iPad.

Devs or testers can locate it in the development view and use the element selector to inspect specific Safari mobile web elements after activating the inspector.

Method 2: Using Web Inspector for Debugging on Safari

Furthermore, developers can leverage the Web Inspector to inspect any particular element and debug a specific issue for a 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.

Note: This approach allows the simulation of different viewports on a desktop browser. However, this is not the most accurate or simple way to test the mobile version of a website on Safari, as it is just a device simulation using development tools. It cannot simulate all aspects of a real mobile device under real user conditions.

Method 3: BrowserStack’s Real Device Cloud for Live Safari Testing

• This method’s key benefit is that it 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. The build vs buy framework can help enterprises decide on the best investment strategy for their testing needs.

Teams or individuals can opt for BrowserStack Real Device Cloud, offering 3000+ real devices and browsers to test websites and apps under real user conditions for accurate testing.

Teams can access:

1. Top iOS devices for testing, such as iPhone 14 Pro, iPhone 13 Mini, iPhone 12 Pro Max, iPad Pro, and more.
2. Top Android devices for mobile app testing include the Samsung Galaxy series, OnePlus 9, Google Pixel, and Motorola.
3. Multiple versions of leading browsers like Safari, Google Chrome, Firefox, and Opera are installed on real devices.
4. Latest flagship iOS devices and Android devices, along with legacy devices for covering the entire spectrum of device testing and beating device fragmentation.

• 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 represents a BrowserStack live testing session (Safari Browser Testing on iPhone 14 Pro running on the latest iOS 16.3)
• Not only can testers access Safari DevTools on a single dashboard, but they can also adjust Safari settings, as depicted below.

Users also get access to key features beneficial for overall web development, such as:

1. Geo-location testing enables users to simulate traffic from different geographies for localization testing.
2. Integrations with bug reporting tools like Jira, Trello, and Slack for debugging and project management.
3. Testing mobile device features like network throttling, pinch to zoom, and device rotation.

Debug Websites on Safari with BrowserStack

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.