您的位置:首页 » 分类: 前端工具 & 前端资源 » 文章: Chrome DevTools – 键盘和UI快捷键参考

Chrome DevTools – 键盘和UI快捷键参考

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

原文已经修改,只剩键盘快捷键,译文暂不修改。

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

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

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

打开开发者工具

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

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

在键盘上:

打开开发者工具 在Windows 在Mac
打开开发者工具 F12Ctrl + 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

面板中的鼠标快捷方式

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 面板 Windows Mac
撤销修改 Ctrl + Z Cmd + Z
重做修改 Ctrl + Y Cmd + Y, Cmd + Shift + Z
导航 Up, Down Up, Down
展开 / 折叠节点 Right, Left Right, Left
展开节点 剪头上单击 剪头上单击
展开 / 折叠节点及其所有子节点 Ctrl + Alt + 点击剪头图标 Opt + 点击剪头图标
编辑属性 Enter, 属性上双击 Enter, 属性上双击
隐藏元素 H H
切换编辑HTML F2

Styles(样式)窗格

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

Styles(样式)窗格 Windows Mac
编辑规则 单击 单击
插入新属性 单击空白处 单击空白处
跳转到 Sources 面板中样式规则属性声明的那一行 Ctrl + 点击属性名 Cmd + 点击属性名
跳转到 Sources 面板中属性值声明的那一行 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

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 + ,
切换断点条件 点击行号, Ctrl + B 点击行号, Cmd + B
编辑断点条件 右键单击行号 右键单击行号
删除单组单词 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 + :数字 Cmd + P + :数字
跳转至列 Ctrl + O + :数字 + :number Cmd + O + :数字 + :number
进入成员 Ctrl + Shift + O Cmd + Shift + O
关闭活动的标签 Alt + W Opt + W
运行代码片段 Ctrl + Enter Cmd + Enter

在代码编辑器窗格中

代码编辑器 Windows Mac
转到匹配的括号 Ctrl + M
跳转至某行 Ctrl + P + :行号 Cmd + P + :行号
跳转至某列 Ctrl + O + :数字 + :数字 Cmd + O + :数字 + :数字
修改为注释 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
放大和缩小(Pinch,捏手势) Shift + Scroll Shift + Scroll

屏幕中

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

附加项:有用的快捷方式

这里有一些其他的 Chrome 快捷键,这些都浏览器通用的快捷键,并不是 DevTools 内的特有的。 查看适用于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

说明

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

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

版权声明

本文仅用于学习、研究和交流目的,欢迎非商业性质转载。
转载请注明文章的完整链接:http://www.css88.com/archives/6854
作者(译者): 及 网站出处:CSS88.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注