键盘快捷键和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