How to Open Inspect Element (All Methods & Shortcuts)

You want to look under the hood of a web page. Maybe a layout is broken, maybe you spotted a button you'd like to recreate, maybe you just want to read the HTML. Inspect Element is the tool for that, and opening it takes about two seconds once you know how.

Here are all three ways to open it, the shortcuts for every browser, and what to do if the option is greyed out.

Method 1: right-click and choose Inspect

The fastest way. Right-click anywhere on a page (or right-click the specific thing you care about, like an image or a heading) and pick Inspect from the menu.

This opens the developer tools and jumps straight to the element you clicked, highlighted in the code. It's the method most people use because it skips the hunting. On a Mac trackpad without a right button, use Control + click or a two-finger tap.

Method 2: the keyboard shortcut

If your hands are already on the keyboard, the shortcut is quicker:

• Windows / Linux: F12 or Ctrl + Shift + I
• Mac: Cmd + Option + I

These open the developer tools to whatever panel you used last. To open it directly in inspect mode (cursor ready to pick an element), use Ctrl + Shift + C on Windows or Cmd + Option + C on Mac.

Method 3: the browser menu

No shortcut handy? Every browser keeps developer tools in its main menu.

In Chrome, Edge, or Brave, click the three-dot menu (⋮) in the top corner, then More Tools, then Developer Tools. In Firefox the path is the hamburger menu, then More Tools, then Web Developer Tools.

It's slower than the other two methods, but it always works and is handy when a shortcut is taken by another app.

Per-browser quick notes

Chrome, Edge, and Brave all share the same engine, so everything above behaves identically. Right-click and Inspect, F12, or the menu, take your pick.

Firefox uses its own tools but the same shortcuts (F12, Ctrl+Shift+I, Cmd+Option+I) and the same right-click Inspect.

Safari hides its developer tools by default. You have to turn them on once before Inspect Element appears (steps below).

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

The most common reason Inspect Element won't open is Safari with the Develop menu off. To fix it:

1. Open Safari, then from the menu bar choose Safari and then Settings.
2. Click the Advanced tab.
3. Tick Show features for web developers (older Safari calls this Show Develop menu in menu bar).

A Develop menu now appears, and right-clicking a page offers Inspect Element. The shortcut Cmd+Option+I works after this too.

If the option is greyed out in Chrome or Edge, the cause is usually one of two things. On a work or school computer, an admin policy may have disabled developer tools, and you generally can't override that yourself. Otherwise, a browser extension might be hijacking the right-click menu. Try the keyboard shortcut instead, or disable extensions one at a time to find the culprit.

What you see when it opens

The panel that appears is the browser's developer tools. It usually docks to the bottom or right of the window.

The tab you'll spend most time in is Elements (called Inspector in Firefox). It shows the live HTML of the page as a tree you can expand and collapse. A few basics:

• Hover over any line of code to highlight that element on the page.
• Click a line to select it. The Styles panel on the side then shows the CSS rules applied to it.
• Double-click text or an attribute to edit it on the spot and watch the page update live.

That last point trips people up, so it's worth stating plainly.

Your edits are temporary

Anything you change in Inspect Element happens only in your own browser, and only until you refresh. Reload the page and every edit vanishes. You're editing a local copy, not the real website.

That makes it a safe place to experiment. Want to see how a heading looks in red, or how a section reads with different copy? Change it, look, refresh to undo. You can't break the live site.

Seeing the code is easy. Reusing it isn't.

Inspect Element is perfect for looking and tinkering. The moment you want to actually take a component (copy a card, a navbar, or a whole section into your own project), it gets fiddly. DevTools copies one node at a time, and "Copy styles" gives you a flat dump that loses the cascade, the child elements, and the hover states. Paste it into a blank file and it rarely looks right.

That's the gap MiroMiro fills. Instead of copying node by node, you click a section on any live page and get its complete, clean code (HTML plus the CSS that actually applies, as Tailwind or vanilla CSS) in one step. It's a free Chrome extension that picks up where Inspect Element stops. You can try it on the web inspector or read how it turns any website into clean code.

Keep reading

• Inspect element shortcuts and commands. The full reference for every key and console trick.
• How to inspect element on any device. Phones, tablets, and remote debugging.
• How to view and copy any website's source code. View Source, DevTools, and the clean one-click way.

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: