学习Chrome Devtools 调试

前言（共分2部分内容）

常用命令和调试
黑盒脚本：Blackbox Script
控制台内置指令
远程调试WebView

1. Chrome Devtools 的用处

前端开发：开发预览、远程调试、性能调优、bug跟踪、断点调试等
后端开发：网络抓包、开发调试Response
测试：服务端API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试
其他：安装扩展插件，如AdBlock、Gliffy、Axure等

2. 菜单面板拆解

Elements - 页面dom元素
Console - 控制台
Sources - 页面静态资源
Network - 网络
Performance - 设备加载性能分析
Application - 应用信息，PWA/Storage/Cache/Frames
Security - 安全分析
Audits - 审计，自动化测试工具

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，检查文件，编辑更改。

6. 扩展：Local overrides 模拟 Mock 数据

来自：chrome 开发者工具 - local overrides

对于返回json 数据的接口，可以利用该功能，简单模拟返回数据。

比如：

api 为: http://www.xxx.com/api/v1/list
在根目录下，新建文件www.xxx.com/api/v1/list，list 文件中的内容，与正常接口返回格式相同。

对象或者数组类型，从而覆盖掉原接口请求。

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. 远程调试WebView

使用Chrome开发者工具在原生Android应用中调试WebView。

配置WebViews进行调试。

在 WebView类上调用静态方法setWebContentsDebuggingEnabled。
1. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
2. WebView.setWebContentsDebuggingEnabled(true);
3. }
手机打开usb调试，插上电脑。
在Chrome地址栏输入：Chrome://inspect

正常的话在App中打开WebView时，chrome中会监听到并显示你的页面。

点击页面下的inspect，就可以实时看到手机上WebView页面的显示状态了。（第一次使用可能会白屏，这是因为需要去https://chrome-devtools-frontend.appspot.com那边下载文件）

除了inspect标签，还有 Focus tab:

它会自动触发Android设备上的相同操作

通过本文学习，感觉很棒。控制台（edge）

var images=$$('img');
undefined
for(e in images){
console.log(images[e].src);
}

一下子就把所有图片列出来了。

第二部分：定制自己的调试工具

Chrome DevTools 是我们每天都用的工具，它可以查看元素、网络请求、断点调试 JS、分析性能问题等，是辅助开发的利器。

今天不讲怎么使用它，而是讲一个好玩的方向：定制自己的调试工具。

之前讲过，Chrome DevTools 和 Chrome 是分离的架构，两者之间通过 WebSocket 通信，通信协议是 Chrome DevTools Protocol，简称 CDP：

其实这不准确，具体原因后面揭秘。

上图中，UI 的部分叫做 frontend，解析网页、执行 JS 的部分叫做 backend。

backend 是集成在 Chrome 中的，但是 frontend 的部分是独立的。

我们可以从 npm 仓库下载 chrome-devtools-frontend 的代码，我这里用的是 1.0.672485 版本的：

npm install chrome-devtools-frontend@1.0.672485

下载下来的代码有个 front_end 目录，这个就是 Chrome DevTools 的前端代码：

它下面有几个 html：

我们 "npx http-server ." 起个静态服务看一下：

devtools_app.html 就是网页的那个调试页面：

node_app.html 就是 node 的那个调试页面：

这就是 Chrome DevTools 的 frontend 部分。

那怎么用这个独立的 frontend 呢？

给它配个 WebSocket 的 backend 不就行了？

用 node 创建个 WebSocket 服务端，打印下收到的消息：

const ws = require('ws');const wss = new ws.Server({ port: 8080 });wss.on('connection', function connection(ws) {ws.on('message', function message(data) {console.log('received: %s', data);  });
});

在 devtools_app.html 后面加上 ws=localhost:8080 的参数：

启动 ws 服务，你就会发现控制台打印了一系列收到的消息：

这就是 CDP 协议的数据。

那我们对接一下这个协议，返回相应格式的数据，能在 Chrome DevTools 里做显示么？

我们试一下。

打开 CDP 的文档 https://chromedevtools.github.io/devtools-protocol/

CDP 是按照不同的 Domain 分隔的，比如 DOM、CSS、Debugger 等。

我们找个网络相关的：

可能你看到这些协议也不知道怎么用，这时候可以先打开 Chrome DevTools 的 Protocol Monitor 面板，找个网页测试下：

看看 NetWork 部分都是怎么通过 CDP 交互的：

然后你会发现每次发请求前，backend 都会给 frontend 传一个 Network.requestWillBeSent 的消息，带上这次请求的信息。

那我们能不能也发一个这样的消息呢？

我模拟构造了一个类似的 CDP 消息：

ws.send(JSON.stringify({method: "Network.requestWillBeSent",params: {requestId: `111`,frameId: '123.2',loaderId: '123.67',request: {url: 'www.guangguangguang.com',method: 'post',headers: {"Content-Type": "text/html"},initialPriority: 'High',mixedContentType: 'none',postData: {"guang": 1}},timestamp: Date.now(),wallTime: Date.now() - 10000,initiator: {type: 'other'},type: "Document"}
}));

然后在 frontend 的页面看一下：

你会发现 Network 面板显示了我们发过来的消息！

这就是 Chrome DevTools 的原理。

测试了下 Network 部分的协议之后，我们再来试下 DOM 的。

我用 Protocol Monitor 观察了下 DOM 部分的 CDP 交互：

首先通过 DOM.getDocument 获取 root 的信息，这一级返回的 node 只到 body。

然后后面再发 DOM.requestChildNodes 的消息，服务端会回一个 DOM.setChildNodes 的消息来返回子节点的信息。

我们也这样实现一下：

收到 DOM.getDocument 的消息的时候，我们返回 root 的信息，只到 body 那一级。

然后发送 DOM.setChildNotes 来返回子节点的信息。

还要处理下 DOM.requestChildNodes 的消息，返回空就行。

完整代码如下：

ws.on('message', function message(data) {console.log('received: %s', data);const message = JSON.parse(data);if (message.method === 'DOM.getDocument') {ws.send(JSON.stringify({id: message.id,result: {root: {nodeId: 1,backendNodeId: 1,nodeType: 9,nodeName: "#document",localName: "",nodeValue: "",childNodeCount: 2,children: [{nodeId: 2,parentId: 1,backendNodeId: 2,nodeType: 10,nodeName: "html",localName: "",nodeValue: "",publicId: "",systemId: ""},{nodeId: 3,parentId: 1,backendNodeId: 3,nodeType: 1,nodeName: "HTML",localName: "html",nodeValue: "",childNodeCount: 2,children: [{nodeId: 4,parentId: 3,backendNodeId: 4,nodeType: 1,nodeName: "HEAD",localName: "head",nodeValue: "",childNodeCount: 5,attributes: []},{nodeId: 5,parentId: 3,backendNodeId: 5,nodeType: 1,nodeName: "BODY",localName: "body",nodeValue: "",childNodeCount: 1,attributes: []}],attributes: ["lang","en"],frameId: "3A70524AB6D85341B3B613D81FDC2DDE"}],documentURL: "http://127.0.0.1:8085/",baseURL: "http://127.0.0.1:8085/",xmlVersion: "",compatibilityMode: "NoQuirksMode"}}}));ws.send(JSON.stringify({method: "DOM.setChildNodes",params: {nodes: [{attributes: ["class","guang"],backendNodeId: 6,childNodeCount: 0,children: [{backendNodeId: 6,localName: "",nodeId: 7,nodeName: "#text",nodeType: 3,nodeValue: "光光光",parentId: 6,}],localName: "p",nodeId: 6,nodeName: "P",nodeType: 1,nodeValue: "",parentId: 5}],parentId: 5}}));} else if (message.method === 'DOM.requestChildNodes') {ws.send(JSON.stringify({id: message.id,result: {}}));}});

返回的内容如上，我们返回了一个 P 标签，有 class 属性，还有一个文本节点。

重启下 backend 服务，在 frontend 里重连一下，你就会发现 frontend 显示了我们返回的 DOM 信息：

经过这两个案例，我们就搞明白了 Chrome DevTools frontend 是怎么和 backend 交互的。

看到自己模拟 DOM 信息这部分，不知道你是否会想到跨端引擎呢。

跨端引擎就是通过前端的技术来描述界面（比如也是通过 DOM），实际上用安卓和 IOS 的原生组件来做渲染。

它的调试工具也是需要显示 DOM 树的信息的，但是因为并不是网页，所以不能直接用 Chrome DevTools。

那如何用 Chrome DevTools 来调试跨端引擎呢？

看完上面两个案例，相信你就会有答案里。只要对接了 CDP，自己实现一个 backend，把 DOM 树的信息，通过 CDP 的格式传给 frontend 就可以了。

自定义的调试工具几本都是前端部分集成下 Chrome DevTools frontend，后端部分实现下对接 CDP 的 ws 服务来实现的。

跨端引擎的调试工具我们知道怎么实现了，那小程序引擎呢？

小程序引擎的调试工具更简单，因为它实际上渲染是用的网页，有 CDP 的 backend，可以直接和 frontend 对接，不用自己实现 CDP 交互。

我下载了 vivo 的快应用开发工具，它有编辑器、调试器、模拟器这几部分：

模拟器渲染的内容能够在调试器里调试，这也是通过 WebSocket 通信的么？

其实不是，Chrome DevTools 支持几种信道，WebSocket 是最常见的一种，还有就是嵌入的时候会通过全局函数通信，electron 会通过 ipc 的方式通信等等。

比如 WebSocket 时的通信实现是这样的：

而 electron 环境下是这样的：

嵌入到一个环境的时候是这样的：

这也是为什么文章最开始我说 Chrome DevTools 和 Chrome 通过 WebSocket 通信是不准确的，其实是通过全局函数的方式。

而且，像上面那种在一个窗口里渲染，在另一个窗口里调试的这种需求，electron 直接提供了 api 来支持。

使用 setDevToolsWebContents 的 api，就可以让 devtools 的 frontend 显示在任意的窗口里。

所以说，小程序的调试工具实现起来还是很简单的，不但 CDP 交互不用自己实现，而且一个窗口渲染，一个窗口显示Chrome DevTools frontend 这种功能 electron 都已经提供了。

上面我们都是自己实现的 backend，那能自己实现 frontend 么？

当然也是可以的。

我们通过命令行的方式把 chrome 跑起来，通过 remote-debugging-port 指定 backend 的端口：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

然后实现个 WebSocket 客户端连上就可以了。

当然自己实现 CDP 的交互还是挺麻烦的，chrome 给提供了一个工具包 chrome-remote-interface，可以用 api 的方式来组织代码。

const CDP = require('chrome-remote-interface');async function test() {let client;try {client = await CDP();const { Page, DOM, Debugger } = client;//...} catch(err) {console.error(err);}
}
test();

我们测试一下 DOM 部分的协议：

const CDP = require('chrome-remote-interface');
const fs = require('fs');async function test() {let client;try {client = await CDP();const { Page, DOM, Debugger } = client;await Page.enable();await Page.navigate({url: 'https://baidu.com'});await DOM.enable();const { root } = await DOM.getDocument({depth: -1});} catch(err) {console.error(err);}
}
test();

打个断点，看下 backend 返回的消息：

是不是很熟悉？

不过这次是真实的 DOM.getDocument 的消息。

我们自己实现了 frontend，对接了真实 backend，之前也自己实现了 backend，对接了真实 frontend。

那能不能自己实现 frontend，对接自己实现的 backend 呢？

当然可以，不过这样就没必要用 CDP 了，自己创建一套协议不香么？

其实 Vue DevTools 和 React DevTools 就是自己定制的一套协议。

它们都是以 Chrome 插件的方式存在的，我们要先了解下 Chrome 插件，准确的说是 Chrome DevTools 插件：

它包含三部分：content script、background page、 devtools page。

content script 是可以获取 DOM 的，但是不能访问用户的 JS。这很容易理解，获取 DOM 是插件需要的功能，但是为了安全，又限制了只能访问 DOM。

background page 随浏览器打开就启动，浏览器关闭才销毁，存在周期很长。这也很容易理解，插件是需要这么长的存在周期的，完成一些跨页面的功能。

devtools page 就是在 DevTools 的新 Tab 显示的页面了，它还可以向页面注入 JS。

content script 和 devtools page 都可以和 background page 通信。

那基于这些功能，怎么实现一个自定义调试工具呢？

调试工具主要是 frontend、backend，再就是通信协议。

很容易想到可以这样实现：

devtools page 像页面注入 backend.js，用来获取运行时的信息，然后传递给 devtools page。

devtools page 做 frontend 的显示。

两者之间的通信协议可以自定义。

vue devtools 就是这样实现的：

你可以看到它的代码分包：

backend 就是注入到页面的 js，frontend 部分就是 devtools page 的显示和交互的实现。

react devtools 也是差不多的原理。

只不过它还有 electron 的版本，用于 React Native 的调试：

至此，怎么基于 Chrome Devtools 自定义调试工具，如何基于 devtools extension 实现调试工具我们都了解了。

再回头看下 CDP：

调试工具我们知道怎么实现了，那 CDP 只能用来调试么？

也不是，其实也可以起到远程控制的作用。

puppeteer 就是基于 CDP 实现的自动化测试，它的原理是内置了一个 chromium，用调试模式启动，会有一个 ws 的 backend 的端口。然后用自己实现的 frontend 连接上，通过 CDP 来控制它。

这就是 puppeteer 自动化测试的原理，只不过它是在 node 环境下的。

浏览器环境能实现这种控制么？

也是可以的，Chrome 插件提供了 debugger 的 api，可以代替 frontend 来给 backend 发消息，从而控制浏览器：

其实这个和 puppeteer 的原理很像了，只不过是在浏览器里的。

有一个叫做 puppeteer IDE 的 chrome 插件，就是通过 debugger 来实现了 puppeteer 的 api，从而可以在控制台写 puppeteer 的自动化测试脚本，然后执行。

感兴趣可以去玩一下。

总结

Chrome DevTools 分为 frontend、backend，之间通过 Chrome DevTools Protocol 通信，通信的信道有很多种，常用的是 WebSocket。

我们可以集成 chrome devtools frontend 的代码，对接自己实现的 backend，从而实现调试的功能。跨端引擎的调试就是这样实现的。

小程序引擎调试工具的实现更简单，CDP 不用自己实现，electron 还提供了在一个窗口显示另一个窗口的 devtools frontend 的 api 可以直接用。

除了自己实现 backend，我们也可以自己实现 frontend，通过 chrome-remote-interface 这个包可以用 api 来操作 CDP。

当然，像 Vue DevTools、React DevTools 这种都是要自定义调试协议的，他们的实现原理是 devtools page 向页面注入了 background 代码，之间通过一定的协议通信，然后在 devtools 里面做渲染。

除了调试之外，CDP 还能实现远程控制， puppeteer 就是通过 CDP 实现的自动化测试。

chrome 插件的 debugger api 也可以发送 CDP 消息，可以实现和 puppeteer 类似的效果。

其实调试还是挺简单的，就是 frontend、backend、调试协议，然后可能有很多种信道，不管是 Chrome DevTools 还是自定义调试工具都是这样。

自己做一个调试工具的话，可以集成 Chrome DevTools frontend，然后对接 backend。可以通过 devtools extension 扩展，往页面注入 backend 代码。也可以基于 electron 实现一个完全独立的调试工具。