专注于
IT技术和业内交流

Chrome-DevTools — 键盘快捷键

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

本指南在Chrome DevTools提供了一个快速参考工具可用于记忆每个快捷方式。

你也可以在工具提示中找到快捷键。在一个元素中来显示它的提示。如果元素有一个快捷键,工具提示将包括它。

访问工具

在谷歌浏览器的任何网页或APP都存在访问工具:

  • 在您的浏览器窗口的右上角打开Chrome menu Chrome menu, 然后选择 工具 >开发者工具.
  • 右键点击任何页面元素并选择 检查元素.

在键盘上:

访问工具 在Windows 在Mac
打开开发者工具 F12, Ctrl + Shift + I Cmd + Opt + I
打开 / 从检查元素模式和浏览器窗口之间的切换 Ctrl + Shift + C Cmd + Shift + C
打开开发者工具并把焦点放在控制台上 Ctrl + Shift + J Cmd + Opt + J
用检查工具进行检查(移除第一个) Ctrl + Shift + I Cmd + Opt + I

键盘的全局快捷键

下列快捷键在所有可用的工具面板:

全局快捷键 Windows Mac
显示一般设置对话框 ?, F1 ?
下一个面板 Ctrl + ] Cmd + ]
上一个面板 Ctrl + [ Cmd + [
面板历史记录 Ctrl + Alt + [ Cmd + Opt + [
面板历史 Ctrl + Alt + ] Cmd + Opt + ]
对接的位置变化 Ctrl + Shift + D Cmd + Shift + D
打开设备模式 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
按文件名搜索 (时间轴除外) Ctrl + O, Ctrl + P Cmd + O, Cmd + P
放大(集中在工具) Ctrl + + Shift + +
缩小 Ctrl + - Shift + -
恢复默认文本大小 Ctrl + 0 Shift + 0

鼠标面板快捷键

元素

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

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

Element Pseudostates 模拟一个元素的伪状态:(:active, :hover, :focus, :visited).

Adding style selectors 添加新的样式选择器.

Sources

Pause on Exception Button不在异常停留.

Pause on All Exceptions暂停所有异常(包括那些在尝试/捕获块捕获)。

Pause on Uncaught Exceptions在未捕获的异常停顿(通常是一个你想要的)。

Console

右键单击控制台:

  • XMLHttpRequest 记录:打开查看XHR日志
  • 在导航保存日志.
  • 过滤器: 隐藏和取消隐藏信息的脚本文件。.
  • 清除控制台: 清除所有控制台信息.

面板键盘快捷键

Elements

Elements 面板 Windows 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

样式侧边栏

在样式栏可用的快捷方式:

样式侧边栏 Windows Mac
编辑元素 Single-click Single-click
插入新样式 Single-click on whitespace Single-click on whitespace
到源代码中的样式进行属性声明 Ctrl + Click on property Cmd + Click on property
转到源代码中的属性值声明 Ctrl + Click on property value Cmd + Click on property value
周期性的通过颜色来定义值 Shift + Click on color picker box Shift + Click on color picker box
编辑 下一个/ 以前的 属性 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

Sources

Sources 面板 Windows 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 + ,
切换断点条件 Click on line number, Ctrl + B Click on line number, Cmd + B
编辑断点条件 Right-click on line number Right-click on line number
删除单词 Ctrl + Delete Opt + Delete
注释行或选定的文本 Ctrl + / Cmd + /
保存对局部修改的更改 Ctrl + S Cmd + S
保存所有更改 Ctrl + Alt + S Cmd + Opt + S
走线 Ctrl + G Ctrl + G
搜索的文件名 Ctrl + O Cmd + O
跳转到行数 Ctrl + P + :number Cmd + P + :number
跳到列数 Ctrl + O + :number + :number Cmd + O + :number + :number
去除 Ctrl + Shift + O Cmd + Shift + O
关闭活动标签 Alt + W Opt + W
运行代码段 Ctrl + Enter Cmd + Enter

在代码编辑器中

代码编辑器 Windows Mac
转到匹配括号 Ctrl + M
跳转到行数 Ctrl + P + :number Cmd + P + :number
跳转到列数 Ctrl + O + :number + :number Cmd + O + :number + :number
切换注释 Ctrl + / Cmd + /
选择下一个出现 Ctrl + D Cmd + D
撤消最后的选择 Ctrl + U Cmd + U

Timeline

Timeline 面板 Windows Mac
启动/停止记录 Ctrl + E Cmd + E
数据保存时间 Ctrl + S Cmd + S
负荷时间数据 Ctrl + O Cmd + O

Profiles

Profiles 面板 Windows Mac
启动/停止记录 Ctrl + E Cmd + E

Console

Console的快捷方式 Windows Mac
接受建议 Right Right
以前的命令/行 Up Up
下一个命令/行 Down Down
集中控制台 Ctrl + ` Ctrl + `
清除控制台 Ctrl + L Cmd + K, Opt + L
多行输入 Shift + Enter Ctrl + Return
执行 Enter Return

设备模式

设备模式的快捷方式 Windows Mac
放大和缩小 Shift + Scroll Shift + Scroll

当屏幕

屏幕的快捷方式 Windows 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

加分项:有用的快捷方式

一些额外的Chrome快捷方式可使用在浏览器中不特定的工具. 查看适用于Windows, Mac, 和 Linux的Chrome所有快捷键(需翻墙) :

更多的Chrome快捷方式 Windows 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

本文由张晋旖翻译、@海欧校验,感谢大家的参与.如有错译、漏译请留言我们会及时更正。

未经允许,不得转载本站任何文章:代码山 » Chrome-DevTools — 键盘快捷键

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们