Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间。
本指南提供了Chrome DevTools中每个快捷键的快速参考。虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于特定的某些单个面板,并根据它可以使用的位置分解。
您还可以在提示工具中找到快捷方式。将鼠标悬停在某个元素上以显示其提示工具。如果元素有快捷方式,提示工具将会包含它。
打开开发者工具
在Google Chrome中的任何网页或APP都可以打开开发者工具:
- 在浏览器窗口的右上角打开
Chrome menu
(愚人码头注:新版本的Chrome menu
图标为:), 然后选择Tools
(工具) >Developer Tools
(开发者工具)。 - 右键点击页面上任何元素并选择
Inspect Element
(检查元素)。
在键盘上:
打开开发者工具 | 在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 |
面板中的鼠标快捷方式
Elements 面板
通过右键单击一个元素,你可以:
- 强制修改元素的伪类状态: (
:active
,:hover
,:focus
,:visited
)。 - 在元素上设置断点:(
Subtree modifications
子树修改,Attribute modification
属性修改稿,Node removal
节点删除)。 - 清空控制台。
Styles(样式)窗格
-
模拟元素的伪类状态(
:active
,:hover
,:focus
,:visited
)。 - 添加新的样式选择器。
Sources 面板
- 不要在异常处理中暂停。
- 在所有的异常处理中暂停(包括那些在try/catch块中捕获的)。
- 在未捕获的异常处理时暂停(通常是你想要的)。
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
Chrome DevTools – 键盘和UI快捷键参考的更多相关文章
-
像黑客一样!Chrome 完全键盘操作指南(原生快捷键 + Vimium 插件)
有那么一波小伙伴,多数时候都不需要用到鼠标,通常他们正好是“黑客”.当你开始使用键盘操作一切时,便能体会到无需用鼠标瞄准按钮时的干脆,无需在键盘和鼠标之间移动手时的轻松. Chrome 原生自带大量快 ...
-
Chrome DevTools 面板全攻略
李华西,微医云服务团队前端开发工程师,喜欢瞎折腾,典型猫奴 Console 面板 此章节请打开 devtools/console/console.html 一起食用 一方面用来记录页面在执行过程中的信 ...
-
使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
来源: http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles 我们都希望创建高性能的Web应 ...
-
20个Chrome DevTools调试技巧
译者按: Chrome DevTools很强大,甚至可以替代IDE了! 原文: Art of debugging with Chrome DevTools 译者: Fundebug 为了保证可读性,本 ...
-
[转]Tips——Chrome DevTools - 25 Tips and Tricks
Chrome DevTools - 25 Tips and Tricks 原文地址:https://www.keycdn.com/blog/chrome-devtools 如何打开? 1.从浏览器菜单 ...
-
chrome devtools
Elements chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css. windows: ctrl + shift + ...
-
Chrome DevTools 调研笔记
1 说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2 Elements 2.1 功能 检查和实时更新页面的HTML与C ...
-
黄聪:如何扩展Chrome DevTools来获取页面请求
1. Chrome DevTools Extension 熟悉React的同学,可能对React Developer Tools并不陌生, 刚看到的时候,我也觉得很神奇, 因为React De ...
-
Chrome (开发者工具)快捷键
https://9iphp.com/web/javascript/chrome-devtools-shortcuts.html https://www.cnblogs.com/davidwang456 ...
随机推荐
-
关于MFC监听器的相关了解
最近有个项目,所搭框架为了减少耦合,希望MainFrame中View不依赖于Mainframe,即MainFrame中含有view类而view中不会包含MainFrame的相关信息. 现在遇到一个问题 ...
-
关于Fragment与Activity的想法
View,Fragment,Activity,ListView等都会涉及到Layout文件 不要从Layout来考虑,而是从Activity,Fragment,来考虑,Layout只是他们的一个属性 ...
-
load Event
document.addEventListener("DOMContentLoaded");------------------load document.body.addEven ...
-
用试探回溯法解决N皇后问题
学校数据结构的课程实验之一. 数据结构:(其实只用了一个二维数组) 算法:深度优先搜索,试探回溯 需求分析: 设计一个在控制台窗口运行的“n皇后问题”解决方案生成器,要求实现以下功能: 由n*n个方块 ...
-
zoj3329(概率dp)
题目连接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3754 题意:有三个骰子,分别有k1,k2,k3个面. 每次掷骰子,如 ...
-
TP框架中内置查询IP函数
系统内置了get_client_ip方法用于获取客户端的IP地址,使用示例: $ip = get_client_ip(); 如果要支持IP定位功能,需要使用扩展类库Org\Net\IpLocation ...
-
我对于B-树索引的内部结构与索引类型所做的笔记
图 3-1 B-树索引的内部结构 分支块和页块 B-树索引有两种类型的块: 用于查找的分支块和用于存储值的叶块.B-树索引的上层分支块包含指向下层索引块的索引数据.在图 3-1 中,根分支块包含条目 ...
-
[No0000171]wpf 类层次结构Class Hierarchy
1.DispatcherObject类表示具有相关联的对象分派器.调度程序处理要在特定线程上执行工作的请求队列.它能够在其关联的线程上调用方法. DispatcherObject是对象的基类,用于跟踪 ...
-
Hdu1796 How many integers can you find 2017-06-27 15:54 25人阅读 评论(0) 收藏
How many integers can you find Time Limit : 12000/5000ms (Java/Other) Memory Limit : 65536/32768K ...
-
死磕nginx系列--使用upsync模块实现负载均衡
问题描述 nginx reload是有一定损耗的,如果你使用的是长连接的话,那么当reload nginx时长连接所有的worker进程会进行优雅退出,并当该worker进程上的所有连接都释放时,进程 ...