Bobscript

[译]GoogleChrome开发者工具快捷键

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