DevTools與CSS有關的新功能(Chrome 89)
總結
本篇是記錄 Chrome 89 的 DevTools 中,CSS 相關新功能的筆記。
版本與環境
Google Chrome: 89.0.4389.72 (Official Build) (64-bit)
os: Windows_NT 10.0.18363 win32 x64
DevTools 中與 CSS 相關的新內容(Chrome 89)
直接對 node 截圖
原文連結:https://developers.google.com/web/updates/2021/01/devtools#node-screenshot
在 node 上點擊右鍵,選擇 Capture node screenshot 後,截圖就會下載到本機。
可直接套用偽類:target 至元件上
原文連結:https://developers.google.com/web/updates/2021/01/devtools#force-target
不用點擊連結,即可套用:target
到元件上。
打開 DevTools,點選 Elements 標籤,點選元件後按下:hov 按鈕,即可展開支援套用的偽類(pseudo-element)清單。
選擇:target
後,即可直接觀察相關的 CSS 表現內容。
以上兩張螢幕截圖用到的原始碼:
See the Pen :target by Charlie (@Charlie7779) on CodePen.
直接在 DevTools 裡面複製元件
原文連結:https://developers.google.com/web/updates/2021/01/devtools#duplicate-element
在元件上按下右鍵選擇 Duplicate element 後,該元件的副本就會出現在被拷貝的元件下方。
支援快速鍵,點選元件後按下Shift
+ Alt
+ ⬇️(Windows)或Shift
+ Option
+ ⬇️(Mac)即可拷貝元件。
支援 color picker
原文連結:https://developers.google.com/web/updates/2021/01/devtools#color-picker
並且如果按住Shift
後以滑鼠左鍵點擊顏色方塊的話,可以切換為不同的顏色編碼格式(RGBA、HSLA、Hex)
複製元件的 CSS 內容
原文連結:https://developers.google.com/web/updates/2021/01/devtools#copy-css 在 Styles 區塊對元件的 CSS 設定按下右鍵,可複製 CSS 內容。
如果是在選取器位置按下右鍵的話,會出現以下選項:
- Copy selector:複製選取器,上圖水藍色部分
- Copy rule:複製 CSS 規則,上圖黃色部分
- Copy all declarations:複製選取器與 CSS 規則,上圖水藍色加上黃色部分
如果是在中括號{}
區塊按下右鍵的話,選項如下:
- Copy declaration:複製紅框與粉框部分
- Copy property:複製紅框部分
- Copy value:複製粉框部分
- Copy rule:複製水藍色加上黃色部分
- Copy all declarations:僅複製黃色部分
字體編輯面板(Experimental features)
原文連結:https://developers.google.com/web/updates/2021/01/devtools#font
點選上圖紅框內的字體圖示,可即時調整字體設計。
flexbox debug 工具(Experimental features)
原文連結:https://developers.google.com/web/updates/2021/01/devtools#flexbox
有display: flex;
特性的元件,右側會顯示 flex 圖示。
滑鼠移動到 flex 相關的特性上,會在畫面中顯示提示。上圖分別是滑鼠指向gap
與align-items
。
附錄
開啟 Experimental features
點選 DevTools 的齒輪圖示(設定),移動到 Experiments 標籤,勾選需要開啟的相關功能。 設定完畢後需關閉、重新啟動 DevTools 來套用設定。
檢查 Chrome 的版本
打開 Chrome 後,點選畫面右上角的垂直排列三點按鈕,依序選擇幫助、關於,點開關於後即可看到 Chrome 版本資訊。