How to Enable Safari's Develop Menu

Some of Safari's Best Features Are Hidden Away

Safari's hidden Develop menu
Use Safari's hidden Develop menu to change user agents. Screen shot courtesy of Coyote Moon, Inc.

Safari offers a wealth of special features designed for web developers, all gathered together in a Develop menu that is not visible on the menu bar by default. The Develop menu contains options to change the User Agent, show the Web Inspector and Error Console, disable JavaScript, or disable Safari's caches. Even if you're not a developer, you may find some of these features useful.

Using the Develop menu is easy enough, with each item in the menu pertaining to the currently loaded and frontmost Safari page or tab and then to any subsequently loaded web pages. The exception is a command, such as Empty Caches, that has a global effect on Safari.

Information in this article applies to Safari versions 8 through 12, although much of it also appears in earlier versions of the Develop menu.

Display the Develop Menu in Safari

Before you can use the Develop menu, you must first make the hidden menu visible. This is an easy task, much easier than revealing the Debug menu that—prior to Safari 4—contained all the commands that are now in the Develop menu. However, don't think that the older Debug menu is no longer relevant; it still exists and contains many useful tools.

  1. Launch Safari from the Dock or the Mac Application folder.

    The Safari icon in the Mac Dock
  2. Open Safari's preferences by clicking Safari in the menu bar and selecting Preferences in the drop-down menu.

    Safari menu bar drop-down menu
  3. Click the Advanced tab.

  4. Place a check mark next to Show Develop menu in menu bar.

    Advanced Safari preferences show Develop menu option

Should you ever want to disable the Developer menu, remove the check mark in the Safari > Preferences > Advanced screen.

Using the Develop Menu

The Develop menu appears on the Safari menu bar between the Bookmarks and Window menu items. The Develop menu is particularly handy for web developers, but casual users may also find it useful.

The Develop menu in the Safari menu bar

Some of the Develop menu items that you're likely to find the most useful include:

  • Open Page With: Lets you open the current web page in any browser you have installed on your Mac. If you ever visit a website that doesn't work correctly with Safari, use this command to quickly pop over to the same web page in another browser.
  • User Agent: The user agent is a string of text the browser sends to the web server hosting the web page. If you've ever visited a web page that proclaimed that Safari wasn't supported, this is how the site knew what browser you were using. In most cases, not supported is nonsense, and using this menu item, you can change the user agent to mimic one from a different browser. You may be amazed at how many times a web page that doesn't work suddenly does, just by changing the user agent.
  • Empty Caches: Safari keeps a cache of recently accessed sites. The data stored away in this cache includes all the elements of a page, which can be used to quickly render a website when you return to the page. Sometimes the cache can be old or corrupt, causing a web page to display incorrectly. Emptying the cache can fix these issues and can even help speed up Safari.

Most of the remaining menu items are probably more useful to web developers, but if you're interested in how websites are constructed, then the following items may be of interest:

  • Show Web Inspector: This opens the Web Inspector at the bottom of the current page. With the Web Inspector, you can examine the elements that went into creating the page.
  • Show Page Source: This displays the HTML code of the current page.
  • Show Page Resources: This opens the Resource Inspector sidebar in the Web Inspector. It provides an easy way to see which images, scripts, style sheets, and other elements are used on the current page.
  • Start Timeline Recording: If you want to see how a web page loads and runs, try the Start Timeline Recording option. This creates a graph showing network activity and how each site element is loaded and used. It makes for an interesting display, but don't forget to turn off the feature by selecting Stop Timeline Recording. Otherwise, you are using your Mac's resources on nonproductive tasks—unless you're a web developer.
  • Enter Responsive Design Mode: Another tool for web developers is the built-in simulator that allows you to preview how your web page will look at different screen resolutions or with different devices, such as the iPad or iPhone. Simply load the page you are interested in and select Enter Responsive Design Mode to preview the page. You can try the page rendering using various devices or select a screen resolution to use. When you're done, return to the Develop menu and select Exit Responsive Design Mode.
  • Experimental Features: If you're feeling brave, you can try a few of the features that may find their way into future versions of the Safari browser.

With the Develop menu visible, take some time to try out the various menu items. You'll probably end up with a few favorites that you'll use often.