How to Inspect an Element on a Mac

This article teaches you how to inspect a website's element on Mac. It looks at how to do so via Safari and 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. 

Using the Inspect Element Feature in Safari

Here's how to use Inspect Element in Safari, the default browser on Mac computers.

1. In Safari, click Safari > Preferences.
   

2. Click Advanced.
   

3. Click Show Develop menu in menu bar then close the window.
   

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

5. Click Inspect Element.
   

6. You can now view the code behind the website you've inspected.
   

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.
   

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

Why Can’t I Inspect on My Mac?

You might not be able to inspect an element on your Mac 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.
   

2. Click Advanced.
   

3. Click Show Develop menu in menu bar then close the window.
   

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.

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 helpful for many reasons.

• To change code on the fly. Website designers can temporarily change things around on a website to see how the changes affect things. 
• To check the code. Both designers and marketing people can check the code to confirm that things like Google Analytics details are there. 
• 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 you understand what you see, removing the mystery of what and why of what's up with the site you are on. It's like taking apart an appliance to see how it works, but there are no screws to lose in this case.