How to Inspect Element in Safari

You can use the Inspect Element feature to view and manipulate a website’s front-end. Web developers, designers, or marketers often need to inspect web elements to debug elements, conduct layout tests, or do CSS editing like fonts, colors, etc. This article explains how to inspect web elements on the Safari browser on your Mac.

The Inspect Element feature is a handy tool that enables you to see a website’s inner workings so that you can see what’s really happening in the background.

Enable Inspect Element in Safari

The first step is to enable Inspect Element. Here is how:

  • In Safari, click Safari and Preferences.
  • Click the Advanced tab.
  • Select the “Show Develop menu in menu bar” box.
Show develop menu in menu bar

Open Inspect Element

There are a few ways to access Inspect Element so that you can start changing, adding, and removing page elements:

1. Using your mouse or trackpad, right-click (control-click) anywhere on the webpage and select “Inspect Element”

Inspect Element

2. You can use the Develop menu. In Safari, click Develop and choose “Show Web Inspector”.

Web Inspector

3. You can also use keyboard shortcuts. Simply press these keys together: Option-Command-i.

4. And lastly, you can customize the Safari toolbar to add the Web Inspector icon for easy access. Here is how:

  • In Safari, click View > Customize Toolbar.
  • Using your mouse or trackpad, drag the Web Inspector icon into the toolbar.
Inspector Toolbar

Use Inspect Element

Safari’s Inspect Element will open in a pane at the bottom of the screen.

Inspect Element

You have a few options:

  • Click the “Dock to side of window” icon to move the pane to the right side of the window.
  • Click the “Detach into separate window” icon to open the pane in a separate window.
  • To close the Inspect Element page, click the close (X) icon.
Move Inspect Element sidebar or window

Along the top of the panel, you will see tabs:

  • Elements: This is the main screen. This shows all of the page code (HTML, CSS, Javascript etc) and other details such as the page’s grid system.
  • Console: This shows error messages. It is a warning log.
  • Sources: This shows the page’s HTML code.
  • Network: This shows a detailed list of the requests made to and from the server.
  • Timelines: This shows a visual analyzer that includes all of the activity such as network requests, Javascript, or memory.
  • Storage.
  • Graphics.
  • Layers.
  • Audit.

If you click the gear settings icon, you can customize the pane. For example, you can select a dark or light theme.

See also:

Dr. Serhat Kurt worked as a Senior Technology Director. He holds a doctoral degree (or doctorate) from the University of Illinois at Urbana / Champaign and a master’s degree from Purdue University. Here is his LinkedIn profile.

Thank you for choosing to leave a comment.

Please note the following:

  • All comments are moderated.
  • Your email will NOT be published nor shared.
  • All SPAM comments will be deleted.
  • Please see our comment policy page for more info.

Leave a Comment