# Debugging Layouts with Developer Tools

A seven-step routine for "why does it look like that?", using the Computed pane, the box model diagram, the flex and grid overlays, switching rules off, forcing :hover and :focus, and the outline trick.

![Cheat sheet: Debugging Layouts with Developer Tools](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/56d863c0750c4dd6942675e8cadcfb39.webp)

- Category: CSS
- Level: Journeyman
- Tags: Box model, Computed value, CSS, Developer Tools, Outline, Pseudo-class, web-development
- Updated: November 1, 2026

Source: https://www.ask-codey.com/cheat-sheets/css-debugging-with-devtools-cheat-sheet