[译]GoogleChrome开发者工具快捷键
::: tip
这篇文章写于2015年,当时没有中文翻译,如今已经有了官方中文文档
:::
开发者工具有一些内置的快捷键,可以帮助大家在日常工作中节省时间。下面是一些快捷方式已以及对应的快捷键(Windows/Linux/Mac),有一些快捷键是全局的,有一些是特定面板才有的。
打开开发者工具
在谷歌浏览器里面你可以使用以下的方式打开:
- 浏览器右上角的菜单里面选择--更多工具--开发者工具
- 在任何页面当中右击选择--审查元素
| X | Windows / Linux | Mac |
| 打开开发者工具 | F12, Ctrl + Shift + I | Cmd + Opt + I |
| 在审查窗口和浏览窗口之间切换 | Ctrl + Shift + C | Cmd + Shift + C |
| 打开开发者工具并且切换到控制台 | Ctrl + Shift + J | Cmd + Opt + J |
| 审查审查器(需要先脱离浏览窗口) | Ctrl + Shift + I | Cmd + Opt + I |
当开发者工具窗口打开的时候,键入 ? or F1 打开常规设置; Esc 关闭设置对话框。
所有面板
| X | Windows / Linux | Mac |
| 打开常规设置 | ?, F1 | ? |
| 下一个面板 | Ctrl + ] | Cmd + ] |
| 上一个面板 | Ctrl + [ | Cmd + [ |
| 历史中的上一个面板 | Ctrl + Alt + [ | Cmd + Alt + [ |
| 历史中的下一个面板 | Ctrl + Alt + ] | Cmd + Alt + ] |
| 切换Dev窗口位置 | Ctrl + Shift + D | Cmd + Shift + D |
| 打开设备模式 (v38+) | 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 + Alt + F |
| 通过文件名搜索(Timeline例外) | Ctrl + O, Ctrl + O | Cmd + O, Cmd + O |
| 放大(当开发者工具处于窗口激活状态时候) | Ctrl + + | Shift + + |
| 缩小 | Ctrl + - | Shift + - |
| 还原文字大小 | Ctrl + 0 | Shift + 0 |
元素面板
| X | Windows / Linux | Mac |
| 撤销 | Ctrl + Z | Cmd + Z |
| 重做 | Ctrl + Y | Cmd + Y, Cmd + Shift + Z |
| 导航 | Up, Down | Up, Down |
| 展开收缩节点 | Right, Left | Right, Left |
| 展开节点 | 单击 tag | 单击 tag |
| 展开收缩节点以及它的子元素 | Ctrl + Alt + 单击 arrow icon | Opt + 单击 arrow icon |
| 编辑属性 | Enter, 双击 attribute | Enter, 双击 attribute |
| 隐藏元素 | H | H |
| 编辑HTML | F2 | - |
右键单击元素你可以:
- 强制元素的伪元素状态 (:active, :hover, :focus, :visited)
- 设置元素的断点(Subtree modifications, Attribute modification, Node removal)
- 清空控制台
样式侧边栏
| X | Windows / Linux | Mac |
| 编辑规则 | Single-click | Single-click |
| 加入新属性 | 单击 whitespace | 单击 whitespace |
| 跳转到属性在文件中的定义行数 | Ctrl + 单击 property | Cmd + 单击 property |
| 跳转到属性值在文件中的定义行数 | Ctrl + 单击 property value | Cmd + 单击 property value |
| 循环颜色的表示形式 | Shift + 单击 color picker box | Shift + 单击 color picker box |
| 自动填充建议 | Ctrl + Space | Cmd + Space |
| 编辑下一个/上一个属性 | Tab, Shift + Tab | Tab, Shift + Tab |
| 增减数值 | Up, Down | Up, Down |
| 增减数值 by 10 | Shift + Up, Shift + Down | Shift + Up, Shift + Down |
| 增减数值 by 10 | PgUp, PgDown | PgUp, PgDown |
| 增减数值 by 100 | Shift + PgUp, Shift +PgDown | Shift + PgUp, Shift +PgDown |
| 增减数值 by 0.1 | Alt + Up, Alt + Down | Opt + Up, Opt + Down |
源代码面板
| X | 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 + , |
| 切换断点 | 单击 line number, Ctrl + B | 单击 line number, Cmd + B |
| 编辑断点条件 | Right-单击 line number | Right-单击 line number |
| 删除单个单词 | Alt + 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 + :number | Cmd + P + :number |
| 跳到某列 | Ctrl + O + :number + :number | Cmd + O + :number + :number |
| 跳到某个成员 | Ctrl + Shift + O | Cmd + Shift + O |
| 在控制台中执行选中的脚本 | Ctrl + Shift + E | Cmd + Shift + E |
| 关闭当前的标签 | Alt + W | Opt + W |
| 运行代码片段 | Ctrl + Enter | Cmd + Enter |
| 切换注释 | Ctrl + / | Cmd + / |
时间轴面板
| X | Windows / Linux | Mac |
| 开始/ 停止记录 | Ctrl + E | Cmd + E |
| 保存时间轴出去 | Ctrl + S | Cmd + S |
| 加载时间轴出去 | Ctrl + O | Cmd + O |
配置文件面板
| X | Windows / Linux | Mac |
| 开始/ 停止记录 | Ctrl + E | Cmd + E |
控制台
| X | Windows / Linux | Mac |
| 下一个建议 | Tab | Tab |
| 上一个建议 | Shift + Tab | Shift + Tab |
| 接受建议 | Right | Right |
| 上一条命令 / 行 | Up | Up |
| 下一条命令 / 行 | Down | Down |
| 激活控制台 | Ctrl + ~ | Ctrl + ~ |
| 清空控制台 | Ctrl + L | Cmd + K, Opt + L |
| 换行 | Shift + Enter | Ctrl + Return |
| 执行 | Enter | Return |
控制台右键单击:
- XMLHTTPRequest logging: 打开查看 XHR log
- Preserve log upon navigation
- Filter: 过滤脚本消息
- Clear console: 清空控制台
视图调整
| X | Windows / Linux | Mac |
| 缩放大小 | Alt + Scroll,Ctrl + Cick and drag with two fingers | Opt + Scroll, Cmd + Cick and drag with two fingers |
| 元素查看工具 | Ctrl + Shift + C | Cmd + Shift + C |
模拟器
| X | Windows / Linux | Mac |
| 缩放大小 | Shift + Scroll | Shift + Scroll |
其他的Chrome快捷键
还有一些其他的Chrome 快捷键,不过不是只属于开发者工具的。
| X | 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 | Alt + Right |
| 上一页历史 | Backspace, Alt + Left | Backspace, Alt + Left |
| 选中地址栏的所有内容 | F6, Ctrl + L, Alt + D | Cmd + L, Alt + D |
| 地址栏输入 a ? 然后输入关键字以你当前设置的搜索引擎来进行搜索 | Ctrl + K, Ctrl + E | Cmd + K, Cmd + E |
来源:Keyboard Shortcuts - Google Chrome