Question

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

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

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

如果我可以直接通过chrome（扩展名）API接收json文件，那就太好了。到目前为止，我仅找到以下示例：https://gist.github.com/krisselden/2487706bcbf37da26d4a89d0f74df768。但这似乎仅适用于浏览器远程模式。

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

最好的问候好男人。

Answer 1

这里是我到目前为止的内容（仅摘录）：

Got扩展模板表单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"
        });             
    });

以及在browser_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覆盖数据的方法...

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

1 个答案: