How to Enable the Safari Develop Menu on macOS

This article provides a step-by-step guide on how to unlock the hidden Develop menu and Web Inspector tools in the Safari web browser on macOS. By adjusting a single setting in Safari's preferences, you can quickly gain access to advanced web debugging features, view page source code, and utilize responsive design modes.

Steps to Enable the Develop Menu

By default, Safari hides its web development tools to keep the interface clean for everyday users. Follow these steps to turn them on:

  1. Open Safari: Launch the Safari browser on your Mac.
  2. Open Settings: Click on Safari in the top-left corner of your screen in the Apple menu bar, then select Settings... (or Preferences... on older versions of macOS) from the dropdown menu. Alternatively, press the keyboard shortcut Command (⌘) + ,.
  3. Navigate to the Advanced Tab: In the settings window that appears, click on the Advanced tab, which is represented by a gear icon on the far right.
  4. Enable Developer Features: Look at the very bottom of the Advanced window.
    • If you are using Safari 17 or later, check the box next to Show features for web developers.
    • If you are using Safari 16 or earlier, check the box next to Show Develop menu in menu bar.
  5. Close Settings: Close the settings window. You will immediately see the Develop menu appear in the top menu bar between the Bookmarks and Window menus.

How to Access the Web Inspector

Once the Develop menu is enabled, you can open the Web Inspector to examine the HTML, CSS, and JavaScript of any webpage using any of the following methods:

  • Right-Click Method: Control-click (or right-click) anywhere on a webpage and select Inspect Element from the context menu.
  • Menu Bar Method: Click Develop in the top menu bar and select Show Web Inspector.
  • Keyboard Shortcut: Press Command (⌘) + Option (⌥) + I while viewing any webpage.