iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 3
5
Modern Web

你所不知道的各種前端 Debug 技巧系列 第 3

[Day 03] Elements - CSS

想要又快又穩的滿足各種 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 等等可以直接編輯,想不到吧?

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

小結

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


上一篇
[Day 02] 你所知道的 Chrome DevTools
下一篇
[Day 04] Elements - CSS 之 2
系列文
你所不知道的各種前端 Debug 技巧30

尚未有邦友留言

立即登入留言