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 August 2024, Safari occupies 18.55% of the global market share, and 23.28.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?

As a developer, as a best practice it is recommended that you use the Safari Mobile view to understand how your website performs on varying screen sizes. We already established how the number of mobile users is increasing exponentially.

You can use one of the following option to use the Safari mobile view:

• Method 1- Safari Developer settings: The inbuilt Developer settings that Safari includes, which is disabled by default, can be used to test your website for responsiveness. It gives you access to a limited set of screen sizes that you can use to understand your website behavior. The Developer settings also includes the Web Inspector tool that you can use to further debug UI issues such as, missing UI elements, misalignment in text, etc. This option is useful for sandbox or non-productions setups.
• Method 2- BrowserStack Real Device Cloud: When you use BrowserStack Live to access a real device cloud of 3500+ browser and device combinations, you can not only test your site’s responsiveness, but can also analyze your website for varying setups in which user’s might access your site through their devices. You can simulate networks, test physical SIMs, check responsiveness, debug issues, record your test runs, and much more.

Method 1: Responsive Design Mode Using Web Inspector for Debugging in Safari

First, remember that the Developer menu is, by default, disabled for the Safari browser. To access the Responsive Design Mode, enable the Safari Develop menu.

Enable the Develop Menu in Safari

Follow the steps below to enable the Develop Menu:

Step 1. Launch Safari browser

Step 2. Click on Safari -> Settings -> Advanced

Step 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:

View mobile version using Safari DevTools

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

Step 1. Launch Safari and navigate to the desired URL that needs to be loaded in mobile view.

Step 2. Click on the Develop menu and select Enter Responsive Design Mode.

Step 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.

Mobile View in Safari using Web Inspector

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 2: BrowserStack’s Real Device Cloud for Live Safari Testing

To test your website for responsiveness, do the following:

Step 1. Log in or Sign Up for free BrowserStack account. An operating system and browser selection menu is displayed.
Step 2. You can either directly view your website on different devices, such as Safari on iPhone 15, iPhone 15 Pro, etc, or you can view your website on Mac OS and play around with resolutions.
Step 3. Select the device-browser combination on which you want to perform the test. Since we are testing on the macOS operating system, click Mac > Sequoia.
Step 4. Under the Safari column, click 18.

Step 5. On your current session, from the Live toolbar, click 1920 x 1080 and select 1280 x 1024.

The screen refreshes to display the website in this resolution as follows:

Step 6. To simulate the Web inspector tool, select and right-click an element on your website that you want to inspect.

Step 7. Click Inspect element to start inspecting.

Debug Websites on Safari with BrowserStack

Why run Mobile Tests on Real Devices?

Inspecting using the Safari Developer tools limits your ability to identify and debug issues that might be beyond the scope of just identifying UI issues. For example, real world issues such as hardware issues, network issues, etc might also influence how your website is served. Using a real device cloud gives you access to these features along with better observability and debugging.

Some of the benefits of using BrowserStack Live are:

• Access a wider range of configurations: Test your applications across versions of Mac OS, Safari versions, or directly use the real devices such as iPhone, iPad instead of varying resolutions.
• Streamline debugging: BrowserStack Live integrates with popular debugging tools, enabling you to inspect elements, capture screenshots and videos of bugs, and troubleshoot issues efficiently during testing.
• Ensure consistency and reliability: BrowserStack Live gives you access to simulating a local environment along with network connectivity. You can test holistically so that users’ experience isn’t compromised. You can test for differences in local setups due to varying software versions, hardware limitations, or setup differences.
• Accelerate testing: Run tests simultaneously on multiple Mac/Safari configurations on BrowserStack, significantly reducing testing time compared to sequential testing on a local machine.

Talk to an Expert

Conclusion

Using the default Safari Developer tools along with the Web Inspector tool can be efficient for non-productions setups, but even then you want to ensure that the user experience that you deliver through your website finally isn’t compromised.

With access to more than 3500+ browser combinations, a real device cloud can empower your developers to test your applications expansively. You can also use the free responsive design checker that BrowserStack offers to see how your applications perform on most popular devices.