极客学院团队出品 · 更新于 2018-11-28 11:00:42

快捷键

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

打开 DevTools

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

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

所有面板

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

Element 面板

Windows Linux Mac
撤销更改 Ctrl + Z Cmd +Z
重做更改 Ctrl + Y Cmd + Y , Cmd + Shift + Z
导航 Up, Down Up , Down
展开/折叠节点 Right , Left Right , Left
展开节点 Single-click on arrow Single-click on arrow
展开/折叠节点及其所有子集 Ctrl + Alt + Click on arrow icon Opt + Click on arrow icon
编辑属性 Enter , Double-click on attribute Enter , Double-click on attribute
隐藏元素 H H
切换编辑为HTML F2

右击一个元素你可以:

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

侧边栏样式

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

Source 面板

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

pause-gray.png 不能暂停异常

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

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

代码编辑器快捷键

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

TimeLine (时间轴)面板

Windows Linux Mac
开始/停止记录 Ctrl +E Cmd + E
保存时间线数据 Ctrl +S Cmd + S
载入时间线数据 Ctrl +O Cmd + O

Profiles 面板

Windows Linux Mac
开始/停止记录 Ctrl + E Cmd + E

Console(控制台)

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

控制台右击:

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

截屏

Windows Linux Mac
放大缩小 Alt + Scroll ,Ctrl +Click and drag with two fingers Opt + Scroll ,Cmd + Click and drag with two fingers
检查元素的工具 Ctrl + Shift + C Cmd + Shift + C

调试

Console(控制台)

Windows Linux Mac
放大缩小 Shift + Scroll Shift + Scroll

Chrome 的其他快捷键

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

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 Opt + Right
历史记录选项卡的前一页 Backspace , Alt + Left Backspace , Opt + Left
选中地址栏内容 F6 , Ctrl + L ,Alt + D Cmd + L , Opt +D
在地址栏添加一个 ? 号来执行用默认搜索引擎的关键字搜索 Ctrl + K , Ctrl + E Cmd + K , Cmd + E
上一篇: DevTools 插件实... 下一篇: 设置