How to Activate and Use Responsive Design Mode in Safari GA S REGULAR Menu Lifewire Tech for Humans Newsletter! Search Close GO Internet, Networking, & Security > Browsers
How to Activate and Use Responsive Design Mode in Safari
Access developer tools in Apple's web browser
By Scott Orgera Scott Orgera Writer Scott Orgera is a former Lifewire writer covering tech since 2007. He has 25+ years' experience as a programmer and QA leader, and holds several Microsoft certifications including MCSE, MCP+I, and MOUS. He is also A+ certified. lifewire's editorial guidelines Updated on May 20, 2022 Tweet Share Email Tweet Share Email Browsers Safari Chrome Firefox Microsoft What to Know
To enable: Preferences > select Advanced tab > toggle Show Develop menu in menu bar on. To use: select Develop > Enter Responsive Design Mode in Safari toolbar. This article explains how to enable Responsive Design Mode in Safari 9 through Safari 13, in OS X El Capitan through macOS Catalina. 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. 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. Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Subscribe Tell us why! Other Not enough details Hard to understand Submit More from Lifewire Add More Features by Turning on Safari's Develop Menu How to View Internet Explorer Sites on a Mac How to Activate the iPhone Debug Console or Web Inspector How to Switch to Desktop Mode on iPhone Viewing the HTML Source Code in Safari How to Install, Manage, and Delete Safari Extensions How to Use Web Browser Developer Tools How to Activate Full-Screen Mode in Google Chrome How to Save Web Pages in Safari for OS X How to Turn On Private Browsing in Safari for iOS How to Control F on iPad How to Change Your Homepage in Safari How to View the HTML Source in Google Chrome How to Send a Web Page With the Mac's Email Program How to View Blurred Text on Websites How to Clear Internet Cache in Every Major Browser Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookies Settings Accept All Cookies