Starting in Safari version 9 in OS X El Capitan, Apple introduced Responsive Design Mode. This interface helps 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.
Information in this article 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.gilaxia / Getty Images
How to Enable Responsive Design Mode in Safari
To enable the Safari Responsive Design Mode, along with other Safari developer tools:
Go to the Safari menu and select Preferences.
Press the keyboard shortcut Command+, (comma) to access Preferences quickly.
In the Preferences dialog box, select the Advanced tab.
At the bottom of the dialog box, select the Show Develop menu in menu bar check box.
You'll now see Develop in the top Safari menu bar.
Select Develop > Enter Responsive Design Mode in the Safari toolbar.
Press the keyboard shortcut Option+Command+R to enter Responsive Design Mode quickly.
The active web page displays 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.
Alternatively, see how your web page will render in various platforms by using the drop-down menu above the resolution icons.
Safari Developer Tools
In addition to Responsive Design Mode, the Safari Develop menu offers other useful options.
Open Page With
Opens the active web page in any browser currently installed on the Mac.
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
Show Page Source
Lets you view the source code for the active web page and search the page contents.
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 useful from a testing perspective.
Show Extension Builder
Helps you build Safari extensions by packaging your code accordingly and appending metadata.
Start Timeline Recording
Deletes all stored caches within Safari, not only the standard website cache files.
With caching disabled, resources are downloaded from a website each time an access request is made as opposed to using the local cache.