[推薦] Chrome DevTools 快捷鍵

極力推薦一篇 Chrome DevTools 快捷鍵整合，提高開發效率 ~~ 篩選了一些個人比較少用的，留下這些都很常用，希望對大家有幫助。詳細可參考原文《 鍵盤快捷鍵參考 》。

本頁介紹 Chrome DevTools 中所有鍵盤快捷鍵的參考資訊。一些快捷鍵全域性可用，而其他快捷鍵會特定於單一皮膚。

您也可以在提示中找到快捷鍵。將滑鼠懸停在 DevTools 的 UI 元素上可以顯示元素的提示。 如果元素有快捷鍵，提示將包含快捷鍵。

訪問 DevTools

訪問 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
檢查元素工具	Ctrl + Shift + C	Cmd + Shift + C
下一個皮膚	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

控制檯

控制檯快捷鍵	Windows	Mac
接受建議	向右鍵	向右鍵
上一個命令/行	向上鍵	向上鍵
下一個命令/行	向下鍵	向下鍵
聚焦到控制檯(即使在其他皮膚上也可以輸入到控制檯)	Ctrl + | Ctrl +
清除控制檯	Ctrl + L	Cmd + K、Opt + L
多行輸入	Shift + Enter	Ctrl + Return

可能是我手短，敲到手指抽筋... 不過我相信經過這段抽搐期，我的除錯速度肯定會有飛一般的提高~ 希望對你也有所幫助

作者簡介：土撥鼠，蘆葦科技web前端開發工程師，代表作品：飛花亭小程式、續航基因、YY表情紅包、YY疊方塊直播競賽小遊戲。擅長網站建設、公眾號開發、微信小程式開發、小遊戲、公眾號開發，專注於前端框架、服務端渲染、SEO技術、互動設計、影象繪製、資料分析等研究，有興趣的小夥伴來撩撩我們~ web@talkmoney.cn

訪問 www.talkmoney.cn 瞭解更多