-

快捷键

DevTools 有许多内置快捷键，开发人员可以在他们的日常工作中使用快捷键来节省时间，提高开发效率。下面列出的每个快捷方式和其在 Windows/Linux 和 Mac 相应键位。一些快捷键可用在所有 DevTools，其它的只能用在指定单面板，或者被使用的时候是被打乱的。

打开 DevTools

要访问 DevTools，在谷歌 Chrome 浏览器里的任何网页或应用程序，你可以使用这些选项之一：

  • 打开 Chrome 菜单chrome-menu.png，在浏览器窗口的右上角，然后选择工具 > 开发工具。
  • 在任何页面元素右键单击并选择检查元素。
WindowsLinuxMac
打开开发者工具F12, Ctrl + Shift + ICmd + Opt + I
切换审查元素模式与浏览器窗口模式Ctrl + Shift + CCmd + Shift + C
打开 DevTools 将面板放到控制台Ctrl + Shift + JCmd + Opt + J
检查（取消停靠第一个，然后按）Ctrl + Shift + ICmd + Opt + I

所有面板

WindowsLinuxMac
显示设置对话框?, F1?
下一个面板Ctrl + ]Cmd + ]
前一个面板Ctrl + [Cmd + [
最后一个面板Ctrl + Alt + [Cmd + Opt+ [
第一个面板Ctrl + Alt + ]Cmd + Opt+ ]
更改停靠位置Ctrl + Shift + DCmd+ Shift + D
打开设备(Device)模式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
根据文件名搜索（除了时间轴面板TimelineCtrl + O , Ctrl + OCmd + O , Cmd + O
放大（当DevTools获得焦点时）Ctrl + +Shift + +
缩小Ctrl + -Shift + -
恢复默认文字大小Ctrl + 0Shift + 0

Element 面板

WindowsLinuxMac
撤销更改Ctrl + ZCmd +Z
重做更改Ctrl + YCmd + Y , Cmd + Shift + Z
导航Up, DownUp , Down
展开/折叠节点Right , LeftRight , Left
展开节点Single-click on arrowSingle-click on arrow
展开/折叠节点及其所有子集Ctrl + Alt + Click on arrow iconOpt + Click on arrow icon
编辑属性Enter , Double-click on attributeEnter , Double-click on attribute
隐藏元素HH
切换编辑为HTMLF2

右击一个元素你可以：

  • 改变元素状态(:active,:hover,:focus,:visited)；
  • 在元素上设置断点:(修改子元素，修改属性，删除节点)
  • 清空控制台

侧边栏样式

WindowsLinuxMac
打开直尺单击单击
插入新的属性在空白空间单击在空白空间单击
转至样式规则属性声明中源行Ctrl + 点击属性Cmd + 点击属性
转制属性值声明源行Ctrl + 点击属性值Cmd + 点击属性值
获取颜色定义值Shift + 点击拾色器对话框Shift + 点击拾色器对话框
编辑前一个/后一个Tab ,Shift + TabTab ,Shift + Tab
增加/减小值Up , DownUp , Down
以间隔 10 增加/减小值Shift + Up , Shift + DownShift +Up , Shift + Down
以间隔 10 增加/减小值PgUp , PgDownPgUp , PgDown
以间隔 100 增加/减小值Shift + PgUp , Shift + PgDownShift + PgUp , Shift + PgDown
以间隔 0.1 增加/减小值Alt + Up , Alt + DownOpt + Up , Opt + Down
  • 模拟元素的伪状态（:active, :hover, :focus, :visited）
  • 添加新的样式选择

Source 面板

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

pause-gray.png 不能暂停异常

pause-blue.png 暂停所有异常（包括那些被捕获 try / catch 块内）

pause-purple.png 暂停未捕获的异常（通常是你想要的那个）

代码编辑器快捷键

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

TimeLine (时间轴)面板

WindowsLinuxMac
开始/停止记录Ctrl +ECmd + E
保存时间线数据Ctrl +SCmd + S
载入时间线数据Ctrl +OCmd + O

Profiles 面板

WindowsLinuxMac
开始/停止记录Ctrl + ECmd + E

Console(控制台)

WindowsLinuxMac
接受提示命令键盘右键盘右
前一条命令行键盘上键盘上
下一条命令行键盘下键盘下
聚焦控制台Ctrl +</kbd> | <kbd> Ctrl</kbd> +<kbd>
清除控制台Ctrl + LCmd + K , Opt + L
多行输入Shift + EnterCtrl +Return
执行EnterReturn

控制台右击：

  • XMLHttpRequest logging: 打开查看 XHR 日志
  • Preserve log 在导航栏上
  • Filter: 隐藏或显示脚本文件的消息
  • Clear console: 清除控制台

截屏

WindowsLinuxMac
放大缩小Alt + Scroll ,Ctrl +Click and drag with two fingersOpt + Scroll ,Cmd + Click and drag with two fingers
检查元素的工具Ctrl + Shift + CCmd + Shift + C

调试

Console(控制台)

WindowsLinuxMac
放大缩小Shift + ScrollShift + Scroll

Chrome 的其他快捷键

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

WindowsLinuxMac
查找下一个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

© 2023 mianshi8.net MIT license