Skip to main content

How to use Inspect Element on Mac using the Safari browser

If you’re just getting started as a front-end developer or need to debug errors while testing web applications, Safari is likely in your list of browsers to check for compatibility. With this comes the need for a tool called Inspect Element.

Going beyond just checking the source code of a page, Inspect Element lets you view everything going on behind the scenes of a webpage. You can see the HTML, style sheets, media, and other elements, all in one spot. Here’s how to use Inspect Element on Mac.

Difficulty

Moderate

Duration

10 minutes

What You Need

  • Mac computer

  • Safari browser

Enable Inspect Element for Safari on Mac

Before you can use the Inspect Element tool on Mac, you need to enable it in Safari.

Step 1: Open Safari and click Safari > Preferences from the menu bar.

Step 2: Select the Advanced tab.

Step 3: Check the box for Show Develop menu in menu bar.

Inspect Element is now available and ready for you to use in Safari on Mac.

how to inspect element on mac preferences show develop safari
Image used with permission by copyright holder
how to inspect element on mac open safari
Image used with permission by copyright holder

Open Inspect Element in Safari

With the tool enabled. you can access it a couple of different ways. If you want to look at a particular element on the page, you can select it first. Otherwise, you can simply open Inspect Element and select it from there.

Either click Develop > Show Web Inspector from the menu bar or right-click the page and pick Inspect Element from the shortcut menu.

How to Use Inspect Element on Mac

Once you open Inspect Element, you’ll have all the tools you need to review every item on the webpage. And there are a lot of tools at your fingertips. Let’s take a look at the basics of using Inspect Element.

Step 1: Move and resize Inspect Element.

You can dock the tool at the bottom or on the side of the page or pop it out to a separate window. Use the icons on the top left of the inspector toolbar to move it where you want. If you dock the tool, you can drag the border to increase or decrease its size.

how to inspect element on mac move safari
Image used with permission by copyright holder

Step 2: Customize the tabs.

Inspect Element provides nine tabs for you to work with across the top of the toolbar. These include Elements, Storage, Layers, and Timelines. You can hide those you don’t need if you like. Right-click a tab and then select the ones you want to see. This places checkmarks next to them and puts the tabs in the toolbar.

how to inspect element on mac select tabs safari
Image used with permission by copyright holder

Step 3: Inspect an element.

To select items on the page to display in the tool, click the compass icon in the toolbar. Then, drag through or click the element on the page. You can also select the code or item in the tool for that element to display on the page.

how to inspect element on mac select safari
Image used with permission by copyright holder

Step 4: Search for an element.

If you want to find a specific item on the page such as a text string, click the search icon on the right of the toolbar. Enter your search term into the box on the left and view your results directly beneath.

how to inspect element on mac search safari
Image used with permission by copyright holder

Step 5: View warnings or errors.

If the tool detects warnings or errors on the page, you’ll see these icons display in the toolbar as well. Click an icon to view either the warnings or errors.

how to inspect element on mac errors safari
Image used with permission by copyright holder

Step 6: Adjust the settings.

To change the appearance of Inspect Element, show page rulers, enable source maps, zoom, and more, click the gear icon on the far right of the toolbar to open the Inspect Element settings.

how to inspect element on mac settings safari
Image used with permission by copyright holder

When you finish using Inspect Element in Safari, click the X on the top left of the toolbar to close it.

You can take your code inspection, application testing, or debugging to the next level with Inspect Element on Mac for Safari.

Editors' Recommendations

Sandy Writtenhouse
Sandy has been writing about technology since 2012. Her work has appeared on How-To Geek, Lifewire, MakeUseOf, iDownloadBlog…
How to password protect a folder in Windows and macOS
A lock surrounded by keys.

Your computer probably has at least one or two files with sensitive information that you don’t want anyone getting their hands on. Maybe it’s a private work document or a digital file with all your passwords on it. Either way, you always want to take extra steps to ensure that your most crucial information is as safe as possible. Systems like Windows or macOS will let you password protect a folder so that anybody who uses your laptop can’t just sneak a peek at those sensitive files.

If you ever need help remembering passwords, consider these picks on our list of the best password managers.

Read more
MacGPT: how to use ChatGPT on your Mac
The MacGPT app for macOS Monterey and Ventura.

Apple might not officially be in the AI space, but a developer has created a legitimate way to bring ChatGPT to macOS and make the chatbot accessible from your menu bar.

The aptly named MacGPT is an application developed by Jordi Bruin that allows you to install ChatGPT as a remote browser on your Mac desktop. The application has been available since the 2022 holiday season and has garnered over 370 ratings, many of which are five stars. MacGPT is currently free, however, Bruin accepts donations. Once out of beta, he will make MacGPT available at the App Store, where it will sell for $5.

Read more
Brave browser takes on ChatGPT, but not how you’d expect
brave browser

Artificial intelligence (AI) is all the rage these days, and a bunch of Silicon Valley heavyweights are vying with OpenAI’s ChatGPT to shake up the tech landscape. Brave is the latest contender to take a swing, and the privacy-focused company has just announced its own AI-based tool for its web browser.

Called Summarizer, the new feature will seek to give you a quick answer to anything you ask it. It does this by taking information from a variety of sources and rolling them into a single coherent text block at the top of your search results.

Read more