本文介绍 Chrome DevTools 的基本用法及高级调试技巧，包括 DOM 断点、事件监听器断点、控制台命令、网络面板等功能，帮助开发者高效地定位问题。
Chrome Web Devtools 调试详解
目录
1. 呼出快捷指令面板：cmd + shift + p. 2
4. 事件监听器：Event Listener Breakpoints. 6
1. $(selector, [startNode])：单选择器... 7
2. ?（选择器，[startNode]）：全选择器... 8
3. $x(path, [startNode])：xpath选择器... 10
4. getEventListeners（object）：获取指定对象的绑定事件... 10
4. 给console编组：console.group() 12
4. 查看DOMContentLoaded和load事件信息... 16
1. Chrome Devtools 的用处
- 前端开发：开发预览、远程调试、性能调优、bug跟踪、断点调试等
- 后端开发：网络抓包、开发调试Response
- 测试：服务端API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试
- 其他：安装扩展插件，如AdBlock、Gliffy、Axure等
2. 菜单面板拆解
- Elements - 页面dom元素
- Console - 控制台
- Sources - 页面静态资源
- Network - 网络
- Performance - 设备加载性能分析
- Application - 应用信息，PWA/Storage/Cache/Frames
- Security - 安全分析
3. 常用命令和调试
1. 呼出快捷指令面板：cmd + shift + p
在Devtools打开的情况下，键入cmd + shift + p将其激活，然后开始在栏中键入要查找的命令或输入"?"号以查看所有可用命令。
- ...: 打开文件
- :: 前往文件
- @：前往标识符（函数，类名等）
- !: 运行脚本文件
- >: 打开某菜单功能
1.性能监视器：> performance monitor
将显示性能监视器以及相关信息，例如CPU，JS堆大小和DOM节点。
2.FPS实时监控性能：> FPS选择第一项
3.截图单个元素：> screen 选择Capture node screenhot
2. DOM断点调试
当你要调试特定元素的DOM中的更改时，可以使用此选项。这些是DOM更改断点的类型：
- Subtree modifications: 子节点删除或添加时
- Attributes modifications: 属性修改时
- Node Removal: 节点删除时
如上图：监听form标签，在input框获得焦点时，触发断点调试
3. 黑盒脚本：Blackbox Script
剔除多余脚本断点。
例如第三方（Javascript框架和库，广告等的堆栈跟踪）。
为避免这种情况并集中精力处理核心代码，在Sources或网络选项卡中打开文件，右键单击并选择Blackbox Script
4. 事件监听器：Event Listener Breakpoints
- 点击Sources面板
- 展开Event Listener Breakpoints
- 选择监听事件类别，触发事件启用断点
如上图：监听了键盘输入事件，就会跳到断点处。
5. 本地覆盖：local overrides
使用我们自己的本地资源覆盖网页所使用的资源。
类似的，使用DevTools的工作区设置持久化，将本地的文件夹映射到网络，在chrome开发者功能里面对css 样式的修改，都会直接改动本地文件，页面重新加载，使用的资源也是本地资源，达到持久化的效果。
- 创建一个文件夹以在本地添加替代内容；
- 打开Sources > Overrides > Enable local Overrides，选择本地文件夹
- 打开Elements，编辑样式，自动生成本地文件。
- 返回Sources，检查文件，编辑更改。
该项可以自动修改除XHR异步请求的资源，下载的文件若未格式化，可以点左下角。
4. 控制台内置指令
可以执行常见任务的功能，例如选择DOM元素，触发事件，监视事件，在DOM中添加和删除元素等。
这像是Chrome自身实现的jquery加强版。
1. $(selector, [startNode])：单选择器
document.querySelector的简写 语法：
$('a').href;
$('[test-id="logo-img"]').src;
$('#movie_player').click();
控制台还会预先查询对应的标签，十分贴心。 还可以触发事件，如暂停播放：
此函数还支持第二个参数startNode，该参数指定从中搜索元素的“元素”或Node。此参数的默认值为document
2. ?（选择器，[startNode]）：全选择器
document.querySelectorAll的简写，返回一个数组标签元素 语法：
?('.button')
可以用过循环实现切换全选 或者打印属性
此函数还支持第二个参数startNode，该参数指定从中搜索元素的“元素”或Node。此参数的默认值为document 用法：
var images = ?('img', document.querySelector('.devsite-header-background'));
for (each in images) {
console.log(images[each].src);
}
3. $x(path, [startNode])：xpath选择器
$x(path)返回与给定xpath表达式匹配的DOM元素数组。
例如，以下代码返回<p>页面上的所有元素：
$x("//p")
以下代码返回<p>包含<a>元素的所有元素：
$x("//p[a]")
xpath多用于爬虫抓取，前端的同学可能不熟悉。
4. getEventListeners（object）：获取指定对象的绑定事件
getEventListeners(object)返回在指定对象上注册的事件侦听器。返回值是一个对象，其中包含每个已注册事件类型（例如，click或keydown）的数组。每个数组的成员是描述为每种类型注册的侦听器的对象。 用法:
getEventListeners(document);
相对于到监听面板里查事件，这个API便捷多了。
5. 花式console
除了不同等级的warn和error打印外 还有其它非常实用的打印。
1. 变量打印：%s、%o、%d、和%c
const text = "文本1"
console.log(`打印${text}`)
除了标准的ES6语法，实际上还支持四种字符串输出。 分别是：
console.log("打印 %s", text)
- %s：字符串
- %o：对象
- %d：数字或小数
还有比较特殊的%c，可用于改写输出样式。
console.log('%c 文本1', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue')
当然，你也可以结合其它一起用(注意占位的顺序)。
const text = "文本1"
console.log('%c %s', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue', text)
你还可以这么玩：
console.log('%c Auth ',
'color: white; background-color: #2274A5',
'Login page rendered');
console.log('%c GraphQL ',
'color: white; background-color: #95B46A',
'Get user details');
console.log('%c Error ',
'color: white; background-color: #D33F49',
'Error getting user details');
2. 打印对象的小技巧
当我们需要打印多个对象时，经常一个个输出。且看不到对象名称，不利于阅读：
以前我的做法是这么打印：
console.log('hello', hello);
console.log('world', world);
这显然有点笨拙繁琐。其实，输出也支持对象解构：
console.log({hello, world});
3. 布尔断言打印：console.assert()
当你需要在特定条件判断时打印日志，这将非常有用。
- 如果断言为false，则将一个错误消息写入控制台。
- 如果断言是true，没有任何反应。
语法
console.assert（assertion，obj）
用法
const value = 1001
console.assert(value===1000,"value is not 1000")
4. 给console编组：console.group()
当你需要将详细信息分组或嵌套在一起以便能够轻松阅读日志时，可以使用此功能。
console.group('用户列表');
console.log('name: 张三');
console.log('job: 🐶前端');
// 内层
console.group('地址');
console.log('Street: 123 街');
console.log('City: 北京');
console.log('State: 在职');
console.groupEnd(); // 结束内层
console.groupEnd(); // 结束外层
5. 测试执行效率：console.time()
没有Performance API 精准，但胜在使用简便。
let i = 0;
console.time("While loop");
while (i < 1000000) {
i++;
}
console.timeEnd("While loop");
console.time("For loop");
for (i = 0; i < 1000000; i++) {
// For Loop
}
console.timeEnd("For loop");
6. 输出表格：console.table()
这个适用于打印数组对象。。。
let languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);
7. 打印DOM对象节点：console.dir()
打印出该对象的所有属性和属性值. console.dir()和console.log()的作用区别并不明显。若用于打印字符串，则输出一摸一样。
console.log（"Why，hello!"）；
console.dir（"Why，hello!"）;
在输出对象时也仅是显示不同（log识别为字符串输出，dir直接打印对象。）。
唯一显著区别在于打印dom对象上：
console.log(document)
console.dir(document)
一个打印出纯标签，另一个则是输出DOM树对象。
6.Network面板
1. 概述
Network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。
2. 主要功能
该面板主要包括5大块窗格(Pane)：
- Controls 控制Network的外观和功能。
- Filters 控制Requests Table具体显示哪些内容。
- Overview 显示获取到资源的时间轴信息。
- Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
- Summary 显示总的请求数、数据传输量、加载时间信息。
其中 Requests Table 显示如下信息列：
- Name 资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。
- Status HTTP状态码。
- Type 请求的资源MIME类型。
- Initiator 标记请求是由哪个对象或进程发起的（请求源）。
- Parser： 请求由Chrome的HTML解析器时发起的。
- Redirect：请求是由HTTP页面重定向发起的。
- Script：请求是由Script脚本发起的。
- Other：请求是由其他进程发起的，比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
- Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
- Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
- Timeline 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序。
3. 捕获屏幕
Controls窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器，视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。
以捕获屏幕为例，点击摄像机按钮（捕获屏幕），重新加载页面即可捕获屏幕。
双击其中的截屏可以放大显示，在放大的图下方可以点击跳转到上一帧或者下一帧。
单击则可以查看该帧被捕获时的网络请求信息，并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。
4. 查看DOMContentLoaded和load事件信息
DOMContentLoaded和load这两个事件会高亮显示。
DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。
load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。
DOMContentLoaded事件在Overview上用一条蓝色竖线标记，并且在Summary以蓝色文字显示确切的时间。
load事件同样会在Overview和Requests Table上用一条红色竖线标记，在Summary也会以红色文字显示确切的时间。
5. 查看具体资源的详情
通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：
- Headers 该资源的HTTP头信息。
- Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
- Response 显示HTTP的Response信息。
- Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
- Timing 显示资源在整个请求生命周期过程中各部分花费的时间。
针对上面4个Tab进行详细讲解一下各个功能：
① 查看资源HTTP头信息
在Headers标签里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers
、Request Headers以及Query String Parameters或者Form Data等信息。
② 查看资源预览信息
在Preview标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。
③ 查看资源HTTP的Response信息
在Response标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。
④ 查看资源Cookies信息
如果选择的资源在Request和Response过程中存在Cookies信息，则Cookies标签会自动显示出来，在里面可以查看所有的Cookies信息。
⑤ 分析资源在请求的生命周期内各部分时间花费信息
在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息，可能会涉及到如下过程的时间花费情况：
- Queuing 排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）.
- Stalled 从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间。
- Proxy Negotiation 与代理服务器连接的时间花费。
- DNS Lookup 执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话，则这个时间为0。
- Initial Connection / Connecting 建立连接的时间花费，包含了TCP握手及重试时间。
- SSL 完成SSL握手的时间花费。
- Request sent 发起请求的时间。
- Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。
- Content Download 获取Response响应数据的时间花费。
TTFB这个部分的时间花费如果超过200ms，则应该考虑对网络进行性能优化了，可以参见网络性能优化方案及里面的相关参考文档。
6. 查看资源的发起者(请求源)和依赖项
通过按住Shift并且把光标移到资源名称上，可以查看该资源是由哪个对象或进程发起的（请求源）和对该资源的请求过程中引发了哪些资源（依赖资源）。
在该资源的上方第一个标记为绿色的资源就是该资源的发起者（请求源），有可能会有第二个标记为绿色的资源是该资源的发起者的发起者，以此类推。
在该资源的下方标记为红色的资源是该资源的依赖资源。
7. 远程调试WebView
使用Chrome开发者工具在原生Android应用中调试WebView。
- 配置WebViews进行调试。
在 WebView类上调用静态方法setWebContentsDebuggingEnabled。
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
- 手机打开usb调试，插上电脑。
- 在Chrome地址栏输入：Chrome://inspect
正常的话在App中打开WebView时，chrome中会监听到并显示你的页面。 4. 点击页面下的inspect，就可以实时看到手机上WebView页面的显示状态了。（第一次使用可能会白屏，这是因为需要去https://chrome-devtools-frontend.appspot.com那边下载文件）
除了inspect标签，还有 Focus tab:
- 它会自动触发Android设备上的相同操作
其他应用里的WebView也可以，例如这是某个应用里的游戏，用的也是网页：
8.调试Node.js
具体可以查看阿里云社区的这篇：
Node.js应用程序故障排除手册-正确启用Chrome DevTools
2.Practical Chrome Devtools — Common commands & Debugging
3.Mobile web specialist — Remote Debugging
4.Console Utilities API Reference
扫一扫
2146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
