title: 提升开发效率的 Chrome 开发者工具快捷键参考
layout: post
categories: 工具
tags: chrome devtool 开发者工具 快捷键
excerpt: 介绍与总结 Chrome 浏览器开发者工具(devtool)中的常用快捷键
本文只介绍 Chrome 一些主要和常用的快捷键，在其它浏览器的开发者工具中可类比，大部分快捷键作用都相同，只有个别差异。
全局（所有面板）
| 功能 |
快捷键 |
描述 |
| 打开开发者工具 |
F12 / Ctrl + Shift + I |
普通打开 |
| 打开 Console |
Ctrl + Shift + J |
打开工具并进入 Console 面板 |
| 检查元素 |
Ctrl + Shift + C |
进入 Elements 面板后开始选取页面元素 |
| 开发者工具设置 |
?/F1 |
开发者工具的所有相关设置 |
| 切换上一个面板 |
Ctrl + [ |
向左切换一个面板 |
| 切换下一个面板 |
Ctrl + ] |
向右切换一个面板 |
| 切换工具停靠位置 |
Ctrl + Shift + D |
即整个工具相对于浏览器的停靠位置，具体在悬浮、左侧、右侧、底部哪两个间切换，取决于最近两次操作 |
| 切换设备模式 |
Ctrl + Shift + M |
普通模式和响应式设备编辑模式间切换 |
| 切换抽屉工具栏 |
Esc |
切换显示工具底部的弹出式工具栏，如 Console 等 |
| 刷新网页 |
F5/Ctrl + R |
普通刷新页面，会读取 memory cache 和 disk cache |
| 强制刷新 |
Ctrl + F5/Ctrl + Shift + R |
禁用缓存刷新，类似于勾选 disable cache 后刷新 |
| 当前面板中搜索 |
Ctrl + F |
当前面板中搜索文本，如 Elements, Console 等 |
| 所有资源中搜索 |
Ctrl + Shift + F |
在当前网页加载的所有资源（Sources）中搜索文本 |
| 按文件名搜索 |
Ctrl + O/Ctrl + P |
同样搜索所有资源，只是搜索对象限制在文件名称上 |
| 放大字体 |
Ctrl + + |
放大整个开发者工具的字体与图形（不包括网页） |
| 缩小字体 |
Ctrl + - |
缩小开发者工具字体与图形的尺寸 |
| 恢复字体大小 |
Ctrl + 0 |
将开发者工具的字体与图形尺寸恢复默认大小 |
Elements（元素）面板
| 功能 |
快捷键 |
描述 |
| 撤消更改 |
Ctrl + Z |
撤销对 HTML 内容的修改 |
| 重做更改 |
Ctrl + Y |
恢复撤销前的修改 |
| 展开节点 |
→（右方向键） |
展开当前折叠的 HTML 元素节点 |
| 折叠节点 |
←（左方向键） |
折叠当前展开的 HTML 元素节点 |
| 递归展开节点 |
Alt + → |
递归地展开当前折叠的 HTML 元素节点 |
| 递归折叠节点 |
Alt + ← |
递归地折叠当前展开的 HTML 元素节点 |
| 编辑节点属性 |
Enter |
编辑所在元素节点的属性值（第一个属性的） |
| 编辑下个属性 |
Tab |
按下 Enter 编辑属性后，按 Tab 可以依次切换到后面的属性 |
| 编辑上个属性 |
Shift + Tab |
切换到当前元素节点的上一个属性值进行编辑 |
| 隐藏节点 |
H |
在页面中隐藏当前元素节点，实质是设置 visibility: hidden !important; 样式 |
| 编辑 HTML |
F2 |
以 HTML 的形式编辑当前元素节点内容，类似于右键菜单的 Edit as HTML |
| 编辑源样式 |
Ctrl + 点击 |
Style（样式）栏中，Ctrl + 鼠标点击 CSS 规则（选择器、属性或属性值）时，会跳转到源文件的相应位置 |
| 切换颜色类型 |
Shift + 点击 |
Shift + 点击样式颜色值左边的取色框时，色值类型会在 #, rgb(), hls() 之间切换 |
| 增/减数值 |
↑/↓（上、下方向键） |
单次增/减大小为 1 单位 |
| 0.1 倍增/减值 |
Alt + ↑/Alt + ↓ |
单次增/减 0.1 倍单位值 |
| 10 倍增/减值 |
Shift + ↑/Shift + ↓ |
单次增/减 10 倍单位值 |
| 100 倍增/减值 |
Ctrl + ↑/Ctrl + ↓ |
单次增/减 100 倍单位值 |
Console（控制台）面板
| 功能 |
快捷键 |
描述 |
| 清空输出 |
Ctrl + L |
清空控制台的历史输出 |
| 聚焦输入 |
Ctrl + `（反引号） |
把输入焦点聚焦到控制台输入框中，其它面板中使用则打开 Console 抽屉栏 |
| 接受建议 |
Enter/→ |
接受代码提示的第一个建议项 |
| 切换命令 |
↑/↓ |
切换上/下一条历史输入命令 |
| 运行代码 |
Enter |
回车运行输入的代码 |
| 换行输入 |
Shift + Enter |
由于直接回车是运行代码，所以想换行输入需要加 Shift |
Sources（资源）面板
| 功能 |
快捷键 |
描述 |
| 执行脚本 |
F8/Ctrl + \ |
切换执行或暂停脚本 |
| 单步执行 |
F10/Ctrl + ' |
（Debugger 栏中 ）单步调试脚本 |
| 单步进入 |
F11/Ctrl + ; |
单步进入调试（遇到函数就跳入） |
| 单步跳出 |
Shift + F11/Ctrl + Shift + ; |
单步跳出调试（跳出当前函数） |
| 下个调用帧 |
Ctrl + .（英文句号） |
调试时切换到调用栈（Call Stack 栏）中当前帧的下面一帧 |
| 上个调用帧 |
Ctrl + ,（英文逗号） |
调试时切换到当前调用的帧上面一帧（当前为栈顶则忽略） |
| 输出变量值 |
Ctrl + Shift + E |
在控制台输出编辑器中所选中的变量的值 |
| 观察变量值 |
Ctrl + Shift + A |
将编辑器中选中的变量值添加到 Watch 栏中 |
| 切换断点 |
Ctrl + B |
当焦点位于代码编辑器中时，用于切换当前行是否设置为断点 |
| 切换启用断点 |
Ctrl + Shift + B |
切换当前行的断点是否启用（不会删除断点） |
| 切换启用全部断点 |
Ctrl + F8 |
切换所有设置的断点是否启用 |
| 编辑断点 |
Ctrl + Alt + B |
编辑当前行的断点类型（Breakpoint, Conditional Breakpoint, Logpoint） |
代码编辑器（Sources 面板中）
| 功能 |
快捷键 |
描述 |
| 切换注释 |
Ctrl + / |
为当前行或选中内容添加/取消注释 |
| 保存修改 |
Ctrl + S |
保存对文件的修改（需要先启用侧栏的 Overrides 功能） |
| 保存所有更改 |
Ctrl + Alt + S |
保存编辑器打开的所有文件，同样需要启用 Overrides |
| 转到匹配括号 |
Ctrl + M |
跳转到与当前光标位置的括号匹配的另一个括号处 |
| 添加匹配项 |
Ctrl + D |
跳转并添加选择下一个与选择文本匹配的文本 |
| 撤销匹配项 |
Ctrl + U |
返回并撤销选择一个匹配项，与 Ctrl + D 相反 |
| 转到行 |
Ctrl + G |
跳转到指定行数 |
| 转到成员 |
Ctrl + Shift + O |
跳转到当前文件中的指定成员函数 |
| 上个编辑处 |
Alt + - |
跳转到上一个光标位于的编辑位置 |
| 下个编辑处 |
Alt + + |
跳转到下一个编辑位置 |
| 关闭活动标签 |
Alt + W |
关闭当前编辑的标签（文件） |
| 增/减CSS值 |
Alt + ↑/Alt +↓ |
编辑 CSS 源文件时，可对当前数值增/减 1 一个单位 |
| 10 倍增/减CSS值 |
Alt + PageUp↑/Alt + PageDown |
CSS 中对当前数值增/减 10 一个单位 |