✨Chrome DevTools 使用指☞北 - 命令和快捷键 🔔

2024-09-13 443 阅读10分钟

Hello，这篇文章将带你深入了解 Chrome DevTools 的命令菜单运行命令、快捷键的强大特性。你将学会如何轻松调用命令菜单，通过简洁的指令快速实现各种操作。您也会学到快捷键的使用技巧，帮助您节省开发时间。

打开命令菜单 🌈

快捷键：Ctrl + Shift + P (Windows / Linux) 或 Command + Shift + P (Mac)
点击 :，然后选择 Run command

打开文件 🌈

方法 🐾

先打开命令菜单，之后删除 <
快捷键方式打开：Ctrl + P (Windows / Linux) 或 Command + P (Mac)
点击 : Customize and control DevTools，然后选择 Open file

截取区域屏幕截图 🌈

截取 Elements 面板中的节点的屏幕截图 🐾

右键单击你想要的节点，然后 Capture node screenshot

截取大于屏幕尺寸的节点的屏幕截图 🐾

同样右键单击你想要的节点，您也可以修改这个节点的样式，让它看起来更加美观，例如 padding: 100px
这样，您就得到了一个大于屏幕节点的截图，同时也可以看到自定义的样式

截取移动版网站的屏幕截图，并添加设备框架 🐾

切换到设备模式
点击 :，会看到有两个选项（Capture screenshot [本屏内容]）、（Capture full size screenshot [全部内容]）
在例如 Nest Hub 的设备上，配有框架，点击 : 后，点击 show device frame

自定义屏幕截图 🐾

运行命令 Ctrl + Shift + P，输入 screenshot，选择 capture area screenshot，可以进行页面上任意位置的截图

快捷键 🌈

用于打开开发者工具的键盘快捷键 🐾

如需打开开发者工具，请在光标聚焦于浏览器时按以下键盘快捷键视口：

操作	Mac	Windows / Linux
打开您上次使用的面板	`Command`+`Option`+`I`	`F12` 或 `Ctrl`+`Shift`+`I`
打开控制台面板	`Command`+`Option`+`J`	`Ctrl` + `Shift` + `J`
打开 Elements 面板	`Command` + `Shift` + `C` 或 `Command` + `Option` + `C`	`Ctrl` + `Shift` + `C`

全局键盘快捷键 🐾

大多数（如果不是全部）开发者工具面板中都提供以下键盘快捷键。

操作	Mac	Windows / Linux
显示设置	`?` 或 `Function` + `F1`	`?` 或 `F1`
将焦点移到下一个面板	`Command`+`]`	`Control`+`]`
将焦点移到上一个面板	`Command`+`[`	`Ctrl` + `[`
切换回您上次使用的插入基座。如果开发者工具在整个会话期间一直处于默认位置，那么此快捷键会将开发者工具还原到一个单独的窗口中	`Command`+`Shift`+`D`	`Ctrl` + `Shift` + `D`
切换 Device Mode	`Command`+`Shift`+`M`	`Ctrl` + `Shift` + `M`
切换检查元素模式	`Command`+`Shift`+`C`	`Ctrl` + `Shift` + `C`
打开命令菜单	`Command`+`Shift`+`P`	`Ctrl` + `Shift` + `P`
切换抽屉式导航栏	`转义`	`转义`
正常重新加载	`Command`+`R`	`F5` 或 `Ctrl`+`R`
硬重新加载	`Command`+`Shift`+`R`	`Ctrl`+`F5` 或 `Ctrl`+`Shift`+`R`
搜索当前面板中的文字。仅在 Elements、Console、Sources、Performance、Memory、JavaScript Profiler 和 Quick Source 面板中受支持。	`Command`+`F`	`Ctrl` + `F`
在抽屉式导航栏中打开搜索标签页，以便您可以在所有已加载的资源中搜索文本	`Command`+`Option`+`F`	`Ctrl` + `Shift` + `F`
在 Sources（来源）面板中打开文件	`Command` + `O` 或 `Command` + `P`	`Ctrl`+`O` 或 `Ctrl`+`P`
放大	`Command`+`Shift`+`+`	`Ctrl` + `Shift` + `+`
缩小	`Command`+`-`	`Ctrl` + `-`
恢复默认缩放级别	`Command`+`0`	`Ctrl`+`0`
运行代码段	按 `Command` + `O` 打开命令菜单，然后输入 `!`后跟脚本名称，然后按 `Enter` 键	按 `Ctrl` + `O` 打开命令菜单，然后输入 `!`后跟脚本名称，然后按 `Enter` 键

元素面板的键盘快捷键 🐾

操作	Mac	Windows / Linux
撤消更改	`Command`+`Z`	`Ctrl` + `Z`
重做更改	`Command`+`Shift`+`Z`	`Ctrl` + `Y`
选择当前所选元素上方 / 下方的元素	`向上箭头` / `向下箭头`	`向上箭头` / `向下箭头`
展开当前选定的节点。如果该节点已展开，此快捷键会选择其下面的元素	`向右箭头`	`向右箭头`
收起当前选定的节点。如果该节点已收起，此快捷键会选择其上方的元素	`向左箭头`	`向左箭头`
展开或收起当前选定的节点及其所有子级	按住 `Option`，然后点击元素名称旁边的箭头图标	按住 `Control` + `Alt`，然后点击元素名称旁边的箭头图标
切换当前所选元素的 Edit Attributes 模式	`输入`	`输入`
进入修改属性模式后，选择下一个 / 上一个属性	`Tab` / `Shift`+`Tab`	`Tab` / `Shift`+`Tab`
隐藏当前选定的元素	`H`	`H`
切换当前所选元素的以 HTML 形式修改模式	`函数` + `F2`	`F2`

“样式”窗格键盘快捷键 🐾

操作	Mac	Windows / Linux
转到声明属性值的行	按住 `Command` 键，然后点击属性值	按住 `Control`，然后点击属性值
循环遍历某个颜色值的 RGBA、HSLA 和十六进制表示	按住 `Shift`，然后点击相应值旁边的 Color Preview 框	按住 `Shift`，然后点击相应值旁边的 Color Preview 框
选择下一个 / 上一个属性或值	点击属性名称或值，然后按 `Tab` / `Shift` + `Tab`	点击属性名称或值，然后按 `Tab` / `Shift` + `Tab`
# 将属性值以 0.1 为增量递增 / 递减	点击某个值，然后按 `Option` + `向上箭头` / `Option` + `向下箭头`	点击某个值，然后按 `Alt` + `向上箭头` / `Alt` + `向下箭头`
将属性值递增 / 递减 1	点击某个值，然后按`向上箭头` / `向下箭头`	点击某个值，然后按`向上箭头` / `向下箭头`
将属性值以 10 为增量递增 / 递减	点击某个值，然后按 `Shift` + `向上箭头` / `Shift` + `向下箭头`	点击某个值，然后按 `Shift` + `向上箭头` / `Shift` + `向下箭头`
将属性值以 100 为增量递增 / 递减	点击某个值，然后按 `Command` + `向上箭头` / `Command` + `向下箭头`	点击某个值，然后按 `Ctrl` + `向上箭头` / `Control` + `向下箭头`
循环浏览角度值的度数 (deg)、坡度 (grad)、弧度 (rad) 和转角（转弯）表示法	按住 `Shift`，然后点击数值旁边的角度预览框	按住 `Shift`，然后点击数值旁边的角度预览框
以 1 为增量增大 / 减小角度值	点击值旁边的角度预览框，然后按`向上箭头` / `向下箭头`	点击值旁边的角度预览框，然后按`向上箭头` / `向下箭头`
以 10 为增量增大 / 减小角度值	点击值旁边的角度预览框，然后按 `Shift` + `向上箭头` / `Shift` + `向下箭头`	点击值旁边的角度预览框，然后按 `Shift` + `向上箭头` / `Shift` + `向下箭头`
将角度值增加 / 减少 15	点击值旁边的角度预览框，然后按 `Shift` 并点击 / 用鼠标滑动角度时钟叠加层	点击值旁边的角度预览框，然后按 `Shift` 并点击 / 用鼠标滑动角度时钟叠加层

“来源”面板的键盘快捷键 🐾

操作	Mac	Windows / Linux
暂停脚本执行（如果当前正在运行）或恢复（如果当前已暂停）	`F8` 或 `Command` + ``	`F8` 或 `Ctrl`+``
跳过下一个函数调用	`F10` 或 `Command`+`'`	`F10` 或 `Ctrl`+`'`
进入下一个函数调用	`F11` 或 `Command`+`;`	`F11` 或 `Ctrl`+`;`
跳出当前函数	`Shift` + `F11` 或 `Command` + `Shift` + `;`	`Shift` + `F11` 或 `Ctrl` + `Shift` + `;`
在暂停期间继续转到特定代码行	按住 `Command` 键，然后点击代码行	按住 `Control`，然后点击代码行
选择当前所选帧下方 / 上方的调用框架	`Ctrl`+`.` / `Ctrl`+`,`	`Ctrl`+`.` / `Ctrl`+`,`
保存对本地修改的更改	`Command`+`S`	`Ctrl` + `S`
保存所有更改	`Command`+`Option`+`S`	`Ctrl` + `Alt` + `S`
转到行	`Ctrl` + `G`	`Ctrl` + `G`
跳转到当前打开的文件的行号	按 `Command` + `O` 打开命令菜单，然后输入 `:` 后跟行号，然后按 `Enter`	按 `Ctrl` + `O` 打开命令菜单，输入 `:`，后跟行号，然后按 `Enter`
跳转到当前打开的文件的某一列（例如第 5 行、第 9 列）	按 `Command` + `O` 打开命令菜单，依次输入 `:`、行号、`:` 和列号，然后按 `Enter`	按 `Ctrl` + `O` 打开命令菜单，依次输入 `:`、行号、`:` 和列号，然后按 `Enter`
转到函数声明（如果当前打开的文件是 HTML 文件或脚本）或规则集（如果当前打开的文件是样式表）	按 `Command` + `Shift` + `O`，然后输入声明 / 规则集的名称，或从选项列表中选择它	按 `Ctrl` + `Shift` + `O`，然后输入声明 / 规则集的名称，或从选项列表中选择它
关闭使用中的标签页	`Option`+`W`	`Alt`+`W`
打开下一个或上一个标签页	`Function` + `Command` + `向上键`或`向下键`	`Ctrl`+`Page Up` 或 `Page Down`
开启/关闭左侧导航边栏	`Command`+`Shift`+`Y`	`Ctrl` + `Shift` + `Y`
切换右侧的 Debugger 边栏。	`Command`+`Shift`+`H`	`Ctrl` + `Shift` + `H`

代码编辑器键盘快捷键 🐾

操作	Mac	Windows / Linux
删除最后一个字词中直到光标为止的所有字符	`Option`+`Delete`	`Ctrl` + `Delete`
添加或移除代码行断点	将光标置于该行上，然后按 `Command` + `B`	将光标置于该线上，然后按 `Ctrl`+`B`
打开断点修改对话框，修改条件断点或日志点	将光标置于该行上，然后按 `Command` + `Alt` + `B`	将光标置于该线上，然后按 `Ctrl` + `Alt` + `B`
打开条件断点对话框	按住 `Command` 键并点击行号	按住 `Ctrl` 键的同时点击行号
打开 logpoint 对话框	按住 `Command` + `Shift` 键的同时点击行号	按住 `Ctrl` + `Shift` 键的同时点击行号
找到对应的括号	`Ctrl` + `M`	`Ctrl` + `M`
切换单行注释。如果选择了多行，则开发者工具会在每行的开头添加一条注释	`Command`+`/`	`Ctrl` + `/`
无论光标位于何处，均选中 / 取消选中下一个出现的位置。系统会同时突出显示出现的每一项	`Command`+`D` / `Command`+`U`	`Ctrl` + `D` / `Ctrl` + `U`

“网络”面板的键盘快捷键 🐾

操作	Mac	Windows / Linux
搜索标头、载荷和响应	`Command`+`F`	`Ctrl` + `F`
开始 / 停止录制	`Command`+`E`	`Ctrl` + `E`
记录重新加载	`Command`+`R`	`Ctrl` + `R`
重放所选的 XHR 请求	`R`	`R`
隐藏所选请求的详细信息	`转义`	`转义`

性能面板的键盘快捷键 🐾

操作	Mac	Windows / Linux
开始 / 停止录制	`Command`+`E`	`Ctrl` + `E`
保存记录	`Command`+`S`	`Ctrl` + `S`
加载录制内容	`Command`+`O`	`Ctrl` + `O`

“内存”面板的键盘快捷键 🐾

操作	Mac	Windows / Linux
开始 / 停止录制	`Command`+`E`	`Ctrl` + `E`

控制台面板键盘快捷键 🐾

操作	Mac	Windows / Linux
接受自动补全建议	`向右箭头`或 `Tab`	`向右箭头`或 `Tab`
拒绝自动补全建议	`转义`	`转义`
上下浏览自动补全列表	`向上箭头` / `向下箭头`或 `Ctrl` + `P` / `N`	`向上箭头` / `向下箭头`或 `Ctrl` + `P` / `N`
获取上一条对账单	`向上箭头`	`向上箭头`
获取下一个对账单	`向下箭头`	`向下箭头`
将重点放在控制台上	`Ctrl` + `	`Ctrl` + `
清空控制台	`Command` + `K` 或 `Option` + `L`	`Ctrl` + `L`
强制输入多行内容。请注意，默认情况下，DevTools 应检测多行场景，因此现在通常不需要此快捷键	`Shift`+`Return`	`Shift`+`Enter`
执行	`回车键`	`输入`
展开已记录到控制台的对象的所有子属性	按住 `Alt` 键，然后点击展开 >	按住 `Alt` 键，然后点击展开 >

“搜索”标签页键盘快捷键 🐾

操作	Mac	Windows / Linux
展开/收起所有搜索结果	`Command` + `Option` + `{` 或 `}`	`Ctrl`+`Shift`+`{` 或 `}`

“记录器”面板的键盘快捷键 🐾

操作	Mac	Windows / Linux
开始或停止录制	`Command`+`E`	`Ctrl` + `E`
重放录制内容	`Command`+`Enter`	`Ctrl` + `Enter`
复制录制内容或所选步骤	`Command`+`C`	`Ctrl`+`C`
切换代码视图	`Command`+`B`	`Ctrl` + `B`