键盘快捷键和UI快捷键参考

优质

小牛编辑

146浏览

2023-12-01

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	&am