Dicas do DevTools: como inspecionar e depurar o flexbox CSS

Sofia Emelianova
Sofia Emelianova

O Chrome DevTools torna a depuração de layouts de flexbox CSS intuitiva. O painel Elements oferece um editor de Flexbox sensível ao contexto e uma sobreposição personalizável.

Assista ao vídeo para saber como:

  • Use o Editor de Flexbox para mudar as propriedades do Flexbox com um clique em um botão, em vez de digitá-las.
  • Alterne a sobreposição de flexbox na janela de visualização para conferir as mudanças que você fez imediatamente.
  • Use a seção Elements > Layout > Flexbox para ver uma lista de todos os elementos e localizá-los na árvore DOM. Além disso, é possível personalizar as cores da sobreposição aqui.

Para saber mais sobre o flexbox do CSS em geral, consulte Aprender CSS > Flexbox.

Para uma experiência de depuração mais prática no DevTools, siga o tutorial Inspecionar e depurar layouts flexbox do CSS.