On this page
Browser DevTools for CSS: Inspect, Debug & Edit Styles Live
Browser DevTools for CSS: Your Most Powerful Debugging Tool
Browser DevTools (Developer Tools) are built into Chrome, Edge, Firefox and Safari. For CSS work, they let you inspect any element, see exactly which rules apply, edit styles live and debug layout problems in seconds. Learning DevTools for CSS early will save you countless hours.
How to Open DevTools
| Method | Windows / Linux | Mac |
|---|---|---|
| Inspect Element | Right-click > Inspect | Right-click > Inspect |
| Open DevTools | F12 or Ctrl+Shift+I | Cmd+Option+I |
| Select an element | Ctrl+Shift+C | Cmd+Shift+C |
In Safari, first enable the Develop menu in Settings > Advanced.
The Elements (Inspector) Panel
The Elements panel shows the live DOM, which is the HTML after the browser has parsed and modified it. You can click any node, edit text, change attributes, add or remove classes, and even drag elements to reorder them. Changes are temporary and disappear on reload.
The Styles Pane
The Styles pane lists every CSS rule that matches the selected element, from highest to lowest priority.
- Strikethrough means a declaration was overridden by a more specific or later rule.
- Warning icons flag invalid or unsupported properties and values.
- Checkboxes let you toggle each declaration on and off.
- Click any value to edit it; use the Up and Down arrow keys to nudge numbers (hold Shift for steps of 10).
- Click the + button to add a new rule with a selector.
- File and line links take you to the exact source line in your stylesheet.
- :hov and .cls buttons force states such as :hover, :focus and :active, or add classes.
The Computed Pane
The Computed pane shows the final calculated value of every property after the cascade. Use the filter box and click the arrow next to a property to see which rule set it. This is the best way to answer 'why is this element 24px wide?'.
The Box Model Diagram
DevTools draws the box model (content, padding, border, margin) with numbers. Hover over the diagram to highlight each area on the page, and double-click a value to edit it. It is the fastest way to solve spacing and overflow issues.
Color Picker and Value Helpers
- Click a color swatch to open the picker with an eyedropper tool.
- Shift+click a swatch to switch between HEX, RGB and HSL formats.
- The picker shows a contrast ratio to help check accessibility (WCAG).
- Shadow, font and easing editors help tune box-shadow, fonts and animation curves visually.
Flexbox and Grid Debugging
In the Elements panel, elements using display: flex or display: grid show a badge. Click it to overlay the layout on the page: you can see grid lines, gaps, areas and flex item alignment. The Layout pane lists all grids and flex containers, so you can toggle overlays quickly. Container queries and subgrid are also labeled in modern DevTools.
Responsive Design Mode (Device Toolbar)
Press Ctrl+Shift+M (Cmd+Shift+M on Mac) to toggle the device toolbar. You can:
- Pick preset phones and tablets or enter custom dimensions.
- Drag the viewport edges to find where your layout breaks.
- Throttle network speed and simulate touch.
- See media query breakpoints as colored bars above the viewport.
Emulating User Preferences (Rendering Tab)
Open the Command Menu (Ctrl+Shift+P) and type 'Rendering'. You can emulate prefers-color-scheme (dark mode), prefers-reduced-motion, print media, forced colors and vision deficiencies (such as color blindness). These are essential for modern, accessible CSS.
Network and Sources Panels for CSS
- Network panel: confirm the stylesheet loads with status 200 and check for 404 errors from wrong paths.
- Sources panel: edit CSS files directly and set up Workspaces or Local Overrides so edits persist.
- Coverage tool: find unused CSS to reduce file size.
Saving Your Changes
Live edits in DevTools are not saved to your files. When you find the right fix, copy the declarations into your CSS file, or use the Changes tab, which lists every edit you have made in the session.
A Practical Debugging Workflow
- Right-click the problem element and choose Inspect.
- Check the Styles pane: is your rule listed? Is it crossed out?
- If missing, check the selector and file path. If crossed out, check specificity and order.
- Look at the Computed pane and the box model for unexpected size, margin or display values.
- Toggle declarations off one by one to find the culprit.
- Resize with the device toolbar to test responsiveness.
- Copy the fixed code back into your stylesheet and reload.
Common Problems and What DevTools Shows
- Style not applying - rule is missing or crossed out (specificity or typo).
- Unexpected gap - margin collapse or default browser margin visible in the box model.
- Horizontal scrollbar - an element wider than the viewport; hover nodes to find it.
- Text unreadable in dark mode - emulate prefers-color-scheme and check contrast.
Key Takeaways
- Right-click > Inspect is the fastest way to see and edit styles.
- Styles shows the rules; Computed shows the final values.
- Use the box model, layout badges and device toolbar to debug layout.
- Live edits are temporary: copy fixes back into your code.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
The button should have a green background, but it stays gray. Use the DevTools Styles pane (or read the code) to find out why the rule is overridden, then fix the CSS without using !important.
Press Run to execute.
Show expected output
The button has a green background.This is a self-check — compare your result with the expected output above.
Inspect the box below. In a comment, write the content width, padding, border and margin values shown in the DevTools box model diagram, then change the padding to 30px.
Press Run to execute.
Show expected output
Content 200px, padding 20px, border 5px, margin 15px; then padding updated to 30px.This is a self-check — compare your result with the expected output above.
Was this page helpful?