How to Inspect Element on Any Device or Browser (2026 Guide)

You spotted a button you like, a layout you want to understand, or a bug on your own page, and someone told you to "just inspect element." It's good advice. Inspect Element is the closest thing the web has to X-ray vision: it shows you exactly how any page is built, for free, in tools you already have.

The catch is that "inspect element" works differently depending on what you're using. A Mac and a Windows laptop use different keys. Safari hides it behind a setting. And on a phone, the honest answer is that there's no button to tap at all. This guide covers all of it accurately, then shows you what to do once inspecting isn't enough.

What "Inspect Element" actually does (and where it stops)

Inspect Element opens your browser's developer tools and points them at whatever you clicked. The panel that appears (DevTools, or Web Inspector in Safari) is split into two parts that do most of the work:

• The Elements panel shows the live DOM, the actual HTML structure of the page as it exists right now. Hover over a line and the matching part of the page highlights.
• The Styles panel shows every CSS rule applying to the element you selected, including which rules win and which get crossed out.

That combination answers the questions people open Inspect Element to ask: What font is this? Why is this text blue? Which class controls the layout? You can also change values and watch the page update instantly, which makes it a fast sandbox for testing a tweak before you commit it in your real code.

Here's the limit that trips people up. Everything you do in Inspect Element is local and temporary. You're editing a copy of the page that lives in your browser's memory, not the file on the server. Change the headline to "Hello," and it changes on your screen only. Refresh the page and it's back to normal. You cannot break a website by inspecting it, and you cannot save your edits to it either.

That distinction matters for the most common reason people inspect a page: they want to reuse something they see. Inspecting shows you the code, but it doesn't hand it to you in a form you can drop into your own project. More on that at the end.

If you want the raw HTML the server first delivered (before JavaScript runs), that's a different feature called View Source. The two are easy to confuse, so it's worth reading how to view and copy a website's source code to know which one you actually need.

How to inspect element on Mac, Windows, and Chromebook

The fastest way to open Inspect Element on any laptop or desktop is the same gesture everywhere: right-click the thing you're curious about and choose Inspect (or Inspect Element). The tools open with that exact element already selected, which saves you hunting for it.

If you prefer the keyboard, the shortcut depends on your machine:

• Mac: Cmd + Option + I
• Windows: F12 or Ctrl + Shift + I
• Chromebook (Chrome OS): Ctrl + Shift + I, or Search + Esc then choose the tools

A few practical notes. On Mac, Cmd + Option + I works in Chrome, Edge, and Firefox out of the box, but Safari needs one setting flipped first (covered below). On Windows, F12 sometimes collides with a laptop's function-key behavior, so if it does nothing, try Ctrl + Shift + I or Fn + F12. On a Chromebook the keys match Windows, since Chrome OS runs the same DevTools underneath.

Want the platform-specific walkthrough with every menu path and the quirks unique to macOS? See the full guide to inspect element on a Mac. For a complete reference of every key combination across browsers, see inspect element shortcuts and commands.

How to inspect element on iPhone, iPad, and Android

This is where most articles get vague or simply wrong, so here's the accurate version.

Mobile browsers do not have a built-in Inspect Element. There's no long-press menu on your phone's screen that opens DevTools. Tapping and holding gives you "copy" or "share," not "inspect." The reason is partly screen space and partly design: the tools that read and edit a page need a keyboard and a wide window to be usable.

What you do instead is inspect the phone's page from a computer. The page runs on the phone, but the developer tools run on the desktop, connected over a cable.

To inspect a page on an iPhone or iPad:

1. You need a Mac. This route is Apple-only, because the Web Inspector that does the work lives in desktop Safari.
2. On the iPhone, open Settings → Safari → Advanced and turn on Web Inspector.
3. On the Mac, open Safari, enable the Develop menu (see the next section), then connect the iPhone by cable.
4. In Safari's Develop menu you'll see your iPhone listed with its open tabs. Click a tab and Web Inspector opens on the Mac, showing that page's live code.

The step-by-step with screenshots and the common pairing snags is in the dedicated guide to inspect element on iPhone.

To inspect a page on Android:

1. On the phone, enable Developer options (tap the build number seven times in Settings → About), then switch on USB debugging.
2. Connect the phone to any desktop (Windows, Mac, or Linux) by cable.
3. On the computer, open Chrome and go to chrome://inspect.
4. Your phone's open tabs appear in the list. Click Inspect next to one and full Chrome DevTools opens on the desktop, wired to the live page on your phone.

So the short version: yes, you can inspect a phone's page, but never on the phone alone. iPhone needs a Mac, Android needs a desktop running Chrome.

How to inspect element in Chrome, Safari, and Firefox

The shortcuts above open the tools, but each browser has its own panel layout and one or two setup details worth knowing.

Chrome (and Edge). Nothing to enable. F12, Ctrl + Shift + I (Cmd + Option + I on Mac), or right-click → Inspect all work immediately. Chrome's tools are the most documented of the bunch; the official Chrome DevTools documentation is the reference most developers reach for. Edge uses the same engine, so everything here applies to it too.

Firefox. Also ready by default. Use the same shortcuts or right-click → Inspect (Firefox labels it "Inspect" as well). Its Inspector and Style Editor sit in slightly different places than Chrome's, but the concepts map one to one: live HTML on the left, applied CSS on the right.

Safari. This is the one that needs a toggle first, which is why so many Mac users think they "don't have" Inspect Element. To turn it on:

1. Open Safari and go to Settings → Advanced.
2. Tick Show features for web developers (older versions call it Show Develop menu in menu bar).
3. A Develop menu now appears in Safari's menu bar.

After that, right-click any element and choose Inspect Element, or press Cmd + Option + I. Safari's Web Inspector is also the tool you use for the iPhone workflow above, so enabling it here does double duty.

Editing text and styles with Inspect Element

Inspect Element isn't read-only. You can change the page live, which is genuinely useful for testing an idea before you write real code.

To edit text: double-click any text node in the Elements panel and type. The page updates as you type. This is handy for previewing a headline change or checking whether a longer label breaks the layout.

To edit styles: select an element, then in the Styles panel click a value and change it. Type a new color, bump the padding, switch display: block to flex, and the page reflows instantly. You can also add a brand-new property by clicking the blank space inside a rule.

A few things make this more powerful than it first looks:

• Toggle rules on and off with the checkbox next to each one, to see what a single property is actually doing.
• Use the device toolbar (the phone icon in Chrome's DevTools) to preview how the page responds at different screen widths.
• Inspect hover states by forcing :hover from the Styles panel, so you can read styles that only appear on interaction.

And then the part everyone learns the hard way: none of it saves. The moment you refresh, navigate away, or close the tab, every edit disappears. That's by design. You're working on a throwaway copy. It makes Inspect Element a safe place to experiment, and a frustrating place if you were hoping to keep what you built.

So if you tweaked a component into something you love, you still have to recreate it in your real codebase by hand. Which raises the obvious question.

From inspecting to reusing: getting the design as clean code

Here's the gap. Inspect Element is excellent at showing you how a page is built. It's poor at handing it over in a form you can reuse.

You can right-click an element in DevTools and choose Copy → Copy element (the HTML) or Copy styles (its computed CSS). For a quick reference, fine. But paste it into a fresh file and it almost never looks right, because:

• The HTML references stylesheets you didn't copy, so you get an unstyled skeleton.
• "Copy styles" dumps one node's final values, missing inherited rules, hover states, media queries, and the styles on every child element.
• You get a flat blob instead of the clean class structure the site actually uses.

For a single button that's a minor annoyance. For a hero section, a pricing table, or a navbar, you end up rebuilding it by hand, which can eat an afternoon. This is the same wall you hit when copying UI components into Cursor, Claude, or v0: the raw DevTools output is too messy to be useful context.

The fix is to extract the whole component as clean, complete code in one step instead of copying node by node. That's what a web inspector built for reuse does. MiroMiro is a free Chrome extension: click any element or section on a live page and get its HTML bundled with the CSS that actually applies to it, as clean Tailwind or vanilla CSS, with the real fonts, colors, and structure included. The kind of export-ready HTML and CSS you can paste without untangling it first.

So instead of inspect → copy element → copy styles → paste → rebuild, it's: click the section, copy, paste, done. You can reuse it directly or hand it to an AI tool as accurate context. If your goal is a whole page rather than one section, the same idea scales: turn any website into clean code from its URL.

Install MiroMiro for free and copy your first clean component in under 30 seconds.

Keep reading

• How to view and copy any website's source code. View Source, DevTools, and the clean one-click route, compared.
• How to copy UI components into Cursor, Claude, and v0. Turn what you inspect into real AI context.
• Design tools that export clean HTML and CSS. When you need code you can paste, not untangle.

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: