想要又快又穩的滿足各種 UI 需求，每天肯定花不少時間在 Debug CSS，不過總有某些特殊情境讓 Debug 過程非常繁瑣，甚至是難以完成，此時心中就會逐漸冒起一把無名火。

概覽

Elements 面板會顯示目前網頁中的 DOM、CSS 狀態，且可以修改頁面上的 DOM 和 CSS，即時看到結果，省去了在編輯器修改、儲存、瀏覽器查看結果的流程。

Elements 主要可以分為 DOM 結構以及元素（Element）內容兩個子面板，接下來筆者將會從右側面板，也就是元素內容面板的 CSS Debugging 相關功能開始講起。

讀者們可以搭配 Demo 頁面 Elements - CSS 來實際操作以下提及的各種功能用法哦。

CSS

內容面板由幾個分頁組成，而 Debug CSS 最常用的就是 Styles 分頁，元素的 Class、Style 相關資訊都在這邊一覽無遺。

小技巧：點擊 Styles 面板的規則區塊，也就是上圖中任意區域，可以新增一條 Style，編輯時可用 Tab 跳到 Value 或下一條 Style。

Shadow Editor

box-shadow 屬性右方會有一個小小的圖示，點擊後會跳出陰影編輯器，如果原本沒有 box-shadow，就隨意輸入一個 box-shadow: 0 0 black;，另外也可以切換為 outset 或 inset。

還在用外部的陰影產生器嗎？

Color editor

顏色編輯器想必大家都用過，但除了修改顏色以外，還有很多好用的功能，不過 Chrome DevTools 沒有直接打開 Color editor 的方式，最快的方法是隨意 inspect 一個有顏色的元素或是新增一條 Value是顏色的規則。

不過除了調整顏色外，還有以下幾個功能。

取色器

左方的圖示為取色器，如果想選取的顏色範圍比較小如文字，可以把頁面放大幾倍，避免取到邊緣的過渡顏色。

格式轉換器

顏色格式可透過右方的上下箭頭切換格式，並同時會修改 color 的值。

Palette

下方的顏色可不是擺好看的，點擊右側 icon 可以展開選項來修改要展示的顏色集合：

• Page Colors: 從網頁現有 CSS 中找到的顏色，從這邊選顏色的話會與目前網站配色較相近。
• Material Design: Google 自家產品，沒想法就先拿這些試試吧。
• Custom: 自訂顏色，用右方的加號新增色塊，右鍵點擊色塊可以移除。
• CSS Variables: 就是已定義的值屬於顏色的 CSS 變數。

Contrast ratio

只有 color 屬性的顏色編輯器有這個功能，文字和背景的對比程度，點開右側圖示會看到顏色區域多了兩條白線，分別是 AA 和 AAA，符合 AA 才算達到最低對比標準，讓使用者更舒服，而越大的文字所需的對比度會越低。

在跨越白線的時候通過 AA 或 AAA 對比標準就會得到勾勾 ✔️。

Box model

有看到下方由褐、橘、綠、藍色組成的方形嗎？他就是視覺化的 Box model，也是 CSS 最重要的基礎，Computed 分頁的最上方也有一個，點擊 Box model 中的 margin、padding 等等可以直接編輯，想不到吧？

另外如果元素有非 static 的 position，就會多一層 position 可以編輯喔。

小結

Elements 面板之 CSS 篇尚未結束，續集請見 Elements - CSS 之 2