參閱這份 Chrome 開發人員工具功能的全方位參考資料,瞭解與檢視及變更 CSS 相關的全新工作流程。
如要瞭解基本概念,請參閱「查看及變更 CSS」一文。
選取元素
開發人員工具的「Elements」面板可讓您一次查看或變更一個元素的 CSS。
在螢幕截圖中,您在「DOM Tree」中以藍色醒目顯示的 h1
元素為已選取的元素。元素右側的「樣式」分頁會顯示該元素的樣式。元素左側會在可視區域中醒目顯示,但前提是滑鼠懸停在「DOM 樹狀結構」中的值上。
如需教學課程,請參閱查看元素的 CSS。
選取元素的方法很多:
- 在可視區域中,在元素上按一下滑鼠右鍵,然後選取「檢查」。
- 在開發人員工具中按一下「Select an element」,或按下 Command + Shift + C (Mac) 或 Control + Shift + C (Windows、Linux),然後在可視區域中點選元素。
- 在開發人員工具中,按一下「DOM 樹狀結構」中的元素。
- 在開發人員工具中,在「Console」中執行類似
document.querySelector('p')
的查詢,在結果上按一下滑鼠右鍵,然後選取「Reveal in Elements」面板。
查看 CSS
依序前往「Elements」 >「Styles」和「Computed」分頁,查看 CSS 規則及診斷 CSS 問題。
使用連結進行瀏覽
「樣式」分頁會顯示其他位置中的連結,包括但不限於:
- 在 CSS 規則旁邊,找到樣式表和 CSS 來源。這類連結會開啟「來源」面板。如果樣式表經過壓縮,請參閱「將壓縮檔設為容易讀取」一節。
- 在「沿用來源:...」部分中,設定至父項元素。
- 在
var()
呼叫中,對自訂屬性宣告。 - 在
animation
簡寫屬性中,目的地為@keyframes
。 - 瞭解詳情說明文件工具提示中的連結。
- 還能使用更多其他功能。
以下是部分標示:
連結樣式可能會有所不同。如果不確定是否有連結,可以點選連結查看。
查看工具提示,包括 CSS 說明文件、特異性和自訂屬性值
「Elements」(元素) >「Styles」(樣式) 會在遊標移到特定元素上時,顯示含有實用資訊的工具提示。
查看 CSS 說明文件
如要查看含有 CSS 簡短說明的工具提示,請在「樣式」分頁中,將遊標懸停在屬性名稱上。
按一下「瞭解詳情」,前往這項資源的 MDN CSS 參考資料。
如要關閉工具提示,請勾選 「不要顯示」。
如要重新啟用,請依序前往 「設定」 >「偏好設定」 >「元素」 >「 顯示 CSS 說明文件工具提示」。
查看選取器特性
將滑鼠遊標懸停在選取器上,即可查看含「特許」權重的工具提示。
查看自訂屬性的值
將滑鼠遊標懸停在 --custom-property
上,即可在工具提示中查看該值的值。
查看無效、已覆寫、已停用和其他 CSS
「樣式」分頁可辨識多種 CSS 問題,並以不同方式醒目顯示問題。
請參閱在「樣式」分頁中瞭解 CSS 一文。
僅查看實際套用至特定元素的 CSS
「Styles」分頁會顯示套用至元素的所有規則,包括已覆寫的宣告。如果不再需要覆寫的宣告,您可以透過「Computed」分頁,只查看實際套用至特定元素的 CSS。
- 選取元素。
- 前往「Elements」面板中的「Computed」分頁。
勾選「Show All」(顯示全部) 核取方塊,即可查看所有屬性。
請參閱「運算」分頁中的 CSS。
依字母順序查看 CSS 屬性
使用「Computed」分頁。請參閱「僅查看實際套用至特定元素的 CSS」一文。
查看沿用的 CSS 屬性
在「Computed」分頁中勾選「Show All」核取方塊。請參閱「僅查看實際套用至特定元素的 CSS」一節。
或者,您也可以捲動「Styles」分頁,找出名為 Inherited from <element_name>
的部分。
查看 CSS at-rules
At-rules 是 CSS 陳述式,可用於控制 CSS 行為。「Elements」(元素) >「Styles」(樣式) 會在專屬區段中顯示下列 at-規則:
查看 @property
規則
@property
CSS at-rule 可讓您明確定義 CSS 自訂屬性,並在樣式表中註冊這些屬性,而不需執行任何 JavaScript。
在「Styles」分頁中,將滑鼠遊標懸停在這類屬性的名稱上,即可查看包含屬性值、描述元與註冊連結的工具提示,位於「樣式」分頁底部的可收合 @property
部分。
如要編輯 @property
規則,請對其名稱或值按兩下。
查看 @supports
規則
如果已套用至元素,「Styles」分頁就會顯示 @supports
CSS at-規則。舉例來說,請檢查下列元素:
如果您的瀏覽器支援 lab()
函式,元素會呈現綠色,否則為紫色。
查看 @scope
規則
如果已套用至元素,「Styles」分頁就會顯示 CSS @scope
at-rules。
新的 @scope
at-rules 是 CSS 階層與沿用等級 6 規格的一部分。這些規則可讓您限定 CSS 樣式範圍,換句話說,您可以明確將樣式套用至特定元素。
在以下預覽畫面中查看 @scope
規則:
- 在預覽畫面中檢查資訊卡上的文字。
- 在「Styles」(樣式) 分頁中,找到
@scope
規則。
在這個範例中,@scope
規則會針對含有 card
類別的元素中的所有 <p>
元素,覆寫全域 CSS background-color
宣告。
如要編輯 @scope
規則,請在規則上按兩下。
查看 @font-palette-values
規則
@font-palette-values
CSS at-rule 可讓您自訂 font-palette
屬性的預設值。「Elements」(元素) >「Styles」(樣式) 會在專屬區段顯示 at-rule。
在下一個預覽畫面中查看 @font-palette-values
部分:
- 在預覽畫面中檢查第二行文字。
- 在「Styles」(樣式) 中,找到
@font-palette-values
區段。
在這個範例中,--New
字型調色盤值會覆寫顏色字型的預設值。
如要修改自訂值,請在這些值上按兩下。
查看 @position-try
規則
透過 @position-try
CSS 規則和 position-try-options
屬性,您可以定義元素的替代錨點位置。詳情請參閱「CSS 錨定定位 API 簡介」一文。
「Elements」(元素) >「Styles」(樣式) 會解析 position-try-options
值,並將每個選項連結至專屬的 @position-try --name
區段。
在下一個預覽畫面中檢查 position-try-options
值和 @position-try
區段:
- 在預覽畫面中開啟子選單,也就是依序點選「你的帳戶」和「商店」。
- 在預覽畫面中使用
id="submenu"
檢查元素。 - 在「Styles」(樣式) 中,找出
position-try-options
屬性,然後按一下其--bottom
值。「Styles」分頁會將您導向對應的@position-try
區段。
按兩下即可編輯這個部分的值。
查看元素的方塊模型
如要查看元素的方塊模型,請前往「樣式」分頁,然後按一下動作列中的「顯示側欄」按鈕 。
如要變更值,請在值上按兩下。
搜尋及篩選元素的 CSS
在「Styles」和「Computed」分頁中,使用「Filter」方塊搜尋特定 CSS 屬性或值。
如要一併在「運算」分頁中搜尋繼承的屬性,請勾選「Show All」核取方塊。
如要瀏覽「運算」分頁,請勾選「群組」,將經過篩選的屬性歸類至可收合的類別。
模擬已聚焦的網頁
將焦點從頁面切換到開發人員工具時,有些疊加層元素是由焦點觸發時會自動隱藏。例如下拉式清單、選單或日期挑選器。check_box 「模擬聚焦的網頁」選項可讓您對目前聚焦的元素進行偵錯。
請嘗試在這個示範頁面模擬焦點網頁:
- 將焦點移至輸入元素。下方隨即會顯示另一個元素。
- 開啟開發人員工具。開發人員工具視窗現在位於焦點所在,而不是頁面,因此元素會再次消失。
- 在「Elements」(元素) >「Styles」(樣式) 中,按一下「:hov」,並勾選「check_box」check_box「Emulate aFocus page」,並確認已選取的輸入內容元素。您現在可以檢查其下方的元素。
你也可以在「顯示」面板中找到同一個選項。
切換虛擬類別
切換虛擬類別,例如 :active
、:focus
、:focus-within
、:target
、:hover
、:visited
或 focus-visible
:
- 選取元素。
- 前往「Elements」(元素) 面板的「Styles」(樣式) 分頁。
- 按一下 :hov。
- 勾選要啟用的虛擬類別。
在可視區域中,您可以看到開發人員工具將 background-color
宣告套用至元素,即使元素實際上並未懸停在元素上,
如需互動式教學課程,請參閱「為類別新增虛擬狀態」。
查看沿用的精華虛擬元素
虛擬元素可讓您設定特定元素部分的樣式。醒目顯示的虛擬元素是具有「已選取」狀態的文件部分,樣式會標示為「已醒目顯示」,讓使用者知道這個狀態。例如,這類虛擬元素為 ::selection
、::spelling-error
、::grammar-error
和 ::highlight
。
如規格中所述,當多個樣式發生衝突時,階層式設計會決定勝出的樣式。
如要進一步瞭解規則沿用機制和優先順序,您可以查看沿用的醒目顯示虛擬元素:
-
我沿用父項醒目顯示虛擬元素的樣式。選取我!
選取上方文字中的一段文字。
在「Styles」(樣式) 分頁中,向下捲動並找到
Inherited from ::selection pseudo of...
部分。
查看層疊式圖層
Cascade 圖層可讓您更明確地控管 CSS 檔案,避免樣式特權衝突。適用於大型程式碼集、設計系統,以及在應用程式中管理第三方樣式時,相當實用。
如要查看階層式圖層,請inspect下一個元素,然後開啟「元素」 >「樣式」。
在「Styles」分頁中,查看 3 個階層式圖層及其樣式:page
、component
和 base
。
如要查看圖層順序,請按一下圖層名稱或 「切換 CSS 圖層檢視畫面」按鈕。
page
圖層的精確性最高,因此元素的背景是綠色。
使用列印模式檢視頁面
如何使用列印模式檢視頁面:
透過「涵蓋範圍」分頁查看已使用和未使用的 CSS
「涵蓋範圍」分頁會顯示網頁實際使用的 CSS。
- 當開發人員工具處於焦點狀態時,按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux、ChromeOS) 來開啟「指令選單」。
開始輸入「
coverage
」。選取「顯示涵蓋範圍」。「涵蓋範圍」分頁會隨即顯示。
按一下 「Reload」(重新載入)。 頁面會重新載入,「涵蓋範圍」分頁則概略說明瀏覽器載入的每個檔案中所使用的 CSS (和 JavaScript) 使用量。
綠色代表使用 CSS。紅色代表未使用的 CSS。
按一下 CSS 檔案,即可查看上方預覽畫面中 CSS 所用 CSS 的逐行明細。
螢幕截圖中未使用
devsite-google-blue.css
的第 55 到 57 和 65 到 67 行,第 59 到 63 行則是使用中。
強制列印預覽模式
請參閱「強制使用開發人員工具進行列印預覽模式」。
複製 CSS
在「Styles」(樣式) 分頁中的單一下拉式選單,您可以複製個別的 CSS 規則、宣告、屬性、值
此外,您也可以透過 JavaScript 語法複製 CSS 屬性。如果您使用 CSS-in-JS 程式庫,這個選項就很實用。
如何複製 CSS:
- 選取元素。
- 在「Elements」(元素) >「Styles」(樣式) 分頁中,在 CSS 屬性上按一下滑鼠右鍵。
從下拉式選單中選取下列其中一個選項:
- 複製聲明。以 CSS 語法複製屬性及其值:
css property: value;
- 複製資源。僅複製
property
名稱。 - 複製值。僅複製
value
。 - 複製規則:複製整個 CSS 規則:
css selector[, selector] { property: value; property: value; ... }
- 以 JS 形式複製宣告內容。以 JavaScript 語法複製屬性及其值:
js propertyInCamelCase: 'value'
- 複製所有聲明。複製 CSS 規則中的所有屬性及其值:
css property: value; property: value; ...
以 JS 格式複製所有宣告內容。以 JavaScript 語法複製所有屬性及其值: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value',...
複製所有 CSS 變更內容。在所有宣告的「Styles」分頁中複製變更。
查看計算的值。前往「Computed」分頁。
- 複製聲明。以 CSS 語法複製屬性及其值:
變更 CSS
本節列出了變更 CSS 的所有方式,只要依序前往「元素」 >「樣式」即可。
此外,您還可以:
在元素中新增 CSS 宣告
由於宣告順序會影響元素的樣式,因此您可以透過不同方式新增宣告:
- 新增內嵌宣告。相當於在元素的 HTML 中加入
style
屬性。 - 在樣式規則中新增宣告。
應使用何種工作流程?在大部分情況下,您可能需要使用內嵌宣告工作流程。內嵌宣告的具體程度比外部宣告高,因此內嵌工作流程可確保變更在元素中生效。如要進一步瞭解明確性,請參閱「選取器類型」一文。
如果您要對元素樣式偵錯,且需要特別測試在不同位置定義宣告時會發生什麼事,請使用其他工作流程。
新增內嵌宣告
如何新增內嵌宣告:
- 選取元素。
- 在「Styles」分頁中,按一下「element.style」部分的括號。遊標會聚焦,方便您輸入文字。
- 輸入屬性名稱,然後按下 Enter 鍵。
輸入該屬性的有效值,然後按下 Enter 鍵。在「DOM Tree」中,您會看到
style
屬性已新增至元素。在螢幕截圖中,
margin-top
和background-color
屬性已套用至所選元素。在 DOM 樹狀結構中,您會看到元素的style
屬性反映的宣告。
在樣式規則中新增宣告
如何在現有樣式規則中新增宣告:
- 選取元素。
- 在「Styles」分頁中,按一下您要新增宣告的樣式規則方括號。遊標聚焦,可讓您輸入文字。
- 輸入屬性名稱,然後按下 Enter 鍵。
- 輸入該屬性的有效值,然後按下 Enter 鍵。
在螢幕截圖中,樣式規則會取得新的 border-bottom-style:groove
宣告。
變更宣告名稱或值
按兩下宣告的名稱或值,即可進行變更。如需快速以 0.1、1、10 或 100 為單位遞增或減弱某個值,請參閱「透過鍵盤快速鍵變更可列舉的值」。
使用鍵盤快速鍵變更可列舉的值
編輯宣告的列舉值 (例如 font-size
) 時,您可以使用下列鍵盤快速鍵,將值增加至固定數量:
- Option + 向上鍵 (Mac) 或 Alt + 向上鍵 (Windows、Linux) 為 0.1 遞增。
- 向上:將值變更 1;如果目前值介於 -1 和 1 之間,則會增加 0.1。
- 按 Shift + 向上鍵,將增量 10。
- Shift + Command + Up 鍵 (Mac) 或 Control + Shift + Page Up 鍵 (Windows、Linux),將值增加 100。
減少同樣情況也沒問題。只要將先前提及的 Up 執行個體替換為 Down。
變更長度值
您可以使用指標變更任何長度的屬性,例如寬度、高度、邊框間距、邊界或框線。
如何變更長度單位:
- 將滑鼠遊標懸停在單元名稱上,即可看到加上底線。
按一下單元名稱,從下拉式選單中選取單位。
如何變更長度值:
- 將滑鼠遊標懸停在單位值上,您會發現遊標變更為水平雙頭箭頭。
水平拖曳即可增加或減少值。
如要以 10 為單位調整值,請在拖曳時按住 Shift 鍵。
在元素中新增類別
如何為元素新增類別:
- 在「DOM 樹狀結構」中選取元素。
- 按一下「.cls」.cls。
- 在「Add New Class」方塊中輸入類別名稱。
- 按下 Enter 鍵。
模擬淺色和深色主題偏好設定,並啟用自動深色模式
如何切換自動深色模式,或模擬使用者的淺色或深色主題偏好設定:
- 在「Elements」(元素) >「Styles」(樣式) 分頁中,按一下「ToggleCommon 轉譯模擬」(切換常見轉譯模擬方法)。
從下拉式清單中選取下列其中一個選項:
- prefers-color-scheme: light。表示使用者偏好淺色主題。
- prefers-color-scheme:dark。表示使用者偏好使用深色主題。
- 自動深色模式。即使您並未實作網頁,系統仍會以深色模式顯示網頁。此外,系統會自動將
prefers-color-scheme
設為dark
。
這個下拉式選單是「模擬 CSS 媒體功能」prefers-color-scheme
和「轉譯」分頁的「啟用自動深色模式」選項的捷徑。
切換課程
如何啟用或停用特定元素的類別:
- 在「DOM 樹狀結構」中選取元素。
- 開啟「元素類別」部分。請參閱「為元素新增類別」。在「Add NewClass」方塊下方,會顯示要套用至此元素的所有類別。
- 找出要啟用或停用的類別,並勾選旁邊的核取方塊。
新增樣式規則
如何新增樣式規則:
- 選取元素。
- 按一下「New Style Rule」(新增樣式規則) 。開發人員工具會在 element.style 規則下方插入新規則。
在螢幕截圖中,開發人員工具會在按一下「New Style Rule」(新增樣式規則) 後新增 h1.devsite-page-title
樣式規則。
選取要新增規則的樣式表
新增樣式規則時,點選並按住「New Style Rule」(新增樣式規則) ,選擇要新增樣式規則的樣式表。
切換宣告
如何開啟或關閉單一宣告:
- 選取元素。
- 在「Styles」分頁中,將滑鼠遊標懸停在定義宣告的規則上。每個宣告旁邊都會顯示核取方塊。
- 勾選或取消勾選聲明旁邊的核取方塊。清除宣告後,開發人員工具會將其劃掉,表示該宣告已失效。
在螢幕截圖中,目前所選元素的 color
屬性已切換為關閉。
在動畫期間編輯 ::view-transition
虛擬元素
請參閱「動畫」一節中相應的章節。
詳情請參閱「使用 View Transitions API 進行流暢和簡單的轉換」。
使用格線編輯器對齊格線項目及其內容
請參閱檢查 CSS 格線中的對應部分。
使用顏色挑選器變更顏色
請參閱「使用顏色挑選器檢查 HD 高畫質和非 HD 高畫質色彩,並進行偵錯」。
使用角度時鐘變更角度值
Angle 時鐘提供 GUI,可用於變更 CSS 屬性值中的 <angle>
。
開啟「角度時鐘」:
- 使用角度宣告選取元素。
在「Styles」分頁中,找到要變更的
transform
或background
宣告。按一下角度值旁邊的「角度預覽」方塊。-5deg
和0.25turn
左側的小時鐘是角度預覽畫面。按一下預覽畫面即可開啟「角度時鐘」。
按一下「角度時鐘」圓圈或滑鼠滾輪來增加 / 減少角度值,以變更角度值。
還有其他鍵盤快速鍵可用來變更角度值。詳情請參閱樣式窗格鍵盤快速鍵。
使用陰影編輯器變更方塊和文字陰影
陰影編輯器提供用於變更 text-shadow
和 box-shadow
CSS 宣告的 GUI。
如何使用「陰影編輯器」變更陰影:
選取陰影宣告的元素。例如選取下一個元素。
在「Styles」分頁中,找到
text-shadow
或box-shadow
宣告旁邊的陰影 圖示。按一下陰影圖示,開啟「陰影編輯器」。
變更陰影屬性:
- Type (僅適用於
box-shadow
)。選擇「Outset」或「Inset」。 - X 和 Y 軸偏移。拖曳藍點或指定值。
- 模糊處理:拖曳滑桿或指定值。
- Spread (僅適用於
box-shadow
)。拖曳滑桿或指定值。
- Type (僅適用於
查看已套用至元素的變更。
使用 Easing 編輯器編輯動畫和轉場時間
Easing Editor 提供用於變更 transition-timing-function
和 animation-timing-function
值的 GUI。
如何開啟「Easing Editor」:
- 選取含有時間函式宣告的元素,例如頁面上的
<body>
元素。 - 在「Styles」分頁中,找到
transition-timing-function
、animation-timing-function
宣告或transition
簡寫屬性旁的紫色 圖示。 - 按一下圖示開啟「Easing Editor」:
使用預設設定調整時間
如要透過點選的方式調整時間,請使用「加/減速編輯器」中的預設選項:
- 如要在「Easing Editor」設定關鍵字值,請按一下其中一個挑選器按鈕:
- 線性
- 先前啟動
- 便捷
- 爆發
在「預設切換器」中,按一下 或 按鈕,選擇下列其中一個預設:
- 線性預設設定:
elastic
、bounce
或emphasized
。 - 立方貝茲預設:
- 線性預設設定:
時間關鍵字 | 預設 | 古巴貝茲 |
---|---|---|
先加速後減速 | 走出路 (正弦) | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
沉穩的二氧化碳 | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
|
內在外,立方體 | cubic-bezier(0.65, 0.05, 0.36, 1) |
|
快轉,慢速 | cubic-bezier(0.4, 0, 0.2, 1) |
|
走進室裡 | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
加速 | 入、正弦 | cubic-bezier(0.47, 0, 0.75, 0.72) |
《In, Quadratic》 | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
哥倫比亞特區 | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
|
入鏡 | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
|
快轉,線性 | cubic-bezier(0.4, 0, 1, 1) |
|
減速 | 外出 (正弦) | cubic-bezier(0.39, 0.58, 0.57, 1) |
離開 (二次) | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
逃出, 立體 | cubic-bezier(0.22, 0.61, 0.36, 1) |
|
線性輸出,慢速 | cubic-bezier(0, 0, 0.2, 1) |
|
退場、回來 | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
設定自訂時間
如要設定時間函式的自訂值,請使用線條上的控制點:
針對線性函式,請點選線條中的任何位置新增控制點,然後拖曳。按兩下則可移除這個點。
如要使用 Cubic Bezier 函式,請拖曳其中一個控制點,
任何變更都會在編輯器頂端的「預覽」中觸發球形動畫。
(實驗功能) 複製 CSS 變更內容
啟用這項實驗後,「Styles」分頁會以綠色醒目顯示 CSS 變更。
如要複製單一 CSS 宣告變更,請將滑鼠遊標懸停在醒目顯示的宣告上,然後按一下 「複製」按鈕。
如要一次複製所有宣告中的 CSS 變更,請在任一宣告上按一下滑鼠右鍵,然後選取「複製所有 CSS 變更」。
此外,您也可以透過「變更」分頁追蹤變更。