How to Inspect Element: Shortcuts for Every Browser & Device (2026)

Quick answer: right-click the thing you want to look at and choose Inspect. That works in every desktop browser and opens the developer tools with that element already selected. If you prefer the keyboard, it's F12 or Ctrl + Shift + I on Windows, Linux and Chromebook, and Cmd + Option + I on Mac. Safari is the one exception: it hides the option until you flip one setting.

That covers most people. The rest of this page is the detail the short answer skips: the exact keys for each browser and OS, what to do on a Chromebook or a phone, why the option is sometimes greyed out, the DevTools commands worth learning, and what to do when you want to keep the code you found rather than just look at it.

Inspect element shortcuts for every browser

The shortcut to open the developer tools in each browser and operating system:

*Safari only after you enable its developer features (steps below). On ChromeOS, "Linux app only" means it runs if you've turned on the Linux development environment; most people inspect with Chrome there.

Three more shortcuts are worth memorising, because they skip a step:

The difference between the first two rows matters. F12 and Ctrl+Shift+I open DevTools on whatever panel you used last. Ctrl+Shift+C opens it and switches on the picker, so you hover the page, see each element outlined with its size, and click to select one. It's the keyboard version of right-click → Inspect. Chrome and Firefox also accept Cmd+Option+C for this on Mac, but in Safari that combo opens the JavaScript console, so Cmd+Shift+C is the one that works in all of them.

The full lists live in the Chrome DevTools shortcuts docs and Firefox's DevTools keyboard shortcuts.

How to open Inspect Element: three ways

1. Right-click → Inspect. The fastest, because it lands on the exact element you clicked. Right-click the specific heading, image or button you care about, not just empty space. On a Mac trackpad without a right button, use Control + click or a two-finger tap.

2. The keyboard shortcut. From the tables above. Handy when a site blocks the right-click menu: a script can kill the context menu, but it can't stop the browser's own shortcut.

3. The browser menu. Slower, but always there:

• Chrome, Brave: three-dot menu (⋮) → More tools → Developer tools
• Edge: three-dot menu (…) → More tools → Developer tools
• Firefox: menu (☰) → More tools → Web Developer Tools
• Safari: Develop → Show Web Inspector (once the Develop menu is on)

How to inspect on Chrome (and Edge, Brave, Opera)

Chrome needs no setup. Right-click → Inspect, F12, Ctrl+Shift+I or Cmd+Option+I all work out of the box. Edge, Brave and Opera run on the same Chromium engine, so their tools look and behave the same, panel for panel. The Chrome DevTools documentation is the reference for all four.

Two small quirks. Edge asks "Open DevTools?" the first time you press F12, with a checkbox to stop asking. And on some Windows laptops F12 is a media key by default, so if it does nothing, try Fn + F12 or just use Ctrl+Shift+I.

Firefox and Safari

Firefox is ready by default and uses the same keys as Chrome. Its tools have different names: the HTML tree is the Inspector rather than Elements, and the styles sit in the Rules pane. The concepts map one to one: live HTML on the left, applied CSS on the right.

Safari is why so many Mac users think they "don't have" Inspect Element. It's there, just switched off. To turn it on:

1. Open Safari and choose Safari → Settings (Cmd + ,).
2. Click the Advanced tab.
3. Tick Show features for web developers (older versions call it Show Develop menu in menu bar).

A Develop menu appears in the menu bar, right-click now offers Inspect Element, and Cmd+Option+I opens Web Inspector. Turning this on is also step one for inspecting an iPhone, so it does double duty.

How to inspect element on a Chromebook

Press Ctrl + Shift + I. That's the one to remember, because Chromebook keyboards have no F12 key. Right-clicking works too: two-finger tap on the touchpad, or Alt + click, then choose Inspect. You get the full Chrome DevTools, exactly as on Windows.

If nothing happens and Inspect is missing from the menu, the Chromebook is almost certainly managed. Schools and companies commonly disable developer tools on the devices they hand out. Open chrome://policy and look for DeveloperToolsAvailability: a value of 2 means DevTools is blocked, and only the admin can change it. There's no setting or Chrome flag that gets around it from the user side.

How to inspect element on Mac

Same three routes as everywhere else: right-click → Inspect, Cmd + Option + I, or the browser menu. Chrome, Edge, Brave and Firefox work immediately; Safari needs the Develop menu turned on first (above). The dedicated guide to inspect element on a Mac covers the macOS specifics: Safari's setup in detail, Firefox on Mac, and finding your way around the panel.

How to inspect element on iPhone, iPad and Android

Mobile browsers have no built-in Inspect Element. Long-press gives you copy or share, never inspect. What you do instead is inspect the phone's page from a computer: the page runs on the phone, the tools run on the desktop, connected by cable.

iPhone and iPad need a Mac. Turn on Settings → Safari → Advanced → Web Inspector on the phone, enable Safari's developer features on the Mac, connect the cable, and the phone's open tabs appear in Safari's Develop menu. The full walkthrough, with the pairing snags, is in how to inspect element on iPhone.

Android works with any desktop running Chrome:

1. On the phone, enable Developer options (tap Build number seven times in Settings → About phone), then turn on USB debugging.
2. Connect the phone to your computer by USB and accept the debugging prompt on the phone.
3. On the computer, open Chrome and go to chrome://inspect.
4. Your phone's open tabs appear. Click Inspect under one, and DevTools opens on the desktop wired to the live page.

If you only want to see how a site looks on a phone, you don't need a phone at all: the device toolbar (Ctrl+Shift+M / Cmd+Shift+M in Chrome) simulates phone and tablet screen sizes on your desktop.

How to enable Inspect Element when it's greyed out or missing

Work down this list:

• Safari: the developer features are off. Turn them on in Settings → Advanced (steps above). This is the cause most of the time on a Mac.
• Chrome or Edge on a work or school device: a management policy has disabled developer tools. Check chrome://policy (or edge://policy) for DeveloperToolsAvailability. You can't override it yourself.
• One website only: the site is blocking right-click with JavaScript. That disables the menu, not the tools. Use the keyboard shortcut or the browser menu.
• Right-click shows no Inspect anywhere: an extension may be replacing the context menu. Try the shortcut, or disable extensions one at a time.
• iPhone or Android: there is nothing to enable on the phone alone. Use the cable routes above.

What you're looking at once it opens

The panel is your browser's developer tools, docked to the bottom or right of the window. Two parts do most of the work:

• Elements (Inspector in Firefox) shows the live DOM, the page's HTML as it exists right now. Hover a line and the matching part of the page highlights. Click it to select it.
• Styles (Rules in Firefox) shows every CSS rule applying to the selected element, including which rules win and which get crossed out because something overrides them.

Together they answer the questions people open Inspect Element to ask: what font is this, why is this text blue, which class controls this layout.

Inspect Element is not the same as View Source (Ctrl+U, Cmd+Option+U on Mac). View Source shows the HTML the server first sent, before JavaScript runs. Inspect shows the page after JavaScript has built it. On a React or Vue site, View Source can be nearly empty while Inspect shows everything. More on choosing between them in how to view and copy a website's source code.

DevTools commands worth knowing

The shortcut gets you in. These make you fast once you're there (Chrome keys shown; Firefox is close on most):

• Search the DOM: Ctrl+F (Cmd+F) with the Elements panel focused. Type text, a class, an ID or a full CSS selector, and it jumps to matches. The fastest way to find a buried element.
• Edit text: double-click any text in the Elements panel and type. Good for checking whether a longer headline breaks the layout.
• Edit as HTML: right-click a node → Edit as HTML to rewrite it and its children. Ctrl+Enter (Cmd+Enter) commits.
• Change styles live: click any value in Styles and type a new one, or click empty space inside a rule to add a property. Untick a rule's checkbox to see what it was doing.
• Force hover and focus states: the button in the Styles pane lets you lock an element into :hover, :focus or :active, so you can read styles that only appear on interaction.
• Device toolbar: Ctrl+Shift+M (Cmd+Shift+M) toggles responsive mode with phone and tablet presets.
• Command menu: Ctrl+Shift+P (Cmd+Shift+P) in Chrome, Edge and Brave. Type "screenshot" to capture just the selected node or the full page, or "disable JavaScript" to see what a site looks like without it.
• Copy: right-click a node → Copy for Copy element (HTML), Copy styles or Copy selector.

That last one is where most people hit a wall, and it's the same wall the next section is about.

Your edits don't save (and why that matters)

Everything you change in Inspect Element happens in your browser's in-memory copy of the page. Refresh, navigate away or close the tab, and the original comes back down from the server. That's by design. You have full read-and-edit access to what your browser downloaded and zero write access to the site itself. You can't break a website by inspecting it, and you can't fake a permanent change to it either.

That makes it a great sandbox for testing an idea and a frustrating place if you wanted to keep something. Which is the usual reason people inspect a page in the first place: they saw a button, a pricing table or a hero they want to reuse.

From inspecting to reusing: getting the design as clean code

Inspect Element is excellent at showing you how a page is built and poor at handing it over. Copy element and Copy styles look like the answer, but paste the result into a fresh file and it rarely looks right:

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

For one button it's a minor annoyance. For a navbar or a pricing section it's an afternoon of rebuilding by hand, and the same mess is what you end up feeding an AI tool when you copy UI components into Cursor, Claude or v0.

This is the gap we built MiroMiro for. It's a Chrome extension and website inspector that sits on top of any live page. Hover an element and you see its fonts, colors, spacing and CSS without opening DevTools. One reviewer put it this way:

When you want to keep something, click the section and export it as HTML bundled with the CSS that actually applies to it, as clean Tailwind or vanilla CSS, nested children and real fonts included. Instead of inspect → copy element → copy styles → paste → rebuild, it's click, copy, paste. For a whole page rather than one section, turn any website into clean code from its URL.

What's free and what isn't: MiroMiro is free to install, and the first 3 days unlock everything. After that the free plan keeps the inspecting side (CSS, fonts and colors on hover, live style editing) plus unlimited downloads of the page's images, SVGs, fonts and videos. Copying CSS and Tailwind and exporting sections as code are part of Pro.

If you're doing this from a script or an AI agent rather than a browser, the same engine is available as an extraction API that returns any URL's code, design tokens and assets as JSON.

Keep reading

• How to inspect element on a Mac. Safari's Web Inspector, menus and macOS quirks.
• How to inspect element on iPhone. Pairing an iPhone or iPad with Safari, step by step.
• How to view and copy any website's source code. View Source, DevTools and the one-click route, compared.
• How to clone a website, step by step. When you want a whole page, not one component.
• The best tools to export websites to clean code. When you need code you can paste, not untangle.