Отчет о покрытии Chrome - есть ли API для получения файла JSON? - PullRequest
0 голосов
/ 05 апреля 2019

В последнее время я обнаружил отчет о покрытии Chrome, который я считаю очень полезным.https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Слабость этого инструмента в том, что он имеет одну страницу.Но в версии chrome 73 есть возможность генерировать файл json для страницы, которую можно сохранить для дальнейшей обработки.

Я хотел бы собрать данные json для нескольких страниц, а затем объединить их и визуализировать в контексте одногофайл (в моем случае таблица стилей).

Было бы замечательно, если бы я мог получить файл JSON напрямую через API Chrome (Extenstion?).Пока я нашел только этот пример: https://gist.github.com/krisselden/2487706bcbf37da26d4a89d0f74df768. Но, похоже, он работает только для удаленного режима браузера.

Знаете ли вы, есть ли способ получить покрытие json report через API Chrome?

С наилучшими пожеланиями Это Человек.

1 Ответ

0 голосов
/ 06 апреля 2019

Вот что я получил до сих пор (только фрагменты):

  1. Получил форму шаблона расширения https://extensionizr.com
  2. Внутри скрипта 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>

enter image description here

При нажатии кнопки Profiler.takePreciseCoverage результат может быть получен внутри background.js.

Все еще ищите способ получения данных покрытия CSS ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...