快捷键DevTools 有许多内置快捷键，开发人员可以在他们的日常工作中使用快捷键来节省时间，提高开发效率。下面列出的每个快捷方式和其在 Windows/Linux 和 Mac 相应键位。一些快捷键可用在所有 DevTools，其它的只能用在指定单面板，或者被使用的时候是被打乱的。 打开 DevTools要访问 DevTools，在谷歌 Chrome 浏览器里的任何网页或应用程序，你可以使用这些选项之一： - 打开 Chrome 菜单，在浏览器窗口的右上角，然后选择工具 > 开发工具。
- 在任何页面元素右键单击并选择检查元素。
| 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 |
不能暂停异常 暂停所有异常（包括那些被捕获 try / catch 块内） 暂停未捕获的异常（通常是你想要的那个） 代码编辑器快捷键| 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 |
 |
客服电话
APP下载
官方微信
请发表评论