Мониторинг ресурсов

Для начала необходимо установить Puppeteer через npm: 

npm install puppeteer

После установки создается объект браузера с помощью функции puppeteer.launch(). Основные параметры включают:

  • headless: запуск в безголовом режиме (true) или с визуальным интерфейсом (false).
  • args: дополнительные аргументы для запуска браузера.
  • defaultViewport: размеры окна браузера.

Пример инициализации: 

const puppeteer = require(&

(async () => {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.goto('https://example.com');
})();

Мониторинг сетевых запросов

Одной из ключевых возможностей Puppeteer является перехват и анализ сетевых запросов. Используется событие request для отслеживания отправляемых запросов и response для анализа ответов. 

page.on('request', request => {
    console.log('Request URL:', request.url());
    console.log('Request Method:', request.method());
});

page.on('response', async response => {
    const url = response.url();
    const status = response.status();
    console.log(`Response from ${url}: ${status}`);
});

Особенности:

  • Метод request.postData() позволяет получить данные POST-запроса.
  • Метод response.text() или response.json() позволяет анализировать тело ответа.
  • Перехват можно комбинировать с фильтрацией по URL или типу ресурса.

Мониторинг ресурсов страницы

Puppeteer позволяет отслеживать загрузку различных ресурсов: скриптов, стилей, изображений, шрифтов и других. 

page.on('requestfinished', async request => {
    const response = request.response();
    const type = request.resourceType();
    const url = request.url();
    const size = response ? (await response.buffer()).length : 0;

    console.log(`Resource: ${url}`);
    console.log(`Type: ${type}`);
    console.log(`Size: ${size} bytes`);
});

Ключевые моменты:

  • resourceType() возвращает тип ресурса: document, stylesheet, image, script, font, xhr и др.
  • requestfinished срабатывает только после успешной загрузки ресурса.
  • Анализ размера и типа ресурсов помогает оптимизировать производительность и выявлять “тяжелые” элементы страницы.

Измерение времени загрузки

Для мониторинга производительности страницы Puppeteer предоставляет доступ к объекту performance через метод page.evaluate(): 

const metrics = await page.evaluate(() => JSON.stringify(window.performance.timing));
console.log(JSON.parse(metrics));

Основные показатели:

  • navigationStart – начало навигации.
  • responseStart – момент получения первого байта ответа.
  • domContentLoadedEventEnd – завершение загрузки DOM.
  • loadEventEnd – полная загрузка страницы.

Для вычисления времени загрузки ресурса: 

page.on('response', async response => {
    const timing = response.timing();
    if (timing) {
        console.log(`Resource ${response.url()} loaded in ${timing.responseEnd - timing.startTime} ms`);
    }
});

Перехват и модификация запросов

Puppeteer позволяет блокировать или изменять запросы для тестирования различных сценариев. 

await page.setRequestInterception(true);

page.on('request', request => {
    if (request.resourceType() === 'image') {
        request.abort(); // блокировка загрузки изображений
    } else {
        request.continue();
    }
});

Возможности:

  • Блокировка определенных типов ресурсов для ускорения тестов.
  • Подмена ответов через request.respond() для тестирования ошибок и задержек.
  • Логирование сетевых взаимодействий для последующего анализа.

Сбор метрик памяти и CPU

Для глубокого мониторинга Puppeteer предоставляет доступ к методам DevTools Protocol. 

const client = await page.target().createCDPSession();
await client.send('Performance.enable');
const performanceMetrics = await client.send('Performance.getMetrics');
console.log(performanceMetrics.metrics);

Полезные показатели:

  • JSHeapUsedSize – используемая память JavaScript.
  • JSHeapTotalSize – общий размер выделенной памяти.
  • TaskDuration – время выполнения задач в основном потоке.
  • LayoutDuration – время, затраченное на рендеринг и раскладку элементов.

Автоматизация мониторинга

Для регулярного мониторинга ресурсов и производительности удобно использовать циклы и логирование: 

setInterval(async () => {
    const memory = await page.metrics();
    console.log('Memory Usage:', memory.JSHeapUsedSize);
}, 5000);

Можно комбинировать с отправкой данных в базы данных или системы визуализации для построения графиков загрузки и потребления ресурсов.

Практические советы

  • Всегда использовать headless: true для автоматических тестов, чтобы снизить нагрузку.
  • Перехватывать и фильтровать запросы для ускорения тестирования.
  • Собираемые метрики лучше сохранять в структурированном виде (JSON) для анализа.
  • Для сложных страниц с большим количеством ресурсов полезно включать requestfinished и response одновременно, чтобы отслеживать полную картину загрузки.
  • Использовать CDP-сессии для получения детальной информации о памяти, CPU и производительности рендеринга.

Эти подходы позволяют не только выявлять узкие места в производительности, но и создавать надежные автоматизированные тесты, анализирующие качество загрузки страниц и работу их ресурсов.

Оглавление