How to Enable the Develop Menu and Inspect Element in Safari on Mac

For web designers, software engineers, and curious users troubleshooting website layouts, inspecting a webpage’s underlying code is essential. In other browsers like Chrome or Edge, developer options are active out of the box. However, Safari on macOS keeps its developer tooling and contextual “Inspect Element” feature disabled by default to provide a simplified browsing interface. Enabling Safari’s dedicated Develop menu unlocks comprehensive debugging utilities—including the Web Inspector, JavaScript console, network waterfall timelines, and device responsive testing modes.

Activating the Develop Menu in Safari Settings

Enabling developer features requires a simple toggle inside Safari’s advanced settings pane.

1. Launch Safari on your Mac.
2. Click Safari in the macOS menu bar at the top of the screen and choose Settings… (or press Command + ,).
3. In the settings window, click the Advanced tab (represented by the gear icon on the far right).
4. Look near the bottom of the Advanced pane.
5. Check the box labelled Show features for web developers (in earlier macOS versions, this option is labelled Show Develop menu in menu bar).
6. Close the Settings window.

A new Develop menu will immediately appear in the macOS top menu bar situated between Bookmarks and Window.

Inspecting HTML and CSS Elements on a Webpage

Once developer features are activated, the contextual inspection tool is available on any live website.

1. Navigate to any web page in Safari.
2. Right-click (or Control-click) any image, button, heading, or paragraph on the page.
3. In the context menu, select Inspect Element.
4. Alternatively, press Command + Option + I to toggle the Web Inspector docked at the bottom of the browser window.

The Web Inspector interface features several dedicated diagnostic panels:

• Elements: Displays the live DOM hierarchy and CSS styling rules, allowing you to edit text and CSS values in real time to test visual tweaks.
• Console: Logs JavaScript errors, warnings, network failures, and custom debugging commands.
• Sources: Allows setting script breakpoints and inspecting executing JavaScript code.
• Network: Visualises resource load times, HTTP status codes, latency, and payload sizes.

Using Responsive Design Mode for Mobile Testing

The Develop menu includes a built-in viewport simulator that lets you preview how responsive websites render across diverse Apple devices:

1. Click the Develop menu in the top menu bar.
2. Select Enter Responsive Design Mode (or press Command + Control + R).
3. Use the top navigation bar to switch between iPhone, iPad, and custom desktop screen resolutions, testing touch emulation and dynamic orientation shifts effortlessly.