H

Har Archiver

HAR Archiver

Описание

Пример расширения с демонстрацией работы API chrome.devtools.network.getHAR. В примере происходит загрузка данных по запросам и ответам из вкладки Network (Сеть) в инструментах разработчика. Описание методов в спецификации.

Технологии

  • JavaScript
  • Chrome API
  • Chrome DevTools

Установка

  1. Загрузить zip-архив репозитория или клонировать репозиторий
  2. Распаковать архив
  3. Открыть браузер Google Chrome и перейти в настройки расширений путем открытия в строке ввода url:
chrome://extensions/
  1. В верхней правой части экрана включить радиобаттон: 'Режим разработчика'
  2. В верхней левой части экрана нажать кнопку 'Загрузить распакованное расширение' и указать путь к папке '/extension' из п.2

Описание работы

Для демонстрации работы расширения необходимо:

  • установить расширение;
  • открыть инструменты разработчика и перейти на вкладку 'HAR Archiver';
  • обновить открытую веб-страницу для отображения запросов и ответов на вкладке Network (Сеть);
  • на вкладке 'HAR Archiver' вручную или по таймауту установить получение HAR-архива;
  • при необходимости полученный HAR-архив можно сохранить в файл;

Дополнительно

Оба примера идентичны друг другу:

chrome.devtools.network.getHAR(
   // Пример 1
   async function (harLog) {
       function load(content, encoding) {
           console.log(content)
       }
       console.log(harLog)
       for (let i = 0; i < harLog.entries.length; i++) {
           let request = harLog.entries[i];
           request.getContent(load)
       }
       harWorker.setHarEntries(harLog)
       console.log(harLog)
   }

   // Пример 2
   async function (harLog) {
       console.log(harLog)
       for (let i = 0; i < harLog.entries.length; i++) {
           let promise = new Promise((resolve, reject) => {
               harLog.entries[i].getContent((content, encoding) => {
                   resolve(content)
               })
           });
           promise.then(
               function resultHandler(result) {
                   harLog.entries[i].body = result;
                   console.log(`Запущен обработчик успешного заверения promise`);
                   // console.log(`Запущен обработчик успешного заверения promise с результатом: ${result}`);
               },
               function errorHandler(error) {
                   console.log(`Запущен обработчик ошибки выполнения promise с результатом: ${error}`);
               }
           );
       }
       harWorker.setHarEntries(harLog)
       console.log(harLog)
   }
)