键盘快捷键和UI快捷键参考

Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间。

本指南提供了Chrome DevTools中每个快捷键的快速参考。虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于特定的某些单个面板,并根据它可以使用的位置分解。

您还可以在提示工具中找到快捷方式。将鼠标悬停在某个元素上以显示其提示工具。如果元素有快捷方式,提示工具将会包含它。

打开开发者工具

在Google Chrome中的任何网页或APP都可以打开开发者工具:

  • 在浏览器窗口的右上角打开Chrome menu Chrome menu(注:新版本的Chrome menu图标为:Chrome menu), 然后选择 Tools(工具) > Developer Tools(开发者工具)。
  • 右键点击页面上任何元素并选择 Inspect Element(检查元素)。

在键盘上:

打开开发者工具在Windows在Mac
打开开发者工具F12Ctrl+Shift+ICmd+Opt+I
打开 / 切换检查元素模式和浏览器窗口Ctrl+Shift+CCmd+Shift+C
打开开发者工具并把焦点放在控制台上Ctrl+Shift+JCmd+Opt+J
用检查工具进行检查
(在非内嵌窗口的模式下,多按会重复创建工具窗口)
Ctrl+Shift+ICmd+Opt+I

全局的键盘快捷键

下面的键盘快捷键在所有的开发者工具面板中可用:

全局快捷键WindowsMac
显示一般设置对话框?,F1?
下一个面板Ctrl+]Cmd+]
上一个面板Ctrl+[Cmd+[
后退面板历史Ctrl+Alt+[Cmd+Opt+[
前进面板历史Ctrl+Alt+]Cmd+Opt+]
改变停靠位置(内嵌或独立窗口)Ctrl+Shift+DCmd+Shift+D
打开设备模式Ctrl+Shift+MCmd+Shift+M
切换控制台/关闭设置对话框(如果打开)EscEsc
刷新页面F5,Ctrl+RCmd+R
刷新页面并清除缓存Ctrl+F5,Ctrl+Shift+RCmd+Shift+R
在当前文件或面板中搜索文本Ctrl+FCmd+F
在所有来源中搜索文本Ctrl+Shift+FCmd+Opt+F
按文件名搜索 (时间轴除外)Ctrl+O,Ctrl+PCmd+O,Cmd+P
放大(当焦点在开发者工具上)Ctrl++Shift++
缩小Ctrl+-Shift+-
恢复默认文本大小Ctrl+0Shift+0

面板中的鼠标快捷方式

Elements 面板

通过右键单击一个元素,你可以:

  • 强制修改元素的伪类状态: (:active, :hover, :focus, :visited)。
  • 在元素上设置断点:(Subtree modifications子树修改, Attribute modification属性修改稿, Node removal节点删除)。
  • 清空控制台。

Styles(样式)窗格

  • Element Pseudostates 模拟元素的伪类状态(:active, :hover, :focus, :visited)。
  • Adding style selectors 添加新的样式选择器。

Sources 面板

  • Pause on Exception Button 不要在异常处理中暂停。
  • Pause on All Exceptions 在所有的异常处理中暂停(包括那些在try/catch块中捕获的)。
  • Pause on Uncaught Exceptions 在未捕获的异常处理时暂停(通常是你想要的)。

Console 面板

右键单击 Console(控制台)面板:

  • Log XMLHttpRequest:打开查看XHR日志
  • 导航时保留日志。
  • Filter: 隐藏和取消隐藏脚本文件的信息。
  • Clear console: 清除所有控制台信息.

面板中的键盘快捷方式

Elements 面板

Elements 面板WindowsMac
撤销修改Ctrl+ZCmd+Z
重做修改Ctrl+YCmd+Y,Cmd+Shift+Z
导航Up,DownUp,Down
展开 / 折叠节点Right,LeftRight,Left
展开节点剪头上单击剪头上单击
展开 / 折叠节点及其所有子节点Ctrl+Alt+点击剪头图标Opt+点击剪头图标
编辑属性Enter,属性上双击Enter,属性上双击
隐藏元素HH
切换编辑HTMLF2

Styles(样式)窗格

在Styles(样式)窗格中可用的快捷方式:

Styles(样式)窗格WindowsMac
编辑规则单击单击
插入新属性单击空白处单击空白处
跳转到 Sources 面板中样式规则属性声明的那一行Ctrl+点击属性名Cmd+点击属性名
跳转到 Sources 面板中属性值声明的那一行Ctrl+点击属性值Cmd+点击属性值
切换颜色值表示法Shift+点击颜色选择器小方块Shift+点击颜色选择器小方块
编辑 下一个/ 上一个 属性Tab,Shift+TabTab,Shift+Tab
递增 / 递减值Up,DownUp,Down
递增 / 递减值 为10Shift+Up,Shift+DownShift+Up,Shift+Down
递增 / 递减值 为10PgUp,PgDownPgUp,PgDown
递增 / 递减值 为100Shift+PgUp,Shift+PgDownShift+PgUp,Shift+PgDown
递增 / 递减值 为0.1Alt+Up,Alt+DownOpt+Up,Opt+Down

Sources 面板

Sources 面板WindowsMac
暂停/恢复脚本执行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
编辑断点条件右键单击行号右键单击行号
删除单组单词Ctrl+DeleteOpt+Delete
注释一行或注释选定文本Ctrl+/Cmd+/
注释一行或注释选定文本Ctrl+SCmd+S
保存所有更改Ctrl+Alt+SCmd+Opt+S
跳转到行Ctrl+GCtrl+G
以文件名搜索Ctrl+OCmd+O
跳转至行号Ctrl+P+ :数字Cmd+P+ :数字
跳转至列Ctrl+O+ :数字 + :numberCmd+O+ :数字 + :number
进入成员Ctrl+Shift+OCmd+Shift+O
关闭活动的标签Alt+WOpt+W
运行代码片段Ctrl+EnterCmd+Enter

在代码编辑器窗格中

代码编辑器WindowsMac
转到匹配的括号Ctrl+M
跳转至某行Ctrl+P+ :行号Cmd+P+ :行号
跳转至某列Ctrl+O+ :数字 + :数字Cmd+O+ :数字 + :数字
修改为注释Ctrl+/Cmd+/
找到下一次出现的地方Ctrl+DCmd+D
撤消最后的选择Ctrl+UCmd+U

Timeline (时间轴)面板

Timeline (时间轴)面板WindowsMac
启动/停止记录Ctrl+ECmd+E
保存时间线数据Ctrl+SCmd+S
载入时间线数据Ctrl+OCmd+O

Profiles 面板

Profiles 面板WindowsMac
启动/停止记录Ctrl+ECmd+E

Console 面板

Console的快捷方式WindowsMac
接受提示命令RightRight
前一条命令行UpUp
下一条命令行DownDown
聚焦控制台Ctrl+`Ctrl+`
清空控制台Ctrl+LCmd+K,Opt+L
多行输入Shift+EnterCtrl+Return
执行EnterReturn

设备模式

设备模式的快捷方式WindowsMac
放大和缩小(Pinch,捏手势)Shift+ScrollShift+Scroll

屏幕中


屏幕的快捷方式WindowsMac
放大和缩小(Pinch,捏手势)Alt+Scroll,Ctrl+点击和拖动两个手指Opt+Scroll,Cmd+点击和拖动两个手指
检查元素的工具Ctrl+Shift+CCmd+Shift+C


附加项:有用的快捷方式

这里有一些其他的 Chrome 快捷键,这些都浏览器通用的快捷键,并不是 DevTools 内的特有的。 查看适用于Windows, Mac, 和 Linux的Chrome所有快捷键 

更多的Chrome快捷方式WindowsMac
查找下一个Ctrl+G   Cmd+G 
查找上一个Ctrl+Shift+G Cmd+Shift+G   
在隐身模式打开新窗口Ctrl+Shift+N  Cmd+Shift+N  
切换和关闭书签栏 Ctrl+Shift+BCmd+Shift+B 
查看历史页Ctrl+HCmd+Y   
查看下载页面Ctrl+JCmd+Shift+J  
查看任务管理器    Shift+ESC&am