炫意html5
最早CSS3和HTML5移动技术网站之一

Chrome 开发者工具-键盘快捷键和UI快捷键参考

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

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 &am

炫意HTML5 » Chrome 开发者工具-键盘快捷键和UI快捷键参考

Java基础教程Android基础教程