开发者工具提示：如何检查和调试 CSS flexbox

Sofia Emelianova
Sofia Emelianova
GitHub

使用 Chrome DevTools 调试 CSS flexbox 布局更加直观。元素面板为您提供上下文感知 Flexbox 编辑器和可自定义的叠加层。

观看视频，了解如何：

  • 使用 Flexbox 编辑器，只需点击一下按钮，即可更改 Flexbox 属性，而无需手动输入。
  • 在视口中切换 Flexbox 叠加层，可立即查看所做的更改。
  • 使用元素 > 布局 > Flexbox 部分查看所有元素的列表，并在 DOM 树中找到这些元素。此外，您还可以在此自定义叠加层颜色。

如需从整体上详细了解 CSS flexbox，请参阅了解 CSS > Flexbox。

如需在开发者工具中获得更多实操调试体验，请按照检查和调试 CSS flexbox 布局教程进行操作。