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