How to Use Safari Web Developer Tools
Safari's diverse dev toolset reflects the large developer community that utilizes a Mac (OS X only) for their design and programming needs. In addition to a powerful console and traditional logging and debugging features, an easy-to-use responsive design mode and a tool to create your own browser extensions are also provided.
- Click on Safari in the browser menu, located at the top of your screen. When the drop-down menu appears, select Preferences. You can also use the following keyboard shortcut in place of this menu item: COMMAND+COMMA(,)
- Safari's Preferences interface should now be displayed, overlaying your browser window. Click on the Advanced icon, located on the far right-hand side of the header.
- The Advanced preferences should now be visible. At the bottom of this screen is an option labeled Show Develop menu in menu bar, accompanied by a checkbox. If there is no check mark shown in the box, click on it once to place one there.
- Close the Preferences interface by clicking on the red 'x' found in the upper left-hand corner.
- You should now notice a new option in the browser menu named Develop, located between Bookmarks and Window. Click on this menu item. A drop-down menu should now be displayed, containing the following options.
Open Page With: Allows you to open the active Web page in one of the other browsers currently installed on your Mac.
User Agent: Lets you select from over a dozen pre-defined user agent values including several versions of Chrome, Firefox and Internet Explorer, as well as define your own custom string.
Enter Responsive Design Mode: Renders the current page as it would appear on various devices and at different screen resolutions.
Show Web Inspector: Launches the main interface for Safari's dev tools, typically placed at the bottom of your browser screen and containing the following sections: Elements, Network, Resources, Timelines, Debugger, Storage, Console.
Show Error Console: Also launches the dev tools interface, directly to the Console tab which displays errors, warnings, and other searchable log data.
Show Page Source: Opens the Resources tab, which displays source code for the active page categorized by the document.
Show Page Resources: Performs the same function as the Show Page Source option.
Show Snippet Editor: Opens a new window where you can enter CSS and HTML code, previewing its output on-the-fly.
Show Extension Builder: Provides the ability to create or edit Safari extensions with CSS, HTML, and JavaScript.
Show Timeline Recording: Opens the Timelines tab and begins displaying network requests, layout and rendering information as well as JavaScript execution in real time.
Empty Caches: Deletes the entire cache currently being stored on your hard drive.
Disable Caches: Stops Safari from caching so that all content is retrieved from the server upon each page load.
Disable Images: Prevents images from rendering on all Web pages.
Disable Styles: Ignores CSS properties when a page is loaded.
Disable JavaScript: Restricts JavaScript execution on all pages.
Disable Extensions: Prohibits all installed extensions from running within the browser.
Disable Site-specific Hacks: If Safari has been modified to explicitly handle issue(s) specific to the active Web page, this option will block those changes so that the page loads as it would have prior to these modifications being introduced.
Disable Local File Restrictions: Allows the browser to have access to files on your local disks, an action that is restricted by default for security reasons.
Disable Cross-Origin Restrictions: These restrictions are put in place by default to prevent XSS and other potential dangers. However, they often need to be temporarily disabled for development purposes.
Allow JavaScript from Smart Search Field: When enabled, provides the ability to enter URLs with javascript: incorporated directly into the address bar.
Treat SHA-1 Certificates as Insecure: SSL certificates using the SHA-1 algorithm are widely considered to be out-of-date and vulnerable.