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

Sofia Emelianova

Chrome 開發人員工具讓 CSS Flbox 版面配置的偵錯變得直覺易懂。「Elements」(元素) 面板提供具情境感知的 Flexbox 編輯器，以及可自訂的疊加層。

觀看影片，瞭解如何：

• 使用 Flexbox Editor 後，只需點選一個按鈕即可變更 Flexbox 屬性，不需要自行輸入。
• 在可視區域中切換 Flexbox 重疊，即可查看您立即所做的變更。
• 依序前往「Elements」(元素) >「Layout」(版面配置) >「Flexbox」部分，查看所有元素清單並在 DOM 樹狀結構中找出這些元素。此外，您也可以在這裡自訂重疊色彩。

如要深入瞭解 CSS Flexbox 的一般資訊，請參閱「瞭解 CSS > Flexbox」。

如需開發人員工具中的更多實作偵錯體驗，請按照「檢查 CSS Flbox 版面配置」教學課程中的步驟操作。