Elements panel 的兩個區塊#

要又快又穩地滿足各種 UI 需求，每天得花不少時間 Debug CSS。Elements panel 是這件事的主場：它會即時顯示頁面的 Document Object Model (DOM) 結構與 CSS 狀態，並且可以在面板內直接修改 DOM 與 CSS、立刻看到結果，省去了「編輯器修改 ➡️ 儲存 ➡️ 瀏覽器重整」的循環。

Elements panel 主要可以拆成兩個子面板：

• 左側：DOM 結構樹
• 右側：選中元素的內容（Styles、Computed、Layout、Event Listeners 等分頁）

本章先聚焦在右側的 CSS Debug 相關功能，DOM 結構放到後面章節。

Styles 分頁#

最常用的就是 Styles 分頁，元素的 class、style 相關資訊都集中在這裡。Styles 分頁顯示的順序也是有意義的：規則由上而下按照優先順序（Specificity）排列，越上面的規則優先度越高。

點擊 Styles 面板任意空白處，可以新增一條 style；編輯時用 Tab 鍵可以快速跳到 value 欄位或下一條 style。

想試新規則但又不想動到原本檔案的時候，這個小動作非常實用。

Shadow Editor#

box-shadow 屬性右邊會有一個小圖示，點下去會跳出陰影編輯器，可以視覺化調整 X/Y 偏移、blur、spread、顏色，也能在 outset 與 inset 之間切換。

如果該元素本來沒有 box-shadow，可以隨意輸入一條起手式：

box-shadow: 0 0 black;

接著就能透過 Shadow Editor 互動式調整。比起在外部找陰影產生器再複製貼回來，這個流程快很多。

Color Editor#

顏色編輯器大家應該都用過，但除了改顏色之外還有不少進階功能。Chrome DevTools 沒有「直接打開 Color Editor」的入口，最快的開啟方式是：

• Inspect 一個有顏色的元素
• 或在 Styles 分頁新增一條 value 是顏色的規則

點顏色色塊就會跳出 Color Editor。

取色器#

左側的取色器圖示可以從頁面上吸取顏色。如果想取的目標範圍很小（例如文字），建議先把頁面放大幾倍，避免吸到邊緣抗鋸齒的過渡顏色，導致取出來的色值偏掉。

格式轉換器#

Color Editor 右側有上下箭頭可以切換顏色格式（HEX、RGB、HSL 等），切換時也會直接改寫對應的 CSS value。

Palette#

下方的色塊不是擺好看的，點右側 icon 可以切換不同的 palette：

• Page Colors：從目前網頁的 CSS 中萃取出的顏色，從這裡選顏色會比較貼近網站既有配色
• Material Design：Google 自家的設計系統色票，沒想法時可以先試試
• Custom：自訂顏色，用右側的加號新增色塊，右鍵可以移除
• CSS Variables：頁面上已定義、值為顏色的 CSS 變數

Contrast Ratio#

只有針對 color 屬性的 Color Editor 會出現這個功能，用來檢查文字與背景的對比是否足夠。點開右側的詳細圖示，會看到顏色區域多了兩條白線，分別代表 AA 與 AAA 的對比門檻：

• 必須通過 AA 才算達到最低可讀性標準
• 文字越大，所需的對比度越低

在拖曳顏色跨越白線、通過 AA 或 AAA 的瞬間，DevTools 會出現勾勾提示，這是檢查無障礙設計的一個快速管道。

Box Model#

Styles 分頁下方（或 Computed 分頁最上方）會看到一個由幾個方塊巢狀組成的圖：那就是視覺化的 box-model，也是 CSS 排版最重要的基礎。

這個 box-model 不只是「顯示」用而已：

• 點擊裡面的 margin、padding、border、width、height 數字可以直接編輯
• 編輯後即時反映到頁面，不需要切回 Styles 面板

如果元素的 position 不是 static，box-model 會多出一層 position 區域可以編輯（top、right、bottom、left）。

銜接#

CSS 相關功能還沒講完，下一章會繼續介紹 Styles 分頁上方的工具列、狀態鎖定、Computed 分頁的進階用法，以及如何快速定位「這個 property 為什麼是這個值」。

原文出處#

• 原書/iThome：https://ithelp.ithome.com.tw/articles/10238150