How to Activate and Use Responsive Design Mode in Safari

Access developer tools in Apple's web browser

Starting in Safari version 9 in OS X El Capitan, Apple introduced a new interface, called Responsive Design Mode, created to help web developers design web experiences across various screen sizes, orientations, and resolutions. Responsive Design helps developers make sure their websites and apps support multiple devices and platforms.

Here's how to enable Responsive Design Mode in the Safari web browser.

This article's information applies to Safari 13 through Safari 9, spanning macOS Catalina through OS X El Capitan. Responsive Design Mode is not available in Safari's Windows version, which Apple no longer supports.

Mobile apps developers at the office using Safari's responsive design mode
gilaxia / Getty Images

How to Enable Responsive Design Mode in Safari

To enable Safari's Responsive Design Mode, along with other Safari developer tools:

  1. Select Preferences in the Safari menu.

    Try the keyboard shortcut Command+, (comma) to access Preferences quickly.

  2. In the Preferences dialog box, select the Advanced tab.

    The Advanced tab
  3. At the bottom of the box, check the box next to Show Develop menu in menu bar.

    The "Show Develop" option in Safari settings
  4. You'll now see Develop in the top Safari menu bar.

    The Develop menu in Safari
  5. Select Develop > Enter Responsive Design Mode in the Safari toolbar.

    Try the keyboard shortcut Option+Command+R to enter Responsive Design Mode quickly.

    Select Develop > Enter Responsive Design Mode in the Safari toolbar.
  6. The active web page will now be displayed in Responsive Design Mode. At the top of the page, choose an iOS device or a screen resolution to see how the page will render.

    The active web page will now be displayed in Responsive Design Mode.
  7. Alternatively, see how your web page will render in various platforms by using the dropdown menu above the resolution icons.

    See how your web page will render in various platforms by using the dropdown menu above the resolution icons.

Safari Developer Tools

In addition to Responsive Design Mode, Safari's Develop menu offers many other useful options, including:

Safari's other developer tools

Open Page With

Opens the active web page in any other browser currently installed on your Mac.

User Agent

When you change the User Agent, you can fool a website into thinking you're using another browser.

Show Web Inspector

Displays all a web page's resources, including CSS information and DOM metrics.

Show Error Console

Displays JavaScript, HTML, and XML errors and warnings.

Show Page Source

Lets you view and search the active web page's source code.

Show Page Resources

Displays documents, scripts, CSS, and other resources from the current page.

Show Snippet Editor

Lets you edit and execute fragments of code. This feature is very useful from a testing perspective.

Show Extension Builder

Helps you build your own Safari extensions by packaging your code accordingly and appending metadata.

Start Timeline Recording

Lets you record network requests, JavaScript execution, page rendering, and other events within the WebKit Inspector.

Empty Caches

Deletes all stored caches within Safari, not just the standard website cache files.

Disable Caches

With caching disabled, resources are downloaded from a website each time an access request is made as opposed to utilizing the local cache.

Allow JavaScript from Smart Search Field

Disabled by default for security reasons, this feature allows you to enter URLs containing JavaScript in Safari's address bar.