How to Inspect Element in Safari on Mac

Web developers and designers often need to dive deep into the structure of a website to understand its components. Even if you’re not a developer, being able to inspect elements can be valuable for troubleshooting issues or understanding how a website is built.

Safari on Mac offers an “Inspect Element” feature, and this blog post will guide you through how to use it.

Why Use Inspect Element?

There are several reasons to use the Inspect Element feature:

  • Debugging: Quickly identify issues in your HTML, CSS, or JavaScript code.
  • Learning: Understand how other websites are constructed.
  • Styling: Experiment with different styles without affecting the live website.


To follow this guide, make sure you have:

  • A Mac computer
  • Safari browser installed

Enable the Develop Menu

Before you can inspect elements in Safari, you need to enable the Develop menu.

Step 1: Open Safari Settings

Open Safari and go to Safari > Settings or use the shortcut Command + ,.

Step 2: Access the Advanced Tab

Once the Preferences window is open, click on the “Advanced” tab.

Step 3: Enable Develop Menu

At the bottom of the Advanced settings, check the box that says “Show Develop menu in menu bar.”

safari browser inspect element

Using Inspect Element

Now that the Develop menu is visible, you can start inspecting elements.

Step 1: Right-Click on an Element

Find the element you want to inspect, right-click on it, and select “Inspect Element.”

safari inspect element

Step 2: Navigate the Inspector

A new window will appear at the bottom of the Safari browser, showing the HTML and CSS for the selected element.

Step 3: Edit and Experiment

You can click on the code to edit it, try new styles, or even toggle elements on and off.

Step 4: Access JavaScript Console

The Inspector also includes a JavaScript Console where you can run and debug JavaScript code.

Keyboard Shortcuts

If you plan on inspecting elements often, you might find these shortcuts helpful:

  • Open/close Inspect Element: Option + Command + I
  • Directly inspect a specific element: Option + Command + C

Additional Tips

  • Changes made in Inspect Element are not permanent; they will disappear when you reload the page.
  • The Inspector has many other features, like network monitoring and performance profiling, which you can explore as you get more comfortable with it.

Inspect Element is a powerful feature in Safari that allows you to delve into the intricacies of web development. Whether you’re a professional developer or a curious user, understanding how to use this tool can greatly enhance your understanding and troubleshooting capabilities.

Similar Posts

Leave a Reply