How to Enable Responsive Design Mode in Safari
To enable the Safari Responsive Design Mode, along with other Safari developer tools:
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.
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 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
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 only 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 using the local cache.
Allow JavaScript from Smart Search Field
Disabled by default for security reasons, this feature allows you to enter URLs containing JavaScript into the Safari address bar.
