How to Inspect Any Element on a Page in Chrome (Ctrl+Shift+C)

Ctrl+Shift+C (Cmd+Shift+C on Mac) opens DevTools if it isn't already open and immediately activates the element-picker cursor, letting you hover over and click any visible element on the page to jump directly to its corresponding node in the Elements panel's HTML tree. **What happens on click**: clicking an element with the picker active highlights that element's HTML in the Elements panel, scrolled and expanded automatically to show it in context within the surrounding markup, and simultaneously shows its computed CSS styles in the adjacent Styles pane — giving you both 'what HTML is this' and 'why does it look the way it does' in one action. **Hovering before clicking**: while the picker is active, simply hovering (without clicking yet) overlays a visual highlight on the page showing that element's box model — its content area, padding, border, and margin, each shaded a different color — which is often enough information on its own to diagnose a spacing or sizing issue without even needing to click through to the full panel. **Difference from the generic Ctrl+Shift+I open**: pressing Ctrl+Shift+I just opens DevTools to whatever panel was last active, which might be Console, Network, or anything else depending on your last session — it does not activate the element picker. Ctrl+Shift+C specifically guarantees you land on the Elements panel with the picker tool already armed, which is faster when inspecting a specific visual element is your actual goal rather than a general DevTools visit. **Right-click alternative**: right-clicking any element on the page and choosing 'Inspect' from the context menu achieves the identical result with the mouse, useful if your hands are already off the keyboard, though the keyboard shortcut is faster for anyone doing this repeatedly during active development or debugging work. **A common follow-up action**: once you've located an element this way, the Styles pane lets you directly edit CSS properties live in the browser to experiment with a fix before committing it to your actual source files — changes made here are temporary and reset on page reload, making it a safe sandbox for testing layout or styling adjustments. **Related shortcuts**: Ctrl+Shift+I for general DevTools access without the picker pre-armed, and Ctrl+Shift+M to switch into device emulation mode for checking how the inspected element behaves at different screen sizes. **Mistake to avoid**: it's easy to assume that edits made live in the Styles pane after inspecting an element are saved somewhere — they are not. Reloading the page discards every change instantly, which is exactly the point (a safe sandbox), but it does mean you need to manually copy any CSS values you've landed on back into your actual source files before you navigate away or reload, or the experimentation is lost. **Inspecting elements inside iframes**: the element picker can select elements nested inside an iframe on the page, but the resulting Elements panel view switches context to that iframe's own document tree, which can look disorienting if you weren't expecting the jump — the breadcrumb trail at the bottom of the Elements panel shows which document context you're currently viewing, worth checking if the surrounding markup suddenly looks unfamiliar after a click. **Combining with the Console**: once an element is selected via the picker, typing `$0` into the Console panel refers to that exact selected element, letting you run JavaScript against it directly (checking its computed dimensions, event listeners, or triggering a method) without needing to write a full `document.querySelector` call to reference the same node manually.