[译]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