概述
Chrome DevTools 是一組直接内置于 Google Chrome 浏覽器中的 Web 開發人員工具。 DevTools 可以幫助您即時編輯頁面并快速診斷問題，最終幫助您更快地建構更好的網站。
打開開發工具
打開 DevTools 的方法有很多種，便于不同的使用者快速通路不同部分。
方法1
當您想要使用【DOM】或【CSS】時，右鍵單擊頁面上的元素并選擇【檢查】。
以跳轉到【Elements】面闆。 或者按 Command+Option+C (Mac) 或 Control+Shift+C（Windows、Linux、Chrome 作業系統）。
方法2
如果您想檢視記錄的消息或運作 JavaScript，請按 Command+Option+J (Mac) 或 Control+Shift+J（Windows、Linux、Chrome OS）直接跳到【Console】面闆。
方法3
打開您上次打開的最後一個面闆，按 Command+Option+I (Mac) 或 Control+Shift+I。
方法4
從 Chrome 的主菜單打開 DevTools。
方法5
在每個新頁籤上自動打開 DevTools，從【指令行】打開 Chrome 并傳遞 --auto-open-devtools-for-tabs 标志。
例如：C:\Program Files\Google\Chrome\Application>chrome.exe --auto-open-devtools-for-tabs
這僅在 Chrome 執行個體尚未運作時才有效。 從那時起，每個新頁籤都會自動打開 DevTools，直到使用者完全退出 Chrome。
新功能
https://developer.chrome.com/docs/devtools/updates/
CSS
檢視和改變CSS
完成這些互動式教程，了解使用 Chrome DevTools 檢視和更改頁面 CSS 的基礎知識。
檢視元素的CSS
在浏覽器頁面右鍵單擊檢查任何元素，并選擇檢查。 DevTools 的【Elements】面闆打開。被選擇的元素在DOM 樹中突出顯示。被選擇元素的CSS樣式在【Styles】頁籤中顯示。
向元素添加 CSS 聲明
當您想要更改或添加 CSS 聲明到元素時，請使用【Styles】頁籤。
步驟1，點選【element.style】的空白處。
步驟2，輸入【background-color】并按下【Enter】鍵。
步驟3，輸入屬性值。
步驟4，該屬性将添加到元素的内聯樣式中。
向元素添加 CSS 類
使用【Styles】頁籤檢視當 CSS 類應用于元素或從元素中删除時元素的外觀。
步驟1，點選【.cls】。
步驟2，輸入類名。
步驟3，按下【Enter】鍵。
步驟4，該類将追加到此元素上。
步驟5，可以通過【對号】來調節是否使用。
向類添加僞狀态
使用樣式頁籤将 CSS 僞狀态永久應用于元素。 DevTools 支援 :active、:focus、:hover 和 :visited等。
步驟1，點選【.hov】。
步驟2，點選【:hover】。
步驟3，該元素将處于【hover】狀态。
更改元素的尺寸
使用【Styles】頁籤中的盒模型互動圖來更改元素的寬度、高度、填充、邊距或邊框長度。
步驟1，劃到【Styles】頁籤的最底部。
步驟2，輕按兩下要改變屬性的值。
步驟3，輸入新值。
步驟4，按下【Enter】鍵。
CSS 特性參考
選擇一個元素
DevTools 的【Elements】面闆允許您一次檢視或更改一個元素的CSS。所選元素在 DOM 樹中以藍色突出顯示。元素的樣式顯示在【Styles】頁籤中。
有多種選擇元素的方法：
方法1，在 DevTools 中，單擊 【Select an element】 選擇一個元素或按 Command+Shift+C (Mac) 或 Control+Shift+C（Windows、Linux），然後在視口中單擊該元素。
方法2，在 DevTools 中，單擊【DOM】區域中的元素。
方法3，在 DevTools 中，在控制台【Console】中運作類似 document.querySelector('p') 的查詢，右鍵單擊結果，然後選擇在元素面闆中顯示【RevIn Elements panel】。
檢視CSS
1，檢視定義規則的外部樣式表。
在【Styles】頁籤中，單擊 CSS 規則旁邊的連結以打開定義該規則的外部樣式表。
2，僅檢視實際應用于該元素的 CSS。
【Styles】頁籤向您顯示适用于元素的所有規則，包括已被覆寫的聲明。 如果您對覆寫的聲明不感興趣，請使用 【Computed】 頁籤僅檢視實際應用于元素的 CSS。按字母順序顯示 CSS 屬性。
3，檢視繼承的 CSS 屬性。
繼承的屬性是不透明的。 選中【Show All】複選框以檢視所有繼承的值。
4，分組參看 CSS 元素。
5，搜尋和過濾元素的 CSS。
改變CSS
1，向元素添加 CSS 聲明。
添加内聯聲明
選擇一個元素。
在樣式窗格中，單擊 element.style 部分的括号之間。 光标聚焦，允許您輸入文本。
輸入屬性名稱并按 【Enter】。為該屬性輸入一個有效值，然後按 【Enter】。
在 DOM 樹中，您可以看到元素已添加樣式屬性。
向樣式規則添加聲明。
選擇一個元素。
在【Styles】頁籤中，單擊要向其添加聲明的樣式規則的括号之間。 光标聚焦，允許您輸入文本。
輸入屬性名稱并按 Enter。為該屬性輸入一個有效值，然後按 Enter。
2，更改聲明名稱或值。
單擊聲明的名稱或值以更改它。
3，使用鍵盤快捷鍵更改聲明值。
在編輯聲明的值時，您可以使用以下鍵盤快捷鍵将值增加強定數量
Option+Up (Mac) 或 Alt+Up（Windows、Linux）增加 0.1。
Up 将值更改 1，如果目前值介于 -1 和 1 之間，則更改 0.1。
Shift+Up 增加 10。
Shift+Command+Up (Mac) 或 Shift+Ctrl+Page Up（Windows、Linux）将值增加 100。
遞減也有效。 隻需用 【Down】 替換上面提到的每個 【Up】 執行個體。
4，給元素添加一個類。
選擇 DOM 樹中的元素。
單擊 .cls。
在添加新類文本框中輸入類的名稱。
按 【Enter】。
5，切換類。
切換要啟用或禁用的類旁邊的複選框。
6，添加樣式規則。
單擊【New Style Rule】。 DevTools 在 element.style 規則下插入一條新規則。
選擇要向其中添加規則的樣式表。
添加新樣式規則時，單擊并按住 【New Style Rule】以選擇要将樣式規則添加到哪個樣式表。
7，切換聲明。
打開或關閉單個聲明：
選擇一個元素。
在樣式窗格中，将滑鼠懸停在定義聲明的規則上。 複選框出現在每個聲明旁邊。
選中或取消選中聲明旁邊的複選框。 當您取消選中某個聲明時，DevTools 會将其劃掉以表明它不再處于活動狀态。
8，使用拾色器更改顔色。
顔色選擇器提供了一個用于更改顔色和背景顔色聲明的 GUI。
在【Style】頁籤中，找到要更改的顔色或背景顔色聲明。 在顔色或背景顔色值的左側，有一個小方塊，它是顔色的預覽。
單擊預覽以打開拾色器。
以下是顔色選擇器的每個 UI 元素的描述：
1，【Shades】調色闆，點選可切換顔色。
2，吸管。可以吸取目前頁面别處的顔色。将滑鼠懸停在視口中的目标顔色上。點選确認。
3，複制到剪貼闆。 将顯示值複制到剪貼闆。
4，顯示值。 顔色的 RGBA、HSLA 或十六進制表示。
5，調色闆。 單擊這些方塊之一将顔色更改為該方塊。
6，色調。
7，不透明度。
8，顯示值切換器。 在目前顔色的 RGBA、HSLA 和十六進制表示之間切換。
9，調色闆切換器。 在 Material Design 調色闆、自定義調色闆或頁面顔色調色闆之間切換。 DevTools 根據它在樣式表中找到的顔色生成頁面調色闆。
9，使用角度時鐘更改角度值。
角度時鐘提供了一個用于更改 CSS 屬性值中的 <angle> 的 GUI。
選擇帶有角度聲明的元素。
單擊角度值旁邊的角度預覽框。單擊預覽以打開角度時鐘。
通過單擊“角度時鐘”圓圈或滾動滑鼠以将角度值增加/減少 1 來更改角度值。
Up 将值更改 1。
Shift+Up 增加 10。
其他1，在列印模式下檢視頁面。
在 DevTools 處于焦點時按 Command+Shift+P (Mac) 或 Control+Shift+P（Windows、Linux、Chrome OS）以打開指令菜單。
開始鍵入 【Rendering】 并選擇 【Show Rendering】。
在模拟 CSS 媒體下拉清單中，選擇【print】。
其他2，使用 Coverage 頁籤檢視已使用和未使用的 CSS。
在 DevTools 處于焦點時按 Command+Shift+P (Mac) 或 Control+Shift+P（Windows、Linux、Chrome OS）以打開指令菜單。
開始輸入【coverage】 并選擇 【Show Coverage】。 覆寫頁籤出現。
單擊開始檢測覆寫率并重新加載頁面 開始檢測覆寫率并重新加載頁面。 頁面重新加載，Coverage 頁籤概述了浏覽器加載的每個檔案使用了多少 CSS（和 JavaScript）。 綠色代表使用過的 CSS。 紅色代表未使用的 CSS。
單擊 CSS 檔案以檢視其使用的 CSS 的逐行細分。
- 開始檢視和更改 DOM
- 控制台
- 使用 Coverage 頁籤查找未使用的 JavaScript 和 CSS
- Network
- 儲存室
- 使用“問題”頁籤查找并修複問題
- 在指令菜單中運作指令
- 移動端模拟
- JavaScript
- 性能
- 無障礙
- 遠端調試
- 記憶體
- 檢視和調試媒體播放器資訊
- 模拟身份驗證器并調試 WebAuthn
- 使用工作區編輯檔案
- 調試漸進式 Web 應用程式（PWA）
- 了解安全問題
- 鍵盤快捷鍵
- 檢視頁面資源
- 定制