发布于 2016-05-29 09:26:18 | 251 次阅读 | 评论: 0 | 来源: 网络整理
DevTools 有许多内置快捷键，开发人员可以在他们的日常工作中使用快捷键来节省时间，提高开发效率。下面列出的每个快捷方式和其在 Windows/Linux 和 Mac 相应键位。一些快捷键可用在所有 DevTools，其它的只能用在指定单面板，或者被使用的时候是被打乱的。
打开 DevTools
要访问 DevTools，在谷歌 Chrome 浏览器里的任何网页或应用程序，你可以使用这些选项之一：
- 打开 Chrome 菜单
，在浏览器窗口的右上角，然后选择工具 > 开发工具。
- 在任何页面元素右键单击并选择检查元素。
| Windows |
Linux |
Mac |
| 打开开发者工具 |
F12, Ctrl + Shift + I |
Cmd + Opt + I |
| 切换审查元素模式与浏览器窗口模式 |
Ctrl + Shift + C |
Cmd + Shift + C |
| 打开 DevTools 将面板放到控制台 |
Ctrl + Shift + J |
Cmd + Opt + J |
| 检查（取消停靠第一个，然后按） |
Ctrl + Shift + I |
Cmd + Opt + I |
所有面板
| Windows |
Linux |
Mac |
| 显示设置对话框 |
?, F1 |
? |
| 下一个面板 |
Ctrl + ] |
Cmd + ] |
| 前一个面板 |
Ctrl + [ |
Cmd + [ |
| 最后一个面板 |
Ctrl + Alt + [ |
Cmd + Opt+ [ |
| 第一个面板 |
Ctrl + Alt + ] |
Cmd + Opt+ ] |
| 更改停靠位置 |
Ctrl + Shift + D |
Cmd+ Shift + D |
| 打开设备(Device)模式 |
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 + O |
Cmd + O , Cmd + O |
| 放大（当DevTools获得焦点时） |
Ctrl + + |
Shift + + |
| 缩小 |
Ctrl + - |
Shift + - |
| 恢复默认文字大小 |
Ctrl + 0 |
Shift + 0 |
Element 面板
| Windows |
Linux |
Mac |
| 撤销更改 |
Ctrl + Z |
Cmd +Z |
| 重做更改 |
Ctrl + Y |
Cmd + Y , Cmd + Shift + Z |
| 导航 |
Up, Down |
Up , Down |
| 展开/折叠节点 |
Right , Left |
Right , Left |
| 展开节点 |
Single-click on arrow |
Single-click on arrow |
| 展开/折叠节点及其所有子集 |
Ctrl + Alt + Click on arrow icon |
Opt + Click on arrow icon |
| 编辑属性 |
Enter , Double-click on attribute |
Enter , Double-click on attribute |
| 隐藏元素 |
H |
H |
| 切换编辑为HTML |
F2 |
|
右击一个元素你可以：
- 改变元素状态(:active,:hover,:focus,:visited)；
- 在元素上设置断点:(修改子元素，修改属性，删除节点)
- 清空控制台
侧边栏样式
| Windows |
Linux |
Mac |
| 打开直尺 |
单击 |
单击 |
| 插入新的属性 |
在空白空间单击 |
在空白空间单击 |
| 转至样式规则属性声明中源行 |
Ctrl + 点击属性 |
Cmd + 点击属性 |
| 转制属性值声明源行 |
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 |
- 模拟元素的伪状态（:active, :hover, :focus, :visited）
- 添加新的样式选择
Source 面板
| Windows |
Linux |
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 |
| 编辑断点条件 |
右击行号 |
击行号 |
| 删除单组单词 |
Alt + Delete |
Opt + Delete |
| 注释一行或注释选定文本 |
trl + / |
Cmd + / |
| 保存本地修改 |
Ctrl + S |
Cmd + 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 |
不能暂停异常
暂停所有异常（包括那些被捕获 try / catch 块内）
暂停未捕获的异常（通常是你想要的那个）
代码编辑器快捷键
| Windows |
Linux |
Mac |
| 匹配括号 |
Ctrl +M |
|
| 跳转至某行 |
Ctrl + P + 行号 |
Cmd + P + 行号 |
| 跳转至某列 |
Ctrl +O + 数字 + 数字 |
Cmd + O + 数字 + 数字 |
| 修改为注释 |
Ctrl + / |
Cmd + / |
| 找到下一次出现的地方 |
Ctrl + D |
Cmd + D |
| 撤销最后的选择 |
Ctrl + U |
Cmd + U |
TimeLine (时间轴)面板
| Windows |
Linux |
Mac |
| 开始/停止记录 |
Ctrl +E |
Cmd + E |
| 保存时间线数据 |
Ctrl +S |
Cmd + S |
| 载入时间线数据 |
Ctrl +O |
Cmd + O |
Profiles 面板
| Windows |
Linux |
Mac |
| 开始/停止记录 |
Ctrl + E |
Cmd + E |
Console(控制台)
| Windows |
Linux |
Mac |
| 接受提示命令 |
键盘右 |
键盘右 |
| 前一条命令行 |
键盘上 |
键盘上 |
| 下一条命令行 |
键盘下 |
键盘下 |
| 聚焦控制台 |
Ctrl +</kbd> | <kbd> Ctrl</kbd> +<kbd> |
| 清除控制台 |
Ctrl + L |
Cmd + K , Opt + L |
| 多行输入 |
Shift + Enter |
Ctrl +Return |
| 执行 |
Enter |
Return |
控制台右击：
- XMLHttpRequest logging: 打开查看 XHR 日志
- Preserve log 在导航栏上
- Filter: 隐藏或显示脚本文件的消息
- Clear console: 清除控制台
截屏
| Windows |
Linux |
Mac |
| 放大缩小 |
Alt + Scroll ,Ctrl +Click and drag with two fingers |
Opt + Scroll ,Cmd + Click and drag with two fingers |
| 检查元素的工具 |
Ctrl + Shift + C |
Cmd + Shift + C |
调试
Console(控制台)
| Windows |
Linux |
Mac |
| 放大缩小 |
Shift + Scroll |
Shift + Scroll |
Chrome 的其他快捷键
这里有一些其他的 Chrome 快捷键，这些都浏览器通用的快捷键，并不是 DevTools 内的特有的。查看适用于Windows，Mac 和 Linux的Chrome 的所有快捷键。
| Windows |
Linux |
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 |