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

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

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

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

打开开发者工具

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

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

在键盘上:

打开开发者工具在Windows在Mac打开开发者工具F12 ， Ctrl + 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(样式)窗格

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

Sources 面板

•  不要在异常处理中暂停。
•  在所有的异常处理中暂停（包括那些在try/catch块中捕获的）。
•  在未捕获的异常处理时暂停（通常是你想要的）。

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 + 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 + RightOpt + Right在标签页浏览历史记录的前一页Backspace, Alt + LeftBackspace, Opt + Left选中地址栏内容F6, Ctrl + L, Alt + DCmd + L, Opt + D在地址栏添加一个 ？ 号来执行用默认搜索引擎的关键字搜索Ctrl + K, Ctrl + ECmd + K, Cmd + E

说明

翻译自：https://developers.google.com/web/tools/chrome-devtools/shortcuts