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

原文：https://9iphp.com/web/javascript/chrome-devtools-shortcuts.html

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

所有面板

	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

Elements面板

	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)；
• 元素上设置断点(更改子元素、更改属性及删除节点)；
• 清空控制台

样式侧边栏(Style Sidebar)

	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

 模仿元素伪状态(:active,:hover,:focus,:visited)

 添加新的样式选择器

Sources 面板

	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

 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
跳转到匹配位置	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

TimeLine 面板

	Windows / Linux	Mac
启动/停止记录	Ctrl+E	Cmd+E
保存timeline数据	Ctrl+S	Cmd+S
加载timeline数据	Ctrl+O	Cmd+O

Profiles 面板

	Windows / Linux	Mac
启动/停止记录	Ctrl+E	Cmd+E

Console 控制台

	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

右键点击控制台：

• XMLHttpRequest记录：打开查看XHR的日志
• 导航处切换保存日志
• 过滤：隐藏与显示脚本文件的信息
• 清空控制台：清空控制台所有信息

Screencasting

	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

Emulation

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

其他Chrome快捷方式

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

	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

个人补充：这么多快捷键是很难记住的，window下可用F12打开devtools，然后F1打开相应的Settings面板后选择Shortcuts即可查看所有的快捷键。