Chrome DevTools – 鍵盤和UI快捷鍵參考

Chrome DevTools有幾個內置的快捷鍵，能夠節省你的平常工做的時間。

本指南提供了Chrome DevTools中每一個快捷鍵的快速參考。雖然一些快捷方式在全局範圍內可用，但其餘的快捷方式用於特定的某些單個面板，並根據它可使用的位置分解。

您還能夠在提示工具中找到快捷方式。將鼠標懸停在某個元素上以顯示其提示工具。若是元素有快捷方式，提示工具將會包含它。

打開開發者工具

在Google Chrome中的任何網頁或APP均可以打開開發者工具:

• 在瀏覽器窗口的右上角打開Chrome menu (愚人碼頭注：新版本的Chrome menu圖標爲：), 而後選擇 Tools(工具) > Developer Tools(開發者工具)。
• 右鍵點擊頁面上任何元素並選擇 Inspect Element(檢查元素)。

在鍵盤上:

打開開發者工具	在Windows	在Mac
打開開發者工具	F12 ， Ctrl + Shift + I	Cmd + Opt + I
打開 / 切換檢查元素模式和瀏覽器窗口	Ctrl + Shift + C	Cmd + Shift + C
打開開發者工具並把焦點放在控制檯上	Ctrl + Shift + J	Cmd + Opt + J
用檢查工具進行檢查  (在非內嵌窗口的模式下，多按會重複建立工具窗口)	Ctrl + Shift + I	Cmd + Opt + I

全局的鍵盤快捷鍵

下面的鍵盤快捷鍵在全部的開發者工具面板中可用:

全局快捷鍵	Windows	Mac
顯示通常設置對話框	?, F1	?
下一個面板	Ctrl + ]	Cmd + ]
上一個面板	Ctrl + [	Cmd + [
後退面板歷史	Ctrl + Alt + [	Cmd + Opt + [
前進面板歷史	Ctrl + Alt + ]	Cmd + Opt + ]
改變停靠位置（內嵌或獨立窗口）	Ctrl + Shift + D	Cmd + Shift + D
打開設備模式	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
按文件名搜索 (時間軸除外)	Ctrl + O, Ctrl + P	Cmd + O, Cmd + P
放大（當焦點在開發者工具上）	Ctrl + +	Shift + +
縮小	Ctrl + -	Shift + -
恢復默認文本大小	Ctrl + 0	Shift + 0

面板中的鼠標快捷方式

Elements 面板

經過右鍵單擊一個元素，你能夠:

• 強制修改元素的僞類狀態: (:active, :hover, :focus, :visited)。
• 在元素上設置斷點：（Subtree modifications子樹修改, Attribute modification屬性修改稿, Node removal節點刪除）。
• 清空控制檯。

Styles(樣式)窗格

•  模擬元素的僞類狀態(:active, :hover, :focus, :visited)。
•  添加新的樣式選擇器。

Sources 面板

•  不要在異常處理中暫停。
•  在全部的異常處理中暫停（包括那些在try/catch塊中捕獲的）。
•  在未捕獲的異常處理時暫停（一般是你想要的）。

Console 面板

右鍵單擊 Console（控制檯）面板:

• Log XMLHttpRequest:打開查看XHR日誌
• 導航時保留日誌。
• Filter: 隱藏和取消隱藏腳本文件的信息。
• Clear console: 清除全部控制檯信息.

面板中的鍵盤快捷方式

Elements 面板

Elements 面板	Windows	Mac
撤銷修改	Ctrl + Z	Cmd + Z
重作修改	Ctrl + Y	Cmd + Y, Cmd + Shift + Z
導航	Up, Down	Up, Down
展開 / 摺疊節點	Right, Left	Right, Left
展開節點	剪頭上單擊	剪頭上單擊
展開 / 摺疊節點及其全部子節點	Ctrl + Alt + 點擊剪頭圖標	Opt + 點擊剪頭圖標
編輯屬性	Enter, 屬性上雙擊	Enter, 屬性上雙擊
隱藏元素	H	H
切換編輯HTML	F2

Styles(樣式)窗格

在Styles(樣式)窗格中可用的快捷方式:

Styles(樣式)窗格	Windows	Mac
編輯規則	單擊	單擊
插入新屬性	單擊空白處	單擊空白處
跳轉到 Sources 面板中樣式規則屬性聲明的那一行	Ctrl + 點擊屬性名	Cmd + 點擊屬性名
跳轉到 Sources 面板中屬性值聲明的那一行	Ctrl + 點擊屬性值	Cmd + 點擊屬性值
切換顏色值表示法	Shift + 點擊顏色選擇器小方塊	Shift + 點擊顏色選擇器小方塊
編輯 下一個/ 上一個 屬性	Tab, Shift + Tab	Tab, Shift + Tab
遞增 / 遞減值	Up, Down	Up, Down
遞增 / 遞減值 爲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 + Up, Alt + Down	Opt + Up, Opt + Down

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 + :數字 + :number	Cmd + O + :數字 + :number
進入成員	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

Console 面板

Console的快捷方式	Windows	Mac
接受提示命令	Right	Right
前一條命令行	Up	Up
下一條命令行	Down	Down
聚焦控制檯	Ctrl + `	Ctrl + `
清空控制檯	Ctrl + L	Cmd + K, Opt + L
多行輸入	Shift + Enter	Ctrl + Return
執行	Enter	Return

設備模式

設備模式的快捷方式	Windows	Mac
放大和縮小（Pinch，捏手勢）	Shift + Scroll	Shift + Scroll

屏幕中

屏幕的快捷方式	Windows	Mac
放大和縮小（Pinch，捏手勢）	Alt + Scroll,Ctrl + 點擊和拖動兩個手指	Opt + Scroll, Cmd + 點擊和拖動兩個手指
檢查元素的工具	Ctrl + Shift + C	Cmd + Shift + C

附加項：有用的快捷方式

這裏有一些其餘的 Chrome 快捷鍵，這些都瀏覽器通用的快捷鍵，並非 DevTools 內的特有的。 查看適用於Windows, Mac, 和 Linux的Chrome全部快捷鍵 :

更多的Chrome快捷方式	Windows	Mac
查找下一個	Ctrl + G	Cmd + G
查找上一個	Ctrl + Shift + G	Cmd + Shift + G
在隱身模式打開新窗口	Ctrl + Shift + N	Cmd + Shift + N
切換和關閉書籤欄	Ctrl + Shift + B	Cmd + Shift + B
查看歷史頁	Ctrl + H	Cmd + Y
查看下載頁面	Ctrl + J	Cmd + Shift + J
查看任務管理器	Shift + ESC	Shift + ESC
在標籤頁瀏覽歷史記錄的下一頁	Alt + Right	Opt + Right
在標籤頁瀏覽歷史記錄的前一頁	Backspace, Alt + Left	Backspace, Opt + Left
選中地址欄內容	F6, Ctrl + L, Alt + D	Cmd + L, Opt + D
在地址欄添加一個 ？ 號來執行用默認搜索引擎的關鍵字搜索	Ctrl + K, Ctrl + E	Cmd + K, Cmd + E

說明

翻譯自：https://developers.google.com/web/tools/chrome-devtools/shortcuts