How to Add Develop Menu in Mac Safari?

Safari browser on your Mac by default doesn’t have a menu item named ‘Develop’. As the name indicates, it is meant for developers to analyze any websites for designing and development purposes. However, it is most useful for normal users also in many situations.

Why You Need to Add Develop Menu in Mac Safari?

There are many situations you may need to get more details of the webpage. For example when the webpage does not load properly on Safari, you may try to open in another installed browser like Firefox or Chrome. With ‘Develop’ menu enabled, you can open the webpages in other browsers from Safari itself. Here are some more reasons for you to enable develop menu:

• Check responsiveness of any website.
• Try experimental features.
• Disable extensions, images, CSS styles and scripts to view the simple page.
• Clear caches to delete previously stored content.
• Enable ‘Show Page Source’ and ‘Inspect Element’ options in the right click context menu.

You will get annoyed to see the right click menu does not have the options to view page source or inspect element without develop menu. Nevertheless, enabling develop menu will bring those options back to the right click context menu.

How to Add Develop Menu in Mac Safari?

Follow the below instructions to add develop menu in Safari Mac.

• Open Safari and go to ‘Safari > Preferences…’ menu. You can also press ‘Command + ,’ shortcut keys to open Safari preferences.

• Navigate to ‘Advanced’ tab and enable ‘Show Develop menu in menu bar’ checkbox.

• Now you can see the Safari browsers has a new ‘Develop’ menu item.

What Can You Do with Develop Menu?

As explained above, the right click context menu will change after enabling ‘Develop’ menu. There are also huge number of options for developers.

Below are some of the notable options:

• Open Page With – Open page using another browser installed on your Mac.
• User Agent – Change user agent in HTTP header to spoof the server that you are using different browser while you actually send request from Safari.
• Experimental Features – try experimental features like Service Workers and Fullscreen API that are not available in normal browser.
• Enter / Exit Responsive Design Mode – check the mobile responsiveness of the webpage.
• Show Snippet Editor – enable snippet editor to test HTML and CSS widgets.
• Show Web Inspector / JavaScript Console / Page Source / Page Resources – these are developer tools will help to analyze the webpage.
• Start / Stop Timeline Recording – record the network requests and webpage rendering timelines in Web Inspector tool.
• Empty Caches – clear safari cache to load the page content from the server.
• Disable Images – remove all images on a page and how alternative text instead. This is useful to check whether your webpage has correct alt text for all images.
• Disable Styles / JavaScript / Extensions – you can use these options for troubleshooting a webpage.