孔子说:工欲善其事，必先利其器。
老子说：孔子说的对。
针对前端开发人员，谷歌浏览器的好处自然不言而喻，其强大的调试工具更是提供了很多便利，现将开发工具常用的快捷键整理如下，欢迎交流。
本页介绍 Chrome DevTools 中所有键盘快捷键的参考信息。一些快捷键全局可用，而其他快捷键会特定于单一面板。
您也可以在提示中找到快捷键。将鼠标悬停在 DevTools 的 UI 元素上可以显示元素的提示。 如果元素有快捷键，提示将包含快捷键。
| 访问 DevTools | 在 Windows 上 | 在 Mac 上 |
|---|
| 打开 Developer Tools |
F12、Ctrl + Shift + I |
Cmd + Opt + I |
| 打开/切换检查元素模式和浏览器窗口 |
Ctrl + Shift + C |
Cmd + Shift + C |
| 打开 Developer Tools 并聚焦到控制台 |
Ctrl + Shift + J |
Cmd + Opt + J |
| 检查检查器（取消停靠第一个后按） |
Ctrl + Shift + I |
Cmd + Opt + I |
全局键盘快捷键
下列键盘快捷键可以在所有 DevTools 面板中使用：
| 全局快捷键 | Windows | Mac |
|---|
| 显示一般设置对话框 |
?、F1 |
? |
| 下一个面板 |
Ctrl + ] |
Cmd + ] |
| 上一个面板 |
Ctrl + [ |
Cmd + [ |
| 在面板历史记录中后退 |
Ctrl + Alt + [ |
Cmd + Opt + [ |
| 在面板历史记录中前进 |
Ctrl + Alt + ] |
Cmd + Opt + ] |
| 更改停靠位置 |
Ctrl + Shift + D |
Cmd + Shift + D |
| 打开 Device Mode |
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 |
| 按文件名搜索（除了在 Timeline 上） |
Ctrl + O、Ctrl + P |
Cmd + O、Cmd + P |
| 放大（焦点在 DevTools 中时） |
Ctrl + + |
Cmd + Shift + + |
| 缩小 |
Ctrl + - |
Cmd + Shift + - |
| 恢复默认文本大小 |
Ctrl + 0 |
Cmd + 0 |
按面板分类的键盘快捷键
Elements
| Elements 面板 | Windows | Mac |
|---|
| 撤消更改 |
Ctrl + Z |
Cmd + Z |
| 重做更改 |
Ctrl + Y |
Cmd + Y、Cmd + Shift + Z |
| 导航 |
向上键、向下键 |
向上键、向下键 |
| 展开/折叠节点 |
向右键、向左键 |
向右键、向左键 |
| 展开节点 |
点击箭头 |
点击箭头 |
| 展开/折叠节点及其所有子节点 |
Ctrl + Alt + 点击箭头图标 |
Opt + 点击箭头图标 |
| 编辑属性 |
Enter、双击属性 |
Enter、双击属性 |
| 隐藏元素 |
H |
H |
| 切换为以 HTML 形式编辑 |
F2 |
|
Styles 边栏
Styles 边栏中可用的快捷键：
| Styles 边栏 | Windows | Mac |
|---|
| 编辑规则 |
点击 |
点击 |
| 插入新属性 |
点击空格 |
点击空格 |
| 转到源中样式规则属性声明行 |
Ctrl + 点击属性 |
Cmd + 点击属性 |
| 转到源中属性值声明行 |
Ctrl + 点击属性值 |
Cmd + 点击属性值 |
| 在颜色定义值之间循环 |
Shift + 点击颜色选取器框 |
Shift + 点击颜色选取器框 |
| 编辑下一个/上一个属性 |
Tab、Shift + Tab |
Tab、Shift + Tab |
| 增大/减小值 |
向上键、向下键 |
向上键、向下键 |
| 以 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 + 向上键、Alt + 向下键 |
Opt + 向上键、Opt + 向下键 |
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 + 数字 + 数字 |
Cmd + O + 数字 + 数字 |
| 转到成员 |
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 |
控制台
| 控制台快捷键 | Windows | Mac |
|---|
| 接受建议 |
向右键 |
向右键 |
| 上一个命令/行 |
向上键 |
向上键 |
| 下一个命令/行 |
向下键 |
向下键 |
| 聚焦到控制台 |
Ctrl + ` |
Ctrl + ` |
| 清除控制台 |
Ctrl + L |
Cmd + K、Opt + L |
| 多行输入 |
Shift + Enter |
Ctrl + Return |
| 执行 |
Enter |
Return |
Device Mode
| Device Mode 快捷键 | Windows | Mac |
|---|
| 双指张合放大和缩小 |
Shift + 滚动 |
Shift + 滚动 |
抓屏时
| 抓屏快捷键 | Windows | Mac |
|---|
| 双指张合放大和缩小 |
Alt + 滚动、Ctrl + 点击并用两个手指拖动 |
Opt + 滚动、Cmd + 点击并用两个手指拖动 |
| 检查元素工具 |
Ctrl + Shift + C |
Cmd + Shift + C |