How to Inspect and Debug CSS with Browser DevTools

Browser developer tools let you see exactly which CSS rules apply to any element, experiment with changes in real time, and find out why a style is being overridden or ignored. This guide walks through the core workflow: opening DevTools, inspecting an element, editing styles live, and using the key panels to trace layout and specificity problems. No prior experience with DevTools is needed, just a modern browser like Chrome, Edge, Firefox, or Safari.

What You’ll Need

A modern desktop browser (Chrome, Edge, Firefox, or Safari)
A webpage with CSS you want to inspect (your own file or any public site)
Basic familiarity with CSS selectors and properties

Step-by-Step

Open DevTools. Right-click any element on the page and choose Inspect (Chrome/Edge/Firefox) or Inspect Element (Safari). Alternatively, press F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac). The panel opens docked to the side or bottom.
Select an element. Click the cursor icon (top-left of DevTools) and then click the element you want to inspect on the page. The HTML panel highlights the matching node, and the Styles pane below shows its computed CSS.
Read the Styles pane. In the Elements (or Inspector) tab, the right-hand Styles sub-panel lists every CSS rule that applies to the selected element, ordered from highest specificity at the top to lowest at the bottom. Each rule shows its selector and the file/line it came from.
Toggle rules on and off. Click the checkbox next to any declaration to temporarily disable it. This instantly shows how the element looks without that rule — the fastest way to test which property is causing a problem.
Edit values live. Click a property value (like padding: 10px) and type a new number. Press Enter to apply it. Use the up/down arrow keys to increment or decrement numeric values by 1, or hold Shift to change by 10. The page updates immediately.
Add new declarations. Click the + button in the Styles pane (or click the blank line at the end of a rule) to add a brand-new property. Type the property name, press Tab, type the value, and press Enter. This is ideal for testing a fix before editing your source file.
Check the Computed tab. The Computed (or Calculated) sub-panel shows the final resolved value for every property — including inherited values and those set by shorthand rules. Expand a property to see which specific rule contributed to it.
Trace specificity conflicts. When a style isn’t applying, look at the Styles pane for the rule that is winning. A crossed-out declaration means it lost the specificity battle. Compare selectors: .class beats element, #id beats .class, and inline styles beat everything except !important.
Use the Box Model diagram. At the top of the Styles pane, a colored diagram shows margin, border, padding, and content dimensions in pixels. Hover over a section to highlight that area on the page. Click a value to edit it directly.
Inspect layout with the Layout tab. For flexbox or grid containers, open the Layout tab (next to Computed). It overlays lines and gaps on the page, showing how items align and which tracks are taking space. Toggle the overlay for each container.
Test responsive breakpoints. Click the device toolbar icon (a small phone/tablet symbol) to switch to responsive mode. Drag the viewport edges to see how your media queries behave at different widths. The Styles pane shows which media query rules are active.
Copy the fix back to your source. Once you find the working change, right-click the rule in the Styles pane and choose Copy declaration or Copy rule. Paste it into your CSS file, then reload the page to confirm.

Common Mistakes

Editing the wrong element. Clicking near an element often selects a parent. Check the highlighted outline in the page — it should exactly cover the element you mean.
Forgetting specificity. Adding a rule that loses to an existing selector does nothing. Always check which rule is actually winning in the Styles pane before assuming your new CSS is broken.
Changing values in the wrong pane. The Computed tab is read-only. Edit only in the Styles pane.
Relying on !important as a first fix. It works, but it makes future overrides harder. Use it only when you truly need to beat a third-party style.
Not checking the source file. DevTools changes are temporary — they vanish on refresh. Always copy your final fix back into your actual stylesheet.

Tips

Press Ctrl+Z (or Cmd+Z) inside DevTools to undo your last style edit — it works for changes you made in the Styles pane.
Use the Color picker (the small color swatch next to any color value) to visually choose a new color and see it apply instantly.
Right-click a rule and choose Show all pseudo-classes to force :hover, :focus, or :active states on an element without hovering.
In the Styles pane, hold Alt (or Option) while clicking a property name to cycle through its shorthand and longhand forms.
Use the Sources tab to open your actual CSS file, edit it there, and save with Ctrl+S — the browser applies the change without a full reload (works with local files and some dev servers).
For a quick audit, open the Console and type $$('selector') to list all elements matching a selector, then inspect any of them.

Troubleshooting

DevTools won’t open. Try the keyboard shortcut again, or right-click and choose Inspect. If nothing happens, restart the browser. In Safari, you must first enable the Develop menu in Safari > Settings > Advanced > “Show features for web developers.”

My CSS change doesn’t show any effect. First, confirm you edited the correct element (check the highlighted outline). Then look at the Styles pane — if your declaration is crossed out, another rule is overriding it. Increase specificity or move the rule later in your stylesheet. Also check that the property name and value are valid (a red squiggle under the value indicates an error).

The element looks different from what I set. Check the Computed tab for the actual final value. A parent rule might be overriding yours, or a CSS variable might be resolving to something unexpected. Expand the property to see the source rule.

Media query styles aren’t applying. Make sure the viewport width actually matches your breakpoint. Open the device toolbar and drag the width slider. Also verify the media query syntax in your stylesheet — a missing min-width or a typo in the unit (px vs em) will silently fail.

Changes disappear after refresh. That’s expected — DevTools edits are temporary. Copy the final rule back into your source file. If you want to keep working in DevTools, use the Sources tab to edit the actual CSS file and save it.

Frequently Asked Questions

Why does my CSS rule show as crossed out in DevTools? A crossed-out declaration means another rule with higher specificity, or a later rule with equal specificity, is overriding it. The winning rule is listed above it in the Styles pane. Increase your selector’s specificity or move your rule later in the file.

How do I see the exact pixel size of an element? Select the element, then look at the Box Model diagram at the top of the Styles pane. It shows width, height, padding, border, and margin in pixels. The Computed tab also lists width and height as resolved values.

Can I edit CSS in DevTools and save it permanently? Yes, if you open your actual CSS file in the Sources tab, edit it there, and press Ctrl+S (Cmd+S on Mac). For local files, the browser saves the file directly. For live websites, you’d need a dev server or a tool like a local proxy — DevTools alone won’t modify files on a remote server.

What does the purple rectangle in the Box Model mean? The purple area represents the content box (the element’s width and height). Blue is padding, yellow is margin, and orange is the border. Hovering each section highlights that region on the page.

How do I inspect a pseudo-element like ::before or ::after? In the Styles pane, click the :hov (or Force element state) button, then check the box for ::before or ::after. The pseudo-element appears in the HTML tree and its styles become editable.

Why is my hover style not showing when I inspect? Hover styles only apply while the mouse is actually over the element. To force the state, click the :hov button in the Styles pane and check the :hover box. The hover rule then stays active while you edit it.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →