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 has a wealth of special features designed for web developers, all gathered together under a hidden Develop menu. Depending on the version of Safari you're running, the Develop menu will display four or more groups of menu items, such as the option to change the User Agent, show additional features, such as 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 commands, such as Empty Caches, that have a global effect on Safari.

Before you can use the Develop menu, you must first make this hidden menu visible. This is a fairly easy task, much easier than revealing the Debug menu, which prior to Safari 4 contained all of the commands that are now contained within the Develop menu. But don’t think that the older Debug menu is no longer relevant; it still exists and contains many useful tools.

Display the Develop Menu in Safari

  1. Launch Safari, located at /Applications/Safari.

  2. Open Safari's Preferences by selecting 'Safari, Preferences' from the menu.

  3. Click the 'Advanced' tab.

  4. Place a checkmark next to 'Show Develop menu in menu bar.'

The Develop menu will appear between the Bookmarks and Window menu items. The Develop menu is particularly handy for web developers, but casual users will also find it very useful.

Should you ever want to disable the Developer menu, simply remove the check mark in step four above.

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've ever visited a website that doesn't seem to work correctly with Safari, you can 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 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 of 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 Safari up.

    Most of the remaining menu items will probably be 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 will open 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 will allow you to see the HTML code of the current page.
    • Show Page Resources: This opens the Resource Inspector sidebar in the Web Inspector, which provides an easy way to see what 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 will create a graph showing network activity, and how each site element is loaded and used. It makes for an interesting display, but remember to turn the feature off by selecting Stop Timeline Recording; otherwise, you'll be using your Mac's resources on non-productive tasks--that is, unless you're a web developer.
    • Enter Responsive Design Mode: Another tool for web developers in 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: This menu item is not available in all versions of Safari and its content can change with each Safari update. But if your 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 now 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.