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. 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. 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 webserver 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.
Additional Develop Menu Items
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.
