Inspect Element Shortcuts & Commands (Chrome, Mac, Windows)

The fastest way to see how any website is built is one keypress away. The trouble is that the inspect element shortcut is different on Windows than on Mac, and a few browsers add their own quirks on top. This is the complete reference: every shortcut by operating system and browser, the commands worth knowing once DevTools is open, and what to do when the changes you make vanish on refresh.

The universal Inspect Element keyboard shortcuts

Most browsers share the same keys because Chrome, Edge, and Brave all run on the same engine. Firefox matches them too. Safari is the one exception, and even it uses the same shortcut once you flip a setting. Here is the full grid.

*Safari needs the Develop menu enabled first. More on that below.

There are two distinct actions worth keeping straight. F12 and Ctrl+Shift+I (or Cmd+Option+I) open the DevTools panel. Ctrl+Shift+C (or Cmd+Option+C) opens DevTools and immediately turns on the element picker, so the very next thing you click on the page gets selected and highlighted in the Elements tab. If you already know which element you want, the picker shortcut saves a step. Chrome keeps a full list in its DevTools shortcuts docs.

For a deeper primer on what DevTools actually is, MDN has a clear overview of browser developer tools.

How to open, enable & turn on Inspect Element

If a keyboard shortcut feels fiddly, every browser gives you a menu route too.

Chrome, Edge, Brave: click the three-dot menu, then More tools → Developer tools. Or just right-click any spot on the page and choose Inspect. Right-clicking is often the quickest path because it opens DevTools with that exact element pre-selected.

Firefox: open the hamburger menu, then More tools → Web Developer Tools, or right-click and choose Inspect.

Safari (the one that needs setup): Safari hides its developer tools by default. To turn on inspect element:

1. Open Safari → Settings (or press Cmd+,).
2. Click the Advanced tab.
3. Check Show features for web developers (older versions call this Show Develop menu in menu bar).
4. A new Develop menu appears in the menu bar. Now Cmd+Option+I works, and right-click → Inspect Element is available.

If inspect element is greyed out or missing: the usual cause on a work or school computer is a device-management policy that disables DevTools in Chrome or Edge. There is no in-browser fix for that; it is controlled by your IT admin. On Safari, a missing option just means the Develop menu is not enabled yet, so run through the four steps above. Some websites also try to block the right-click menu with a script. That only disables the context menu, not the tools themselves, so the keyboard shortcut or the browser menu still opens DevTools. If you need to do this from a tablet or phone, our guide on how to open inspect element covers the connected-device routes step by step.

Useful DevTools commands once it's open

The shortcut gets you in. These commands are what make the panel actually fast to use.

• Search the DOM with Ctrl+F (Cmd+F on Mac). With the Elements panel focused, this opens a search box that scans the live HTML. Type a class name, an ID, some text content, or even a CSS selector, and it jumps to matching nodes. This is the fastest way to find a buried element without endless scrolling.
• The element picker, Ctrl+Shift+C (Cmd+Option+C). Toggles the cursor-with-crosshair mode. Hover over the page and DevTools highlights each element with its size and spacing; click to lock it into the Elements panel. It is the same action as right-click → Inspect, just keyboard-driven.
• Edit as HTML. Right-click any node in the Elements panel and choose Edit as HTML to rewrite the raw markup of that element and its children inline. Press Esc's sibling, Ctrl+Enter, to commit, or click away.
• The device toolbar, Ctrl+Shift+M (Cmd+Shift+M). This toggles responsive design mode. You get a resizable viewport with presets for common phones and tablets, so you can check how a layout reflows without a real device. Pair it with the picker to inspect the mobile version of any element.
• Copy options. Right-click a node and open the Copy submenu for Copy element (the HTML), Copy styles (its computed CSS), or Copy selector (a CSS path to it).

That last one points at the real limitation, which the next two sections get into.

Editing text & styles with Inspect Element

One of the most satisfying tricks DevTools allows is live editing. Double-click any text in the Elements panel and retype it, and the page updates instantly. Click a value in the Styles panel on the right and change a color, a font size, or a margin, and you watch it apply in real time. People use this to preview copy changes, test a new brand color, or screenshot a "what if" version of a competitor's page.

Here is the catch that surprises everyone the first time: none of it saves. Refresh the tab and every edit is gone. That is not a bug. DevTools is editing your browser's local, in-memory copy of the page, not the files sitting on the server. You have full read-and-edit access to what your browser downloaded, and zero write access to the source. The moment the page reloads, the original code comes back down from the server and overwrites your tweaks.

So inspect element is a brilliant viewer and a temporary sandbox. What it is not is a way to take anything with you. If you only wanted to see the code or fake a screenshot, you are done. If you wanted to reuse what you found, that is a different problem. The same gap shows up when you try to view and copy a website's source code: seeing it is easy, keeping it cleanly is not.

Make edits permanent: export what you change as real code

The reason a DevTools edit cannot survive a refresh is the reason copy-pasting from it rarely works either. Copy styles hands you one node's flat computed values, not the cascade, not the child elements, not the hover states or media queries. So you paste it into a new file and get an unstyled skeleton or a blob of inline CSS that needs untangling. For a single button it is fine. For a hero, a pricing table, or a navbar it is an afternoon of reconstruction.

The fix is to extract the live element as clean, self-contained code in one step instead of node by node. That is exactly what MiroMiro does. It is a free Chrome extension and a web inspector that lets you click any element on a page and get:

• The HTML plus the CSS that actually applies to it, bundled together rather than referenced
• Clean Tailwind output or vanilla HTML and CSS, whichever you prefer
• The whole component, including nested children and real structure, not one node at a time
• True colors, fonts, and spacing values, alongside any SVGs and assets

So the workflow becomes: use the inspect element shortcut to find the section, then export it as code you can actually keep. From there you can drop it into your own project, or paste it into Cursor, Claude, or v0 as accurate context so the AI adapts real code instead of guessing from a screenshot. If you want the bigger picture, turn any website into clean code covers the full one-click path.

Shortcuts let you inspect anything. Reusing what you inspect, cleanly, is the part the keyboard cannot do. And if you ever need to inspect from a phone or tablet where there is no F12 key, how to inspect element on any device or browser walks through every platform.

One less monthly bill in your stack

If you build for a living, you are probably already paying for Cursor, Claude, and v0. That is €75+/month, every month, before you ship anything. MiroMiro is the one piece of that workflow that does not have to be another recurring bill. It is €9/month, or €69 one-time for one of the 125 lifetime spots: