開發人員工具提示：如何檢查 CSS Flexbox 並進行偵錯

Sofia Emelianova
Sofia Emelianova
GitHub

Chrome 開發人員工具可讓您直覺地偵錯 CSS flexbox 版面配置。「Elements」面板提供情境感知的 Flexbox 編輯器和可自訂的疊加層。

觀看影片瞭解如何：

  • 使用 Flexbox 編輯器變更 Flexbox 屬性，只要按一下按鈕即可，不必輸入屬性。
  • 切換可視區域中的彈性容器疊加層，即可立即查看所做的變更。
  • 請使用「元素」 >「版面配置」 >「Flexbox」部分，查看所有元素的清單，並在 DOM 樹狀結構中找到這些元素。此外，您也可以在這裡自訂疊加顏色。

如要進一步瞭解 CSS flexbox，請參閱「學習 CSS > Flexbox」一文。

如想在開發人員工具中獲得更實用的偵錯體驗，請按照檢查及偵錯 CSS flexbox 版面配置教學課程操作。