Chrome 開發者工具(DevTools)中所有快捷方式列表

jopen 9年前發布 | 74K 次閱讀 Chrome

Chrome DevTools提供了一些內置的快捷鍵，開發者利用這些快捷鍵可以節省常工作中很多日的開發時間。下面列出了每個快捷鍵在Windows/Linux及Mac中的對應鍵。其中一些快捷鍵對于DevTools全局可用，而另一些則只能在單個面板中使用。

打開DevTools

你可以通過以下任何一種方式來訪問DevTools：

打開瀏覽器右上角的Chrome菜單，然后選擇“更多工具”–“開發者工具”。

在頁面任何元素處點擊右鍵，然后選擇“審查元素”。

所有面板

	Windows / Linux	Mac
打開開發者工具	F12,Ctrl+Shift+I	Cmd+Opt+I
切換審查元素模式與瀏覽器窗口模式	Ctrl+Shift+C	Cmd+Shift+C
打開開發者工具并定位到控制臺	Ctrl+Shift+J	Cmd+Opt+J
Inspect the Inspector (undock first one and press)	Ctrl+Shift+I	Cmd+Opt+I

Elements面板

	Windows / Linux	Mac
顯示設置對話框	?,F1	?
下一個面板	Ctrl+]	Cmd+]
上一個面板	Ctrl+[	Cmd+[
最后一個面板	Ctrl+Alt+[	Cmd+Opt+[
第一個面板	Ctrl+Alt+]	Cmd+Opt+]
更改停靠位置(測試發現與添加書簽沖突)	Ctrl+Shift+D	Cmd+Shift+D
打開設備(Device)模式	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+O	Cmd+O,Cmd+O
放大 (當DevTools獲得焦點時)	Ctrl++	Shift++
縮小	Ctrl+-	Shift+-
恢復默認文字大小	Ctrl+0	Shift+0

右鍵點擊元素你可以：

更改元素狀態(:active,:hover,:focus,:visited)；

元素上設置斷點(更改子元素、更改屬性及刪除節點)；

清空控制臺

樣式側邊欄(Style Sidebar)

	Windows / Linux	Mac
撤銷更改	Ctrl+Z	Cmd+Z
重做	Ctrl+Y	Cmd+Y,Cmd+Shift+Z
導航	Up,Down	Up,Down
展開/折疊節點	Right,Left	Right,Left
展開節點	Single-click on arrow	Single-click on arrow
展開/折疊節點及其子元素	Ctrl+Alt+Click on arrow icon	Opt+Click on arrow icon
編輯屬性	Enter,Double-click on attribute	Enter,Double-click on attribute
隱藏元素	H	H
切換編輯HTML	F2

模仿元素偽狀態(:active,:hover,:focus,:visited)

添加新的樣式選擇器

Sources 面板

	Windows / Linux	Mac
編輯規則	Single-click	Single-click
插入新屬性	Single-click on whitespace	Single-click on whitespace
定位到樣式屬性定義處	Ctrl+Click on property	Cmd+Click on property
定位到屬性值定義處	Ctrl+Click on property value	Cmd+Click on property value
循環顏色值(rgba,hsl等)	Shift+Click on color picker box	Shift+Click on color picker box
編輯上/下一個屬性	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

Don’t pause on exceptions

Pause on All exceptions (including those caught within try/catch blocks)

Pause on uncaught exceptions (usually the one you want)

代碼編輯快捷鍵

	Windows / Linux	Mac
暫停/恢復腳本運行	F8,Ctrl+\	F8,Cmd+\
Step over next function call	F10,Ctrl+'	F10,Cmd+'
Step into next function call	F11,Ctrl+;	F11,Cmd+;
Step out of current function	Shift+F11,Ctrl+Shift+;	Shift+F11,Cmd+Shift+;
Select next call frame	Ctrl+.	Opt+.
Select previous call frame	Ctrl+,	Opt+,
Toggle breakpoint condition	Click on line number,Ctrl+B	Click on line number,Cmd+B
Edit breakpoint condition	Right-click on line number	Right-click on line number
Delete individual words	Alt+Delete	Opt+Delete
Comment a line or selected text	Ctrl+/	Cmd+/
Save changes to local modifications	Ctrl+S	Cmd+S
Save all changes	Ctrl+Alt+S	Cmd+Opt+S
Go to line	Ctrl+G	Ctrl+G
Search by filename	Ctrl+O	Cmd+O
Jump to line number	Ctrl+P+:<number>	Cmd+P+:<number>
Jump to column	Ctrl+O+:<number>+:<number>	Cmd+O+:<number>+:<number>
Go to member	Ctrl+Shift+O	Cmd+Shift+O
Close active tab	Alt+W	Opt+W
Run snippet	Ctrl+Enter	Cmd+Enter

TimeLine 面板

	Windows / Linux	Mac
跳轉到匹配位置	Ctrl+M
跳轉到指定行	Ctrl+P+:<number>	Cmd+P+:<number>
跳轉到指定列	Ctrl+O+:<number>+:<number>	Cmd+O+:<number>+:<number>
切換注釋	Ctrl+/	Cmd+/
選擇下一個出現位置	Ctrl+D	Cmd+D
撤銷上一次操作	Ctrl+U	Cmd+U

Profiles 面板

	Windows / Linux	Mac
啟動/停止記錄	Ctrl+E	Cmd+E
保存timeline數據	Ctrl+S	Cmd+S
加載timeline數據	Ctrl+O	Cmd+O

Console 控制臺

	Windows / Linux	Mac
啟動/停止記錄	Ctrl+E	Cmd+E

右鍵點擊控制臺：

XMLHttpRequest記錄：打開查看XHR的日志

導航處切換保存日志

過濾：隱藏與顯示腳本文件的信息

清空控制臺：清空控制臺所有信息

Screencasting

	Windows / Linux	Mac
Accept suggestion	Right	Right
上一個命令/行	Up	Up
下一條命令/行	Down	Down
控制臺獲取焦點	Ctrl+`	Ctrl+`
清空控制臺	Ctrl+L	Cmd+K,Opt+L
多行輸入	Shift+Enter	Ctrl+Return
執行	Enter	Return

Emulation

	Windows / Linux	Mac
Pinch zoom in and out	Alt+Scroll,Ctrl+Click and drag with two fingers	Opt+Scroll,Cmd+Click and drag with two fingers
Inspect element tool	Ctrl+Shift+C	Cmd+Shift+C

其他Chrome快捷方式

下面是一些瀏覽器中非常有用的額外的快捷方式(附：所有Windows/Linux/Mac快捷方式)

	Windows / Linux	Mac
Pinch zoom in and out	Shift+Scroll	Shift+Scroll

http://9iphp.com/web/javascript/chrome-devtools-shortcuts.html

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1425645551072.html

Chrome

	Windows / Linux	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,C