{"id":14058,"date":"2025-05-30T06:52:54","date_gmt":"2025-05-30T06:52:54","guid":{"rendered":"https:\/\/testgrid.io\/blog\/?p=14058"},"modified":"2025-06-02T07:05:33","modified_gmt":"2025-06-02T07:05:33","slug":"inspect-element-mac","status":"publish","type":"post","link":"https:\/\/testgrid.io\/blog\/inspect-element-mac\/","title":{"rendered":"How to Inspect Element on Mac: Step-by-Step Tutorial"},"content":{"rendered":"\n

Have you ever wondered how websites are put together or wanted to experiment with designing a landing page?<\/p>\n\n\n\n

If so, you probably encountered the term \u201cInspect Element.\u201d This powerful browser tool lets you look closer at the HTML, CSS, and JavaScript that make up any webpage, including its content, structure, styling, and client-side behavior.<\/p>\n\n\n\n

Inspect Element also helps you examine which parts of the code affect the website\u2019s load time or performance, troubleshooting issues before they become massive. If you\u2019re on a Mac, this feature is built-in and easy to access across browsers, such as Safari, Google Chrome, Mozilla Firefox, and Microsoft Edge.<\/p>\n\n\n\n

In this blog post, we\u2019ll show you step by step how to open and use it on your Mac.<\/p>\n\n\n\n

How to Inspect Element on a Mac: Safari, Chrome, Firefox, and More<\/strong><\/h2>\n\n\n\n

A. Safari<\/strong><\/h3>\n\n\n\n

If Safari is your choice of browser on a Mac, you first need to enable the option to access Developer Tools. For that, here\u2019s what you need to do:<\/p>\n\n\n\n

1. In the top menu bar, click on Safari > Settings (or Preferences, depending on your macOS version<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2. Go to the Advanced tab. Scroll to the bottom to check the box that says \u201cShow features for web developers.\u201d<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

3. Once that\u2019s done, you\u2019ll see a new Developer option appear in the top menu along with Feature Flags. This means you now have all the tools for inspecting page elements at your fingertips.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

4. Next, right-click on any part of the page and choose the option \u201cInspect Element.\u201d<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Alternatively, press Command (\u2318) + Option (\u2325) + I on your keyboard to open the Element Inspector.<\/p>\n\n\n\n

In either case, you\u2019ll see a split screen with the page on one side (either the bottom or one of the sides) and the Inspector on the other.<\/p>\n\n\n\n

5. Hover over different lines of code, and Safari will highlight the part of the page it relates to.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

From that panel, you can view and edit HTML, change styles, check network activity, and examine performance.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
Exploring Safari\u2019s Web Inspector:<\/strong>
\"\"
Elements: <\/strong>Allows you to inspect and modify the HTML and CSS of the webpage; you can see how styles are applied, and test changes in real time
Console: <\/strong>Used for running JavaScript code and viewing error\/debug logs
Sources: <\/strong>Lets you view and debug your site\u2019s files (JavaScript, CSS, etc.); includes breakpoints and watches for step-by-step debugging
Network: <\/strong>Monitors all network requests (e.g., API calls, images, scripts); helpful in diagnosing loading issues, bottlenecks, or failed requests
Timelines (now called \u201cPerformance\u201d )<\/strong>: Profiles the performance of your site, showing frame rate, scripting time, and layout reflows<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

B. Chrome<\/strong><\/h3>\n\n\n\n

This is the most popular browser globally, and many testers rely on it to inspect and debug web pages. Using Inspect Element on Chrome is fast, feature-rich, and easy. There are a couple of ways to access the Inspector:<\/p>\n\n\n\n

1. Right-click on any part of the webpage and choose Inspect.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Alternatively, press Command (\u2318) + Option (\u2325) + I on your keyboard.<\/p>\n\n\n\n

You can also use Command (\u2318) + Option (\u2325) + C to jump straight into the Elements tab.<\/p>\n\n\n\n

2. Once opened, the Chrome DevTools panel usually appears at the bottom or side of your browser.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You\u2019ll see the page\u2019s HTML structure at the top and its CSS styles at the bottom. When you hover over or click on different tags, Chrome highlights the corresponding part of the page.<\/p>\n\n\n\n

3. Explore how elements are nested in the HTML, edit styles on the fly and see changes immediately, and view how a page looks on different screen sizes using Device Mode.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The Sources tab also allows debugging JavaScript with breakpoints and monitoring network requests and page load times.<\/p>\n\n\n\n

Microsoft Edge (Chromium-based)<\/strong>
Since Edge is built on the Chromium engine, its Developer Tools are nearly identical to Chrome\u2019s. You can open them by right-clicking on a page element, selecting Inspect, or using CMD + Option + I.

If you\u2019re familiar with Chrome DevTools, you\u2019ll feel right at home inspecting elements, debugging JavaScript, and testing responsive views in Edge.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Also Read:<\/strong> How to Run Selenium Tests on Chrome Using Chromedriver<\/a><\/p>\n\n\n\n

C. Firefox<\/strong><\/h3>\n\n\n\n

Inspecting web elements using Firefox on macOS is similar to using Chrome. Let\u2019s find out how.<\/p>\n\n\n\n

1. Right-click on the webpage element you want to inspect, then select Inspect Element.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Again, if you want a shortcut, use the keyboard shortcut CMD + Option + I to open the Developer Tools panel.<\/p>\n\n\n\n

You can also jump directly into the Inspector tool by pressing CMD + Shift + C.<\/p>\n\n\n\n

2. When the Inspector opens, the screen splits into two parts so you can see the page and the underlying code. When you hover over different parts of the code, Firefox highlights the corresponding elements on the page.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

As you can see below, Firefox Developer Tools do offer some advantages over Chrome and Safari, especially if you\u2019re a developer who wants deeper insights or cleaner workflows.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Here\u2019s how Firefox excels:<\/p>\n\n\n\n

Feature<\/strong><\/td>Firefox Advantage<\/strong><\/td><\/tr>
CSS Grid and Flexbox Visualization<\/em><\/td>Firefox has the most advanced, visual tools for inspecting and debugging CSS Grid and Flexbox layouts. You can see actual grid lines, area names, and more.<\/td><\/tr>
Style Editor<\/em><\/td>More intuitive for working with full CSS files (not just applied styles). Easier to make, test, and save changes to stylesheets.<\/td><\/tr>
Accessibility Inspector<\/em><\/td>Built-in tooling is more detailed than Chrome\u2019s, with roles, contrast info, keyboard focus indicators, etc.<\/td><\/tr>
Built-in Fonts Panel<\/em><\/td>Clean and precise typography tools \u2014 see font stacks, fallback behavior, and character coverage.<\/td><\/tr>
Cleaner Debugging UI<\/em><\/td>The Debugger has a smoother workflow for breakpoints, async call stacks, and watching variables.<\/td><\/tr>
Better Storage Inspector<\/em><\/td>Unified view for cookies, local storage, indexedDB, and more \u2014 easier to navigate than in Chrome.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Limitations of Inspect Element on a Mac<\/strong><\/h2>\n\n\n\n

There\u2019s no doubt this feature is helpful. But it\u2019s also good to know where it may pose as a roadblock for you:<\/p>\n\n\n\n