【前端调试专栏（45）】实现 Chrome DevTools 的 Coverage 功能 - 编程导航

上节我们把 chrome devtools frontend 跑起来，然后连上自己做的 CDP backend，实现了 network 面板、element 面板的对接，明白了 Chrome DevTools 的运行原理。

那我们能基于已有的 backend，自己实现 frontend 么？

当然也是可以的。

我们通过命令行的方式把 chrome 跑起来，通过 remote-debugging-port 指定 backend 的端口（这是 mac 下的 chrome 路径，windows 下的话大家自己找一下）：

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

然后我们自己通过 WebSocket 客户端连上就可以了。

当然自己实现 CDP 的交互还是挺麻烦的，chrome 给提供了一个工具包 chrome-remote-interface，内部实现了和 CDP backend 的 WebSocket 通信，我们只需要调用它的 api 即可：

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

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

这就是真实的包含 DOM 信息的 CDP 数据。

接下来我们来实现一个真实的 Chrome DevTools 的功能：

Chrome DevTools 有一个覆盖率检测的功能，可以检测 JS、CSS 代码里有哪些执行了，哪些没执行。并且还会在 sources 里标记出来。

如下图，绿色的部分是执行过的，而红色的部分是没执行的：

在 sources 面板里可以直接看到哪些代码没执行，比如下面的红色部分就是没有执行的：

这个功能还是很有用的，可以帮助我们分析哪些代码是用不到的，可以进行延后加载或者删掉等优化。

在 More Tools 里开启：

使用还是很简单的，但它是怎么实现的呢？

首先，我们要知道页面下载了哪些 JS 和 CSS。

这个是通过监听事件拿到的， CSS.styleSheetAdded 和 Debugger.scriptParsed 这俩事件。

我们监听下这俩事件：

因为用到 DOM、CSS、Debugger、Page 域的协议，所以需要先 enable 一下，只有 enable的功能才会启用。

这个很正常，没 enable 就不启用，这样能节省性能。

执行这段代码，看下拿到的事件对象：

事件对象里是这段 js 的 url 和行列号，再就是 scriptId。

然后再看下 CSS.styleSheetAdded 的事件对象：

也差不多，只不过这里是 styleSheetId。

那怎么拿到 CSS 和 JS 的内容呢？

这就需要用到别的 api 了。

css 的内容是用 CSS.getStyleSheetText 来拿，传入 styeleSheetId：

const styleSheetId = event.header.styleSheetId; const content = await CSS.getStyleSheetText({ styleSheetId });

JS 的内容是用 Debugger.getScriptSource 来拿，传入 scriptId：

const scriptId = event.scriptId; const content = await Debugger.getScriptSource({ scriptId });

我们把它们按照 id 放到 Map 里：

这样就能把页面上所有的 js 和 css 收集起来：

对了，测试页面的内容是这样的：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> <style> a { color: red; } </style> </head> <body> <script> function add(a, b) { return a + b; } function minus(a, b) { return a -b; } function multiply(a, b) { return a * b; } </script> <script> add(1, 3); multiply(3, 4); </script> </body> </html>

有一个外部 css：

.aaa { color: red; } div { color: blue; } body { background: pink; }

收集到了 JS 和 CSS 的数据只是第一步，要计算出覆盖率数据，还要知道哪些 JS 和 CSS 执行了。

这个也有 api：

CSS 开启执行数据的收集是用 CSS.startRuleUsageTracking：

await CSS.enable(); await CSS.startRuleUsageTracking();

然后一段时间后 stop：

// 延迟一段时间再获取数据，等页面渲染完 await new Promise(resolve => setTimeout(resolve, 3000)); const cssCoverage = await CSS.stopRuleUsageTracking();

这样就能获取 CSS 的执行数据：

返回的结果显示 scriptId 为 89607.4 的 css 的 50 到 80 个字符的代码执行了。

我们在 cssMap 里看下这个 id 对应的代码：

然后取出 50 到 80 个字符的代码：

也就是说所有 css 里只有这一段代码是生效的：

你用 Chrome DevTools 的 Coverage 分析结果也是这样的：

有了所有 CSS 代码的数据，有了执行了哪些 CSS 的代码的数据，覆盖率的计算不就很简单了么？

我们再来看下 JS 的：

JS 使用 Profiver 的 prociseCoverage 的 api 获取覆盖率数据：

await Profiler.enable(); await Profiler.startPreciseCoverage(); // 延迟一会再获取数据，等 js 执行完 await new Promise(resolve => setTimeout(resolve, 3000)); const jsCoverage = await Profiler.takePreciseCoverage();

可以看到返回了两个 script 的执行数据：