[推薦] Chrome DevTools 快捷鍵

極力推薦一篇 Chrome DevTools 快捷鍵整合，提升開發效率 ~~ 篩選了一些我的比較少用的，留下這些都很經常使用，但願對你們有幫助。詳細可參考原文《 鍵盤快捷鍵參考 》。

本頁介紹 Chrome DevTools 中全部鍵盤快捷鍵的參考信息。一些快捷鍵全局可用，而其餘快捷鍵會特定於單一面板。

您也能夠在提示中找到快捷鍵。將鼠標懸停在 DevTools 的 UI 元素上能夠顯示元素的提示。 若是元素有快捷鍵，提示將包含快捷鍵。

訪問 DevTools

訪問 DevTools	在 Windows 上	在 Mac 上
打開 Developer Tools	F十二、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
刷新頁面	F五、Ctrl + R	Cmd + R
刷新忽略緩存內容的頁面	Ctrl + F五、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
暫停/繼續腳本執行	F八、Ctrl + \	F八、Cmd + \
越過下一個函數調用	F十、Ctrl + '	F十、Cmd + '
進入下一個函數調用	F十一、Ctrl + ;	F十一、Cmd + ;
跳出當前函數	Shift + F十一、Ctrl + Shift + ;	Shift + F十一、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 瞭解更多