孔子說:工欲善其事，必先利其器。
老子說：孔子說的對。
針對前端開發人員，谷歌瀏覽器的好處自然不言而喻，其強大的調試工具更是提供了很多便利，現將開發工具常用的快捷鍵整理如下，歡迎交流。
本頁介紹 Chrome DevTools 中所有鍵盤快捷鍵的參考信息。一些快捷鍵全局可用，而其他快捷鍵會特定於單一面板。
您也可以在提示中找到快捷鍵。將鼠標懸停在 DevTools 的 UI 元素上可以顯示元素的提示。 如果元素有快捷鍵，提示將包含快捷鍵。
| 訪問 DevTools |
在 Windows 上 |
在 Mac 上 |
| 打開 Developer Tools |
F12、Ctrl + Shift + I |
Cmd + Opt + I |
| 打開/切換檢查元素模式和瀏覽器窗口 |
Ctrl + Shift + C |
Cmd + Shift + C |
| 打開 Developer Tools 並聚焦到控制台 |
Ctrl + Shift + J |
Cmd + Opt + J |
| 檢查檢查器（取消停靠第一個后按） |
Ctrl + Shift + I |
Cmd + Opt + I |
全局鍵盤快捷鍵
下列鍵盤快捷鍵可以在所有 DevTools 面板中使用：
| 全局快捷鍵 |
Windows |
Mac |
| 顯示一般設置對話框 |
?、F1 |
? |
| 下一個面板 |
Ctrl + ] |
Cmd + ] |
| 上一個面板 |
Ctrl + [ |
Cmd + [ |
| 在面板歷史記錄中后退 |
Ctrl + Alt + [ |
Cmd + Opt + [ |
| 在面板歷史記錄中前進 |
Ctrl + Alt + ] |
Cmd + Opt + ] |
| 更改停靠位置 |
Ctrl + Shift + D |
Cmd + Shift + D |
| 打開 Device Mode |
Ctrl + Shift + M |
Cmd + Shift + M |
| 切換控制台/在設置對話框打開時將其關閉 |
Esc |
Esc |
| 刷新頁面 |
F5、Ctrl + R |
Cmd + R |
| 刷新忽略緩存內容的頁面 |
Ctrl + F5、Ctrl + Shift + R |
Cmd + Shift + R |
| 在當前文件或面板中搜索文本 |
Ctrl + F |
Cmd + F |
| 在所有源中搜索文本 |
Ctrl + Shift + F |
Cmd + Opt + F |
| 按文件名搜索（除了在 Timeline 上） |
Ctrl + O、Ctrl + P |
Cmd + O、Cmd + P |
| 放大（焦點在 DevTools 中時） |
Ctrl + + |
Cmd + Shift + + |
| 縮小 |
Ctrl + - |
Cmd + Shift + - |
| 恢復默認文本大小 |
Ctrl + 0 |
Cmd + 0 |
按面板分類的鍵盤快捷鍵
Elements
| Elements 面板 |
Windows |
Mac |
| 撤消更改 |
Ctrl + Z |
Cmd + Z |
| 重做更改 |
Ctrl + Y |
Cmd + Y、Cmd + Shift + Z |
| 導航 |
向上鍵、向下鍵 |
向上鍵、向下鍵 |
| 展開/折疊節點 |
向右鍵、向左鍵 |
向右鍵、向左鍵 |
| 展開節點 |
點擊箭頭 |
點擊箭頭 |
| 展開/折疊節點及其所有子節點 |
Ctrl + Alt + 點擊箭頭圖標 |
Opt + 點擊箭頭圖標 |
| 編輯屬性 |
Enter、雙擊屬性 |
Enter、雙擊屬性 |
| 隱藏元素 |
H |
H |
| 切換為以 HTML 形式編輯 |
F2 |
|
Styles 邊欄
Styles 邊欄中可用的快捷鍵：
| Styles 邊欄 |
Windows |
Mac |
| 編輯規則 |
點擊 |
點擊 |
| 插入新屬性 |
點擊空格 |
點擊空格 |
| 轉到源中樣式規則屬性聲明行 |
Ctrl + 點擊屬性 |
Cmd + 點擊屬性 |
| 轉到源中屬性值聲明行 |
Ctrl + 點擊屬性值 |
Cmd + 點擊屬性值 |
| 在顏色定義值之間循環 |
Shift + 點擊顏色選取器框 |
Shift + 點擊顏色選取器框 |
| 編輯下一個/上一個屬性 |
Tab、Shift + Tab |
Tab、Shift + Tab |
| 增大/減小值 |
向上鍵、向下鍵 |
向上鍵、向下鍵 |
| 以 10 為增量增大/減小值 |
Shift + Up、Shift + Down |
Shift + Up、Shift + Down |
| 以 10 為增量增大/減小值 |
PgUp、PgDown |
PgUp、PgDown |
| 以 100 為增量增大/減小值 |
Shift + PgUp、Shift + PgDown |
Shift + PgUp、Shift + PgDown |
| 以 0.1 為增量增大/減小值 |
Alt + 向上鍵、Alt + 向下鍵 |
Opt + 向上鍵、Opt + 向下鍵 |
Sources
| Sources 面板 |
Windows |
Mac |
| 暫停/繼續腳本執行 |
F8、Ctrl + \ |
F8、Cmd + \ |
| 越過下一個函數調用 |
F10、Ctrl + ' |
F10、Cmd + ' |
| 進入下一個函數調用 |
F11、Ctrl + ; |
F11、Cmd + ; |
| 跳出當前函數 |
Shift + F11、Ctrl + Shift + ; |
Shift + F11、Cmd + Shift + ; |
| 選擇下一個調用框架 |
Ctrl + . |
Opt + . |
| 選擇上一個調用框架 |
Ctrl + , |
Opt + , |
| 切換斷點條件 |
點擊行號、Ctrl + B |
點擊行號、Cmd + B |
| 編輯斷點條件 |
右鍵點擊行號 |
右鍵點擊行號 |
| 刪除各個單詞 |
Ctrl + Delete |
Opt + Delete |
| 為某一行或選定文本添加注釋 |
Ctrl + / |
Cmd + / |
| 將更改保存到本地修改 |
Ctrl + S |
Cmd + S |
| 保存所有更改 |
Ctrl + Alt + S |
Cmd + Opt + S |
| 轉到行 |
Ctrl + G |
Ctrl + G |
| 按文件名搜索 |
Ctrl + O |
Cmd + O |
| 跳轉到行號 |
Ctrl + P + 數字 |
Cmd + P + 數字 |
| 跳轉到列 |
Ctrl + O + 數字 + 數字 |
Cmd + O + 數字 + 數字 |
| 轉到成員 |
Ctrl + Shift + O |
Cmd + Shift + O |
| 關閉活動標簽 |
Alt + W |
Opt + W |
| 運行代碼段 |
Ctrl + Enter |
Cmd + Enter |
在代碼編輯器內
| 代碼編輯器 |
Windows |
Mac |
| 轉到匹配的括號 |
Ctrl + M |
|
| 跳轉到行號 |
Ctrl + P + 數字 |
Cmd + P + 數字 |
| 跳轉到列 |
Ctrl + O + 數字 + 數字 |
Cmd + O + 數字 + 數字 |
| 切換注釋 |
Ctrl + / |
Cmd + / |
| 選擇下一個實例 |
Ctrl + D |
Cmd + D |
| 撤消上一個選擇 |
Ctrl + U |
Cmd + U |
Timeline
| Timeline 面板 |
Windows |
Mac |
| 開始/停止記錄 |
Ctrl + E |
Cmd + E |
| 保存時間線數據 |
Ctrl + S |
Cmd + S |
| 加載時間線數據 |
Ctrl + O |
Cmd + O |
Profiles
| Profiles 面板 |
Windows |
Mac |
| 開始/停止記錄 |
Ctrl + E |
Cmd + E |
控制台
| 控制台快捷鍵 |
Windows |
Mac |
| 接受建議 |
向右鍵 |
向右鍵 |
| 上一個命令/行 |
向上鍵 |
向上鍵 |
| 下一個命令/行 |
向下鍵 |
向下鍵 |
| 聚焦到控制台 |
Ctrl + ` |
Ctrl + ` |
| 清除控制台 |
Ctrl + L |
Cmd + K、Opt + L |
| 多行輸入 |
Shift + Enter |
Ctrl + Return |
| 執行 |
Enter |
Return |
Device Mode
| Device Mode 快捷鍵 |
Windows |
Mac |
| 雙指張合放大和縮小 |
Shift + 滾動 |
Shift + 滾動 |
抓屏時
| 抓屏快捷鍵 |
Windows |
Mac |
| 雙指張合放大和縮小 |
Alt + 滾動、Ctrl + 點擊並用兩個手指拖動 |
Opt + 滾動、Cmd + 點擊並用兩個手指拖動 |
| 檢查元素工具 |
Ctrl + Shift + C |
Cmd + Shift + C |
