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

开发者工具有一些内置的快捷键,可以帮助大家在日常工作中节省时间。下面是一些快捷方式已以及对应的快捷键(Windows/Linux/Mac),有一些快捷键是全局的,有一些是特定面板才有的。

打开开发者工具

在谷歌浏览器里面你可以使用以下的方式打开:

  • 浏览器右上角的菜单里面选择--更多工具--开发者工具
  • 在任何页面当中右击选择--审查元素
XWindows / LinuxMac
打开开发者工具F12, Ctrl + Shift + ICmd + Opt + I
在审查窗口和浏览窗口之间切换Ctrl + Shift + CCmd + Shift + C
打开开发者工具并且切换到控制台Ctrl + Shift + JCmd + Opt + J
审查审查器(需要先脱离浏览窗口)Ctrl + Shift + ICmd + Opt + I

当开发者工具窗口打开的时候,键入 ? or F1 打开常规设置; Esc 关闭设置对话框。

所有面板

XWindows / LinuxMac
打开常规设置?, F1?
下一个面板Ctrl + ]Cmd + ]
上一个面板Ctrl + [Cmd + [
历史中的上一个面板Ctrl + Alt + [Cmd + Alt + [
历史中的下一个面板Ctrl + Alt + ]Cmd + Alt + ]
切换Dev窗口位置Ctrl + Shift + DCmd + Shift + D
打开设备模式 (v38+)Ctrl + Shift + MCmd + Shift + M
切换控制台 / 当设置对话框打开的时候关闭EscEsc
刷新页面F5, Ctrl + RCmd + R
不缓存刷新页面Ctrl + F5, Ctrl + Shift + RCmd + Shift + R
在当前面板或者文件搜索文本Ctrl + FCmd + F
从所有资源中搜索文本Ctrl + Shift + FCmd + Alt + F
通过文件名搜索(Timeline例外)Ctrl + O, Ctrl + OCmd + O, Cmd + O
放大(当开发者工具处于窗口激活状态时候)Ctrl + +Shift + +
缩小Ctrl + -Shift + -
还原文字大小Ctrl + 0Shift + 0

元素面板

XWindows / LinuxMac
撤销Ctrl + ZCmd + Z
重做Ctrl + YCmd + Y, Cmd + Shift + Z
导航Up, DownUp, Down
展开收缩节点Right, LeftRight, Left
展开节点单击 tag单击 tag
展开收缩节点以及它的子元素Ctrl + Alt + 单击 arrow iconOpt + 单击 arrow icon
编辑属性Enter, 双击 attributeEnter, 双击 attribute
隐藏元素HH
编辑HTMLF2-

右键单击元素你可以:

  • 强制元素的伪元素状态 (:active, :hover, :focus, :visited)
  • 设置元素的断点(Subtree modifications, Attribute modification, Node removal)
  • 清空控制台

样式侧边栏

XWindows / LinuxMac
编辑规则Single-clickSingle-click
加入新属性单击 whitespace单击 whitespace
跳转到属性在文件中的定义行数Ctrl + 单击 propertyCmd + 单击 property
跳转到属性值在文件中的定义行数Ctrl + 单击 property valueCmd + 单击 property value
循环颜色的表示形式Shift + 单击 color picker boxShift + 单击 color picker box
自动填充建议Ctrl + SpaceCmd + Space
编辑下一个/上一个属性Tab, Shift + TabTab, Shift + Tab
增减数值Up, DownUp, Down
增减数值 by 10Shift + Up, Shift + DownShift + Up, Shift + Down
增减数值 by 10PgUp, PgDownPgUp, PgDown
增减数值 by 100Shift + PgUp, Shift +PgDownShift + PgUp, Shift +PgDown
增减数值 by 0.1Alt + Up, Alt + DownOpt + Up, Opt + Down

源代码面板

XWindows / LinuxMac
暂停 / 恢复脚本执行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 numberRight-单击 line number
删除单个单词Alt + DeleteOpt + Delete
注释整行或者选中的文字Ctrl + /Cmd + /
保存改变到本地Ctrl + SCmd + S
保存所有改变Ctrl + Alt + SCmd + Opt + S
跳到行Ctrl + GCtrl + G
通过文件名搜索Ctrl + OCmd + O
跳到某行Ctrl + P + :<number>Cmd + P + :<number>
跳到某列Ctrl + O + :<number> + :<number>Cmd + O + :<number> + :<number>
跳到某个成员Ctrl + Shift + OCmd + Shift + O
在控制台中执行选中的脚本Ctrl + Shift + ECmd + Shift + E
关闭当前的标签Alt + WOpt + W
运行代码片段Ctrl + EnterCmd + Enter
切换注释Ctrl + /Cmd + /

时间轴面板

XWindows / LinuxMac
开始/ 停止记录Ctrl + ECmd + E
保存时间轴出去Ctrl + SCmd + S
加载时间轴出去Ctrl + OCmd + O

配置文件面板

XWindows / LinuxMac
开始/ 停止记录Ctrl + ECmd + E

控制台

XWindows / LinuxMac
下一个建议TabTab
上一个建议Shift + TabShift + Tab
接受建议RightRight
上一条命令 / 行UpUp
下一条命令 / 行DownDown
激活控制台Ctrl + ~Ctrl + ~
清空控制台Ctrl + LCmd + K, Opt + L
换行Shift + EnterCtrl + Return
执行EnterReturn

控制台右键单击:

  • XMLHTTPRequest logging: 打开查看 XHR log
  • Preserve log upon navigation
  • Filter: 过滤脚本消息
  • Clear console: 清空控制台

视图调整

XWindows / LinuxMac
缩放大小Alt + Scroll,Ctrl + Cick and drag with two fingersOpt + Scroll, Cmd + Cick and drag with two fingers
元素查看工具Ctrl + Shift + CCmd + Shift + C

模拟器

XWindows / LinuxMac
缩放大小Shift + ScrollShift + Scroll

其他的Chrome快捷键

还有一些其他的Chrome 快捷键,不过不是只属于开发者工具的。

XWindows / LinuxMac
查找下一个Ctrl + GCmd + G
查找上一个Ctrl + Shift + GCmd + Shift + G
新建隐身窗口Ctrl + Shift + NCmd + Shift + N
切换书签栏Ctrl + Shift + BCmd + Shift + B
打开历史页Ctrl + HCmd + Y
打开下载页Ctrl + JCmd + Shift + J
打开任务管理器Shift + ESCShift + ESC
下一页历史Alt + RightAlt + Right
上一页历史Backspace, Alt + LeftBackspace, Alt + Left
选中地址栏的所有内容F6, Ctrl + L, Alt + DCmd + L, Alt + D
地址栏输入 a ? 然后输入关键字以你当前设置的搜索引擎来进行搜索Ctrl + K, Ctrl + ECmd + K, Cmd + E

来源:Keyboard Shortcuts - Google Chrome

标签: Chrome, 快捷键, 开发者工具

添加新评论