Chrome DevTools – 键盘和UI快捷键参考

最新推荐文章于 2023-02-15 14:51:48 发布

weixin_34185512

最新推荐文章于 2023-02-15 14:51:48 发布

阅读量269

点赞数

文章标签： 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`