How to Inspect an Element on a Mac

Learn more about the sites you view

What to Know

  • In Safari: Right-click on a webpage and select Inspect Element.
  • In Chrome, you can simply right-click and click Inspect.
  • To enable the feature in Safari: Safari > Preferences > Advanced > check the Show Develop menu in menu bar box.

This article teaches you how to inspect a website's element on Mac. It looks at how to do so via Safari as well as through using Google Chrome. 

How Do You Use the Inspect Element Feature on a Mac?

Before inspecting elements on Mac when using Safari, you need to enable the developer menu within the browser. Here's a look at how to switch it on and what to do to inspect an element. 

If you can see Develop between Bookmarks and Window, the Developer Menu has already been enabled and you can skip to step 4.

Using the Inspect Element Feature in Safari

  1. In Safari, click Safari > Preferences.

    Safari with Preferences highlighted
  2. Click Advanced.

    Safari with Advanced highlighted in Preferences
  3. Click Show Develop menu in menu bar then close the window.

    Safari with Show develop menu highlighted in Preferences
  4. When browsing a website, right click on the item you wish to inspect. 

  5. Click Inspect Element.

    Safari with Inspect Element highlighted
  6. You can now view the code behind the website you've inspected.

    Safari with code editor open

Using the Inspect Element Feature in Chrome on a Mac

If you use Chrome instead of Safari on your Mac, it's even easier to view an element as there's no need to enable the feature. Here's what to do.

  1. In Chrome, browse to a website.

  2. Right click on the element you wish to inspect.

  3. Click Inspect.

    Chrome with Inspect highlighted
  4. You can now view the code in a side window on Chrome. 

    Chrome with code editor open

Why Can’t I Inspect on My Mac?

The key reason why you might not be able to inspect an element on your Mac is if you haven't enabled the Developer menu within Safari. Here's a reminder of how to do it.

  1. In Safari, click Safari > Preferences.

    Safari with Preferences highlighted
  2. Click Advanced.

    Safari with Advanced highlighted in Preferences
  3. Click Show Develop menu in menu bar then close the window.

    Safari Preferences with Show Develop menu highlighted

How to Make Website Changes by Inspecting the Element

Besides allowing you to view the code on a website, it's also possible to temporarily change any website element through Inspect Element. Here's how to do so via Safari.

The process is very similar on other browsers.

  1. When browsing a website, right click on the item you wish to inspect.

  2. Click Inspect Element.

  3. Double click on the text in the code to make it editable.

  4. Delete it or enter a new string of text.

  5. Tap Enter.

  6. The code has now been temporarily changed just for your benefit. 

Why Would You Want to Use the Inspect Element Feature?

Being able to inspect an element is useful for a number of reasons.

  • To change code on the fly. Website designers can change things around on a website temporarily to see how the changes affect things. 
  • To check the code. Both designers and marketing people can check the code to confirm that things are included like Google Analytics details. 
  • To view images separately from a site. If a site doesn't allow you to open an image in a new tab or window, viewing the element makes it possible. 
  • Tinker. Seeing the code of a web page can help with your understanding of what you are seeing which can remove the mystery of whats and whys of what's going on the site you are on. Think of it like taking apart an appliance to see how it works but, in this case, there are no screws to lose.
FAQ
  • Is it legal to inspect a website?

    Yes. However, if you plan to use any code or assets from a website, be sure to check with the owner and add a copyright note.

  • How do I copy HTML from a website with inspect element?

    In Chrome, right-click the page and select Inspect, then go to the top section and right-click the <html> tag (e.g. <!doctype html>). Select Copy > Copy outerHTML, then paste the code into a text or HTML file.

  • Can I copy CSS from a website with inspect element?

    Yes. Right-click the element you want to copy and choose Inspect. Right-click on highlighted code and select Copy > Copy styles.

  • How do I see my saved passwords using inspect element?

    To reveal hidden passwords, right-click on the password text box and select Inspect. In the highlighted section, look for type=”password” and replace password with text. There are easier ways to show all your passwords in Chrome.

Was this page helpful?