Layoutinspektör för Flexbox och Grid

Chrome DevTools markerar flexbehållare med märkningen "flex" bredvid deras DOM-nod i Elements-panelen. Klicka på märkningen för att växla Flexbox-överlägget — färgade linjer som visar huvudaxel, tväraxel, objektens gränser och avstånd.

Grid-behållare visar märkningen "grid". Klicka på den för att växla grid-överlägget: färgade linjer för kolumner, rader och avstånd. Permanenta överlägg (fästa i Layout-panelen) förblir synliga när ni rullar eller ändrar visningsområdets storlek.

DevTools → Elements → fliken Layout listar alla flex- och grid-behållare på sidan. Om ni klickar på namnet på en behållare väljs den i DOM:en och dess överlägg aktiveras eller inaktiveras. Överläggets utseende (linjefärg, etikettens synlighet och spårstorlekar) kan konfigureras här.

Överlägget visar spårnamn och storlekar när "Show track sizes" är aktiverat. Inneboende storlekar (auto, min-content, max-content) och bråkdelar (fr) visar sina upplösta pixelvärden — vilket tydliggör hur fr-enheter delar upp det tillgängliga utrymmet.

Välj ett flexelement (ett barn till en flexcontainer). På Styles-panelen visas en expansion av förkortningen flex — flex-grow, flex-shrink och flex-basis. Överlägget markerar elementets storlek längs huvudaxeln, dess basstorlek samt eventuell tillväxt eller krympning som har tillämpats.

Gridcontainrar med grid-template-areas visar överlägg för namngivna områden. Varje namngivet område är märkt och färgkodat. Det gör det enkelt att kontrollera att tilldelningarna för grid-area motsvarar den avsedda layoutmallen.

DevTools markerar subgridcontainrar tydligt. Deras spårlinjer linjerar med spåren i det överordnade gridet — överlägget visar denna linjering visuellt och bekräftar att subgrid-elementen deltar i det överordnade gridets koordinatsystem.

Feljusterade element beror ofta på felaktiga värden för justify-content, align-items eller align-self. Flex/grid-överlägget visar elementens positioner i förhållande till axellinjerna. Prova att växla mellan olika justeringsegenskaper på Styles-panelen och observera förändringarna i överlägget i realtid.

Överlägget visar gap-avståndet som färgade band mellan elementen. Det gör det enkelt att bekräfta gap-värden och avgöra om avståndet kommer från gap (korrekt) eller från margin (som kan kollapsa oväntat i flexrader).

Gridöverlägget skiljer mellan implicita spår (som skapas automatiskt för element som hamnar utanför det definierade området) och explicita spår (som definieras i grid-template). Streckade linjer markerar implicita spår. Om innehållet skapar oväntade implicita spår visar överlägget omedelbart mönstret för innehållets överskridning.

Kombinera Layout Inspector med Device Mode. Ändra storlek på visningsområdet och se hur flexradbrytning och gridspår med auto-fill/auto-fit flödar om i realtid. På så sätt upptäcks problem i responsiva layouter tidigare än när ett webbläsarfönster ändras manuellt.

Flexbox- och Grid Layout Inspector i DevTools visualiserar axellinjer, spårstorlekar, gap-avstånd, namngivna områden och implicita spår som interaktiva överlägg. Tillsammans med Layout-panelen för hantering av överlägg gör det felsökning av komplexa CSS-layouter snabbare och mer intuitiv än att enbart läsa CSS.