Home Guide How to Use Safari DevTools to View Mobile Versions of Web Pages

How to Use Safari DevTools to View Mobile Versions of Web Pages

By Jash Unadkat, Technical Content Writer at BrowserStack -

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:

  1. Launch Safari browser
  2. Click on Safari -> Preferences -> Advanced
  3. Select the checkbox -> Show Develop menu in menu bar

safari dev tools mobile view

Once the Develop menu is enabled, it’ll show up in the menu bar as shown in the image below:

mobile view using safari dev tools


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:

  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. Now the target URL (Wikipedia in this example) can be viewed in the desired iPhone or iPad.

Refer to the image below for clarity:

Safari inspect mobile view example

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:

responsive mobile view using safari devtools

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:

  1. Latest iOS devices like iPhone X, iPhone 11 Pro, and more.
  2. Latest Android devices from Samsung, Oneplus, Google and Motorola.
  3. 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.

Test Your Website on iOS Safari with DevTools

Safari Devtools for Mobile View on Real devices

Users also get access to key features beneficial for overall web development. Listed below are a few:

  1. Users can easily access the – inspect mobile view feature for Safari with DevTools.
  2. Geo-location testing enables users to simulate traffic from different geographies for localization testing.
  3. Integrations with popular bug reporting tools like Jira, Trello, and Slack for easier testing.
  4. 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.

Tags
Cross browser testing Manual Testing Mobile Testing

Featured Articles

3 Easy Ways to Make Cross Browser Compatible Websites

How to Debug on iPhone Safari for Windows

Debunking Myths about Functional Testing

BrowserStack Logo Test Instantly on 2000+ Real Devices & Browsers Get Started Free