How to Inspect Element on a Mac (Every Method, 2026)

You spotted a button, a layout, or a font on a website and you want to see how it's built. On a Mac, the tool for that is built right into every browser. It's called Inspect Element (or the Web Inspector in Safari), and once you know the shortcut it takes about a second to open.

This guide covers every method on macOS: the keyboard shortcut, the right-click route, the extra step Safari needs, and how to actually use the panel once it's open. If you're on Windows or a phone too, the companion guide to inspect element on any device covers the rest.

The shortcut: Cmd + Option + I

In every Chromium browser on macOS (Chrome, Edge, Brave, Arc, Opera) and in Firefox, the shortcut is the same:

• Open developer tools: Cmd + Option + I
• Open straight into element-picker mode: Cmd + Option + C

Or, the route most people remember: right-click anywhere on the page and choose Inspect (Chrome, Edge, Brave) or Inspect Element (Firefox).

That opens the browser's developer tools with the Elements tab in front. This is the live, rendered page: the actual HTML and CSS as it exists right now, including everything JavaScript has added since the page loaded.

Cmd + Option + C is the underrated one. It opens the tools already in picker mode, so your next click lands on the exact element you cared about instead of making you hunt for it in the tree.

Inspecting in Safari (enable the Develop menu first)

Safari is the one browser on a Mac that hides this feature by default. If you've ever wondered why right-clicking a page in Safari shows no Inspect Element option, that's why. You have to turn it on once:

1. Open Safari.
2. From the menu bar, choose Safari → Settings (Cmd + ,).
3. Click the Advanced tab.
4. Turn on Show features for web developers. On older macOS versions this reads Show Develop menu in menu bar.

That's it, and you only do it once. Now you have a Develop menu in the menu bar, and you can open the Web Inspector two ways:

• Cmd + Option + I opens the inspector on the current tab.
• Cmd + Option + C opens it in element-picker mode.

Right-clicking a page now also shows Inspect Element. Safari's Web Inspector looks a little different from Chrome's, but the idea is identical: an Elements view on the left, styles on the right.

Inspecting in Firefox on a Mac

Firefox needs no setup. Press Cmd + Option + I for the full toolbox, Cmd + Option + C for the picker, or right-click and choose Inspect Element. The panel is called the Inspector, and the layout (markup on one side, rules on the other) will feel familiar if you've used Chrome.

How to actually use the panel

Opening the tools is the easy part. Here's how to read what you see:

• Hover over a node in the Elements panel and the matching part of the page highlights. This is the fastest way to map code to what's on screen.
• Click a node and the Styles panel (Safari and Chrome) or Rules panel (Firefox) shows every CSS rule applying to it, top to bottom in cascade order.
• Edit text: double-click any text content in the markup and type. The page updates instantly.
• Edit CSS: click a value in the Styles panel and change it. Tweak a color, a font size, a margin, and watch the page react live.

This is genuinely useful for learning how a layout holds together, testing a copy change before you ship it, or debugging your own site.

Why your edits don't save

Here's the part that trips people up. Every change you make in Inspect Element is local to your browser only. It lives in memory, nobody else can see it, and it disappears the second you refresh the page or close the tab. You are not editing the real website, you're editing a temporary copy your browser is holding.

That's by design and it's a good thing: you can experiment freely without breaking anything. But it means Inspect Element is a viewing and testing tool, not a way to capture code you want to keep.

So what if you do want to keep it?

Seeing the code is easy. Copying it cleanly isn't.

This is where DevTools quietly fights you. You can right-click an element in the panel and choose Copy → Copy element (the HTML) or Copy styles (its computed CSS). But:

• The HTML references stylesheets that live elsewhere, so pasted markup arrives unstyled.
• "Copy styles" dumps one node's final values, missing inherited rules, child styles, hover states, and media queries.
• Class names on modern sites are often minified into noise like .a1b2c, so the structure is hard to read.
• You repeat all of this node by node. For one button it's fine. For a navbar or a pricing section, it's an afternoon.

If your goal is to reuse what you found rather than just look at it, manual copy-paste is the slow road.

The one-click alternative

MiroMiro is a free Chrome extension that does the part DevTools makes hard. You click any element or section on a live site and get its complete, clean code in one step:

• The HTML bundled with the CSS that actually applies to it, not just referenced.
• Clean Tailwind output (matching the site's utility classes) or plain HTML + CSS.
• The whole component, children and nested structure included, not one node at a time.

So inspecting tells you how something is built. The web inspector tool hands you the code to rebuild it. Paste it straight into a project, or feed it to Cursor, Claude, or v0 as real context instead of a screenshot the AI has to guess from.

Keep reading

• Inspect element on any device. The pillar guide covering Windows, Chromebook, iPhone, and Android.
• How to view and copy a website's source code. View Source, DevTools, and the clean-copy method.
• Turn any website into clean code. The one-click tool behind these workflows.

One less monthly bill in your stack

If you build for a living, you're probably already paying for Cursor, Claude, v0, maybe Figma. That's €75+/month, every month, before you ship anything. MiroMiro is the one tool in that workflow that doesn't have to be another recurring bill: