How to open inspect element on Chrome?

There are several ways to open Inspect Element in Google Chrome, and they all land you in the same place: the DevTools Elements panel. The quickest options are to right-click any part of a page and choose Inspect, or to use a keyboard shortcut. Press F12 or Ctrl + Shift + I on Windows and Linux, or Cmd + Option + I on Mac. To start straight in element-pick mode, use Ctrl + Shift + C (Windows/Linux) or Cmd + Shift + C (Mac). You can also open it from the three-dot menu under More tools > Developer tools.

Open Inspect Element with a right-click

Right-clicking is the most common way to open Inspect Element, and it has one big advantage over the keyboard shortcuts: it pre-selects the exact element you clicked, so you do not have to hunt for it in the DOM tree.

• Open the web page you want to examine in Chrome.
• Move your cursor over the element you are interested in, for example a button, heading, or image.
• Right-click that element. On a Mac trackpad, use a two-finger click or hold Control and click.
• Choose Inspect from the context menu.
• DevTools opens with the Elements panel in focus and the clicked node already highlighted in the DOM tree.

Keyboard shortcuts to open Inspect Element

Keyboard shortcuts are the fastest route once you know them. Chrome offers a different shortcut depending on whether you want DevTools to open on the last panel you used, jump straight into element-pick mode, or land on the Console.

• F12: a toggle that opens or closes DevTools on whichever panel you last had open. On some Mac keyboards you may need to hold Fn as well.
• Ctrl + Shift + I / Cmd + Option + I: opens DevTools on the last used panel, the same as F12.
• Ctrl + Shift + C / Cmd + Shift + C: opens DevTools and turns on the element picker so the next element you hover and click is inspected.
• Ctrl + Shift + J / Cmd + Option + J: opens DevTools focused on the Console, handy when you want to read errors before inspecting markup.

Open it from the Chrome menu

If you would rather not remember a shortcut, the three-dot menu gives you the same result in a few clicks.

• Click the three-dot menu (⋮) in the top-right corner of Chrome.
• Hover over More tools to expand its submenu.
• Click Developer tools.
• DevTools opens docked to the bottom or side of the window. Click the Elements tab if it is not already active.

Start directly in element-pick mode

Element-pick mode is what most people actually mean by "inspect element": you hover over the page, Chrome highlights whatever is under your cursor with its dimensions and box model, and a click locks that node into the Elements panel.

• Shortcut: press Ctrl + Shift + C (Windows/Linux) or Cmd + Shift + C (Mac) to open DevTools with the picker already active.
• Picker icon: if DevTools is already open, click the arrow-in-a-box icon in the top-left of the DevTools panel to toggle the picker on and off.
• Hover and click: move over any element to see its tag, size, and spacing overlay, then click to select it and reveal its HTML and styles.

Working in the Elements panel

Once Inspect Element is open, the Elements panel shows the live DOM on the left and the matched CSS in the Styles pane on the right. You can read and modify both, which is what makes it a debugging tool rather than just a viewer.

• Inspect HTML: click any node in the DOM tree to highlight it on the page and see its attributes.
• Edit markup live: double-click a node, or right-click and choose Edit as HTML, to change the markup in place.
• Edit CSS live: change property values in the Styles pane, add new declarations, or toggle classes and states such as :hover to test styling instantly.
• Responsive preview: press Ctrl + Shift + M or Cmd + Shift + M to open the device toolbar and inspect how elements reflow at different viewport widths.

Remember that every edit you make here is temporary. It lives only in your current tab and is discarded when you reload the page, so it is safe for experimenting but never a substitute for changing the actual source.

Inspect a page on Chrome for Android

You cannot open a full DevTools window inside Chrome on a phone, but you can inspect a mobile page remotely from your desktop using Chrome's built-in remote debugging.

• On the Android phone, enable Developer options, then turn on USB debugging.
• Connect the phone to your computer with a USB cable.
• In desktop Chrome, open chrome://inspect#devices and tick Discover USB devices.
• Accept the Allow USB debugging prompt that appears on the phone the first time.
• Your phone and its open Chrome tabs appear in the list. Click inspect next to the tab you want.
• A DevTools window opens on your desktop that mirrors and controls the page running on the phone.

If you only need to inspect a generic mobile layout rather than a specific device, the device toolbar inside DevTools is enough. For real device behaviour, see How to Inspect Elements on Android? for the on-device routes.

Which guide do you actually need?

"Inspect Element" and "DevTools" are often used interchangeably, but the task you are doing decides which page is most useful.

• Whole DevTools window: if you want the full toolset (Network, Performance, Sources) rather than just the Elements panel, see How to Open Chrome Developer Tools?
• A different browser: the shortcuts and menus differ outside Chrome. For Firefox, see How to Inspect Element on Firefox?
• An app like Discord: inspecting inside an Electron-based desktop app needs its own steps, covered in How to Inspect Elements on Discord?

Inspect across real browsers and devices

Inspecting an element on your own Chrome only tells you how it renders on your machine. The same markup can shift on a different Chrome version, on Safari, or on a specific Android handset. With TestMu AI's Real Device Cloud and browser grid, you can open and inspect the same page across thousands of real browser and OS combinations from your browser, no local installs needed, and catch layout issues that a single local Inspect Element session would never surface.

Frequently Asked Questions

What is the fastest shortcut to open Inspect Element in Chrome?

Press Ctrl + Shift + C on Windows or Linux, or Cmd + Shift + C on Mac. This opens DevTools and immediately activates the element picker, so the very next element you hover and click is selected in the Elements panel. F12, Ctrl + Shift + I, or Cmd + Option + I also open DevTools but without auto-starting the picker.

Why is the Inspect option missing from my right-click menu in Chrome?

The Inspect entry is hidden when developer tools are disabled by an enterprise or managed policy, or when a site overrides the context menu. Try a keyboard shortcut such as F12 or Ctrl + Shift + I instead. On a work device, a managed policy may block DevTools entirely, in which case you cannot re-enable it locally.

How do I open Inspect Element on a Mac?

Right-click (or Control-click) the page and choose Inspect, or press Cmd + Option + I to open DevTools. Use Cmd + Shift + C to open DevTools with the element picker active, and Cmd + Option + J to open it focused on the Console. On some keyboards F12 requires the Fn key.

Can I edit HTML and CSS after opening Inspect Element?

Yes. In the Elements panel you can double-click a node or choose Edit as HTML to change markup, and edit rules in the Styles pane to change CSS live. The changes are temporary and only affect your current view, so reloading the page reverts everything back to the source served by the site.

How do I inspect an element on Chrome for Android?

Enable USB debugging in Developer options on the Android phone, connect it to your computer over USB, then open chrome://inspect#devices in desktop Chrome, tick Discover USB devices, accept the authorization prompt on the phone, and click inspect next to the page. A full DevTools window opens that mirrors and controls the mobile tab.

How do I inspect the mobile or responsive view in Chrome?

With DevTools open, press Ctrl + Shift + M on Windows or Linux, or Cmd + Shift + M on Mac, to toggle the device toolbar. You can then pick a device preset, set a custom width and height, and inspect how elements reflow at that viewport. This previews layout but does not replace testing on real devices.

• How to Open Chrome Developer Tools?
• How to Inspect Elements?
• How to Inspect Element on Firefox?
• How to Inspect Elements on Discord?
• How to Inspect Elements on Android?