javascript - chrome 覆盖率报告 - 是否有任何 API 可以接收 json 文件？

问题描述

最近我发现了我觉得非常有用的 chrome 覆盖率报告。 https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

这个工具的弱点是它是单页范围的。但在 chrome 73 版本中，有一个选项可以为页面生成 json 文件，可以存储以供进一步处理。

我想为多个页面收集 json 数据，而不是合并它并在单个文件的上下文中可视化（在我的例子中是样式表）。

如果我可以直接通过 chrome (Extension?) API 接收 json 文件，那就太好了。到目前为止，我只找到了这个例子：https ://gist.github.com/krisselden/2487706bcbf37da26d4a89d0f74df768 。但它似乎只适用于浏览器远程模式。

您知道有什么方法可以通过 chrome API 获取覆盖率 json 报告吗？

最好的问候它的人。

标签： javascriptgoogle-chromegoogle-chrome-extension

这是我到目前为止得到的（仅限片段）：

获得扩展模板表单https://extensionizr.com
在 background.js 脚本中放置了这个原始方法：

    chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
        console.log(request.command);
        if (request.command === "getCoverage") {
            chrome.tabs.query(
                {currentWindow: true, active : true},
                function(tabArray){
                    var activeTab = tabArray[0];
                    console.log("tabid: " + activeTab.id)
                    chrome.debugger.attach( { tabId: activeTab.id }, "1.2", function() {
                        console.log("attached");
                        chrome.debugger.sendCommand( { tabId: activeTab.id }, "Profiler.enable", undefined, function(result) {
                            console.log("ProfilerStarted:" ,result);
                            chrome.debugger.sendCommand( { tabId: activeTab.id }, "Profiler.startPreciseCoverage", { callCount: true }, function(result) {
                                console.log("coverageStarted:" ,result);
                                setTimeout(function() {
                                    chrome.debugger.sendCommand( { tabId: activeTab.id }, "Profiler.takePreciseCoverage", undefined, function(response) {
                                        console.log(response.result);
                                    });
                                }, 4000)
                            });
                        });
                    });
                }
            );
        }
    });

在 browser_action.js 中：

    document.getElementById("getCoverageSnapshot").addEventListener("click", function() {
        chrome.extension.sendMessage({
            command: "getCoverage"
        });             
    });

在browse_action.html中：

<!doctype html>
<style type="text/css">
</style>
<button id="getCoverageSnapshot">Get Snapshot</button>    
<script type="text/javascript" src="/src/browser_action/browser_action.js"></script>

当按钮单击 Profiler.takePreciseCoverage 时，可以在 background.js 中收到结果。

仍在寻找接收 CSS 覆盖率数据的方法......

javascript - chrome 覆盖率报告 - 是否有任何 API 可以接收 json 文件？

问题描述

解决方案

推荐阅读