How to Activate and Use Responsive Design Mode in Safari

Access developer tools in Apple's web browser

Making sure that websites and web apps support a bevy of devices and platforms is an essential task for web developers. Apple's Safari web browser includes a Responsive Design mode that allows you to preview how your site will render at various screen resolutions and on different iPadiPhone, and iPod touch builds.

Instructions in this article apply to Safari 13 for macOS. Responsive Design mode is not available in the Windows version.

How to Enable Responsive Design Mode in Safari

To enable Safari's developer tools and Responsive Design mode:

  1. Select Safari > Preferences in the Safari toolbar.

    Safari 9 preferences
    Lifewire / Scott Orgera

    You can also use the keyboard shortcut Command+Comma (,) to access the Preferences menu.

  2. In the Preferences menu, select the Advanced tab and check the box beside Show Develop menu in menu bar. A new option should now be available in the Safari toolbar at the top of the screen.

    Safari 9 developer tools
    Lifewire / Scott Orgera
  3. Select Develop > Enter Responsive Design Mode in the Safari toolbar.

    Safari 9 simulator
    Lifewire / Scott Orgera

    You can also use the keyboard shortcut Option+Command+R to enter Responsive Design Mode.

  4. The active web page should 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.

    Safari 9 iOS simulator
    Lifewire / Scott Orgera

You can also instruct Safari to simulate different user agents using the drop-down menu directly above the resolution icons.

Safari Developer Tools

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

  • Open Page With: Open the active web page in any other browser currently installed on your Mac.
  • User Agent: Changing the user agent causes web servers to identify your browser as something other than Safari.
  • Connect Web Inspector: Display all of a webpage's resources including CSS information and DOM metrics.
  • Show Error Console: Display JavaScript, HTML, and XML errors and warnings.
  • Show Page Source: View and search the active web page's source code.
  • Show Page Resources: Display documents, scripts, CSS, and other resources from the current page.
  • Show Snippet Editor: Edit and execute fragments of code. This feature is very useful from a testing perspective.
  • Show Extension Builder: Build your own Safari extensions by packaging your code accordingly and appending metadata.
  • Start Timeline Recording: Record network requests, JavaScript execution, page rendering, and other events within the WebKit Inspector.
  • Empty Caches: Delete 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.
  • Treat SHA-1 Certificates as Insecure: Short for Secure Hash Algorithm, the SHA-1 hash function has been proven to be less secure than originally thought, hence the addition of this option in Safari.