文章出自個人博客 https://knightyun.github.io/2020/05/23/tools-devtool-shortcut，轉載請申明
本文只介紹 Chrome 一些主要和常用的快捷鍵，在其它瀏覽器的開發者工具中可類比，大部分快捷鍵作用都相同，只有個別差異。
全局（所有面板）
| 功能 |
快捷鍵 |
描述 |
| 打開開發者工具 |
F12 / Ctrl + Shift + I |
普通打開 |
| 打開 Console |
Ctrl + Shift + J |
打開工具並進入 Console 面板 |
| 檢查元素 |
Ctrl + Shift + C |
進入 Elements 面板後開始選取頁面元素 |
| 開發者工具設置 |
?/F1 |
開發者工具的所有相關設置 |
| 切換上一個面板 |
Ctrl + [ |
向左切換一個面板 |
| 切換下一個面板 |
Ctrl + ] |
向右切換一個面板 |
| 切換工具停靠位置 |
Ctrl + Shift + D |
即整個工具相對於瀏覽器的停靠位置，具體在懸浮、左側、右側、底部哪兩個間切換，取決於最近兩次操作 |
| 切換設備模式 |
Ctrl + Shift + M |
普通模式和響應式設備編輯模式間切換 |
| 切換抽屜工具欄 |
Esc |
切換顯示工具底部的彈出式工具欄，如 Console 等 |
| 刷新網頁 |
F5/Ctrl + R |
普通刷新頁面，會讀取 memory cache 和 disk cache |
| 強制刷新 |
Ctrl + F5/Ctrl + Shift + R |
禁用緩存刷新，類似於勾選 disable cache 後刷新 |
| 當前面板中搜索 |
Ctrl + F |
當前面板中搜索文本，如 Elements, Console 等 |
| 所有資源中搜索 |
Ctrl + Shift + F |
在當前網頁加載的所有資源（Sources）中搜索文本 |
| 按文件名搜索 |
Ctrl + O/Ctrl + P |
同樣搜索所有資源，只是搜索對象限制在文件名稱上 |
| 放大字體 |
Ctrl + + |
放大整個開發者工具的字體與圖形（不包括網頁） |
| 縮小字體 |
Ctrl + - |
縮小開發者工具字體與圖形的尺寸 |
| 恢復字體大小 |
Ctrl + 0 |
將開發者工具的字體與圖形尺寸恢復默認大小 |
Elements（元素）面板
| 功能 |
快捷鍵 |
描述 |
| 撤消更改 |
Ctrl + Z |
撤銷對 HTML 內容的修改 |
| 重做更改 |
Ctrl + Y |
恢復撤銷前的修改 |
| 展開節點 |
→（右方向鍵） |
展開當前摺疊的 HTML 元素節點 |
| 摺疊節點 |
←（左方向鍵） |
摺疊當前展開的 HTML 元素節點 |
| 遞歸展開節點 |
Alt + → |
遞歸地展開當前摺疊的 HTML 元素節點 |
| 遞歸摺疊節點 |
Alt + ← |
遞歸地摺疊當前展開的 HTML 元素節點 |
| 編輯節點屬性 |
Enter |
編輯所在元素節點的屬性值（第一個屬性的） |
| 編輯下個屬性 |
Tab |
按下 Enter 編輯屬性後，按 Tab 可以依次切換到後面的屬性 |
| 編輯上個屬性 |
Shift + Tab |
切換到當前元素節點的上一個屬性值進行編輯 |
| 隱藏節點 |
H |
在頁面中隱藏當前元素節點，實質是設置 visibility: hidden !important; 樣式 |
| 編輯 HTML |
F2 |
以 HTML 的形式編輯當前元素節點內容，類似於右鍵菜單的 Edit as HTML |
| 編輯源樣式 |
Ctrl + 點擊 |
Style（樣式）欄中，Ctrl + 鼠標點擊 CSS 規則（選擇器、屬性或屬性值）時，會跳轉到源文件的相應位置 |
| 切換顏色類型 |
Shift + 點擊 |
Shift + 點擊樣式顏色值左邊的取色框時，色值類型會在 #, rgb(), hls() 之間切換 |
| 增/減數值 |
↑/↓（上、下方向鍵） |
單次增/減大小爲 1 單位 |
| 0.1 倍增/減值 |
Alt + ↑/Alt + ↓ |
單次增/減 0.1 倍單位值 |
| 10 倍增/減值 |
Shift + ↑/Shift + ↓ |
單次增/減 10 倍單位值 |
| 100 倍增/減值 |
Ctrl + ↑/Ctrl + ↓ |
單次增/減 100 倍單位值 |
Console（控制檯）面板
| 功能 |
快捷鍵 |
描述 |
| 清空輸出 |
Ctrl + L |
清空控制檯的歷史輸出 |
| 聚焦輸入 |
Ctrl + `（反引號） |
把輸入焦點聚焦到控制檯輸入框中，其它面板中使用則打開 Console 抽屜欄 |
| 接受建議 |
Enter/→ |
接受代碼提示的第一個建議項 |
| 切換命令 |
↑/↓ |
切換上/下一條歷史輸入命令 |
| 運行代碼 |
Enter |
回車運行輸入的代碼 |
| 換行輸入 |
Shift + Enter |
由於直接回車是運行代碼，所以想換行輸入需要加 Shift |
Sources（資源）面板
| 功能 |
快捷鍵 |
描述 |
| 執行腳本 |
F8/Ctrl + \ |
切換執行或暫停腳本 |
| 單步執行 |
F10/Ctrl + ' |
（Debugger 欄中 ）單步調試腳本 |
| 單步進入 |
F11/Ctrl + ; |
單步進入調試（遇到函數就跳入） |
| 單步跳出 |
Shift + F11/Ctrl + Shift + ; |
單步跳出調試（跳出當前函數） |
| 下個調用幀 |
Ctrl + .（英文句號） |
調試時切換到調用棧（Call Stack 欄）中當前幀的下面一幀 |
| 上個調用幀 |
Ctrl + ,（英文逗號） |
調試時切換到當前調用的幀上面一幀（當前爲棧頂則忽略） |
| 輸出變量值 |
Ctrl + Shift + E |
在控制檯輸出編輯器中所選中的變量的值 |
| 觀察變量值 |
Ctrl + Shift + A |
將編輯器中選中的變量值添加到 Watch 欄中 |
| 切換斷點 |
Ctrl + B |
當焦點位於代碼編輯器中時，用於切換當前行是否設置爲斷點 |
| 切換啓用斷點 |
Ctrl + Shift + B |
切換當前行的斷點是否啓用（不會刪除斷點） |
| 切換啓用全部斷點 |
Ctrl + F8 |
切換所有設置的斷點是否啓用 |
| 編輯斷點 |
Ctrl + Alt + B |
編輯當前行的斷點類型（Breakpoint, Conditional Breakpoint, Logpoint） |
代碼編輯器（Sources 面板中）
| 功能 |
快捷鍵 |
描述 |
| 切換註釋 |
Ctrl + / |
爲當前行或選中內容添加/取消註釋 |
| 保存修改 |
Ctrl + S |
保存對文件的修改（需要先啓用側欄的 Overrides 功能） |
| 保存所有更改 |
Ctrl + Alt + S |
保存編輯器打開的所有文件，同樣需要啓用 Overrides |
| 轉到匹配括號 |
Ctrl + M |
跳轉到與當前光標位置的括號匹配的另一個括號處 |
| 添加匹配項 |
Ctrl + D |
跳轉並添加選擇下一個與選擇文本匹配的文本 |
| 撤銷匹配項 |
Ctrl + U |
返回並撤銷選擇一個匹配項，與 Ctrl + D 相反 |
| 轉到行 |
Ctrl + G |
跳轉到指定行數 |
| 轉到成員 |
Ctrl + Shift + O |
跳轉到當前文件中的指定成員函數 |
| 上個編輯處 |
Alt + - |
跳轉到上一個光標位於的編輯位置 |
| 下個編輯處 |
Alt + + |
跳轉到下一個編輯位置 |
| 關閉活動標籤 |
Alt + W |
關閉當前編輯的標籤（文件） |
| 增/減CSS值 |
Alt + ↑/Alt +↓ |
編輯 CSS 源文件時，可對當前數值增/減 1 一個單位 |
| 10 倍增/減CSS值 |
Alt + PageUp↑/Alt + PageDown |
CSS 中對當前數值增/減 10 一個單位 |
技術文章推送
手機、電腦實用軟件分享
![]()
![]()
