提升开发效率的Chrome开发者工具快捷键参考【文章导入测试】

本文只介绍 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 一个单位