Debugging Protocol

Puppeteer предоставляет высокоуровневый API для управления браузером Chromium через протокол DevTools (Chrome DevTools Protocol, CDP). Понимание работы с Debugging Protocol открывает доступ к расширенным возможностям тестирования и автоматизации, недоступным через стандартный API.

Подключение к Debugging Protocol

Каждое окно браузера или вкладка (Page) в Puppeteer имеет доступ к CDPSession. Для получения сессии используется метод page.target().createCDPSession(): 

const puppeteer = require(&

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    const client = await page.target().createCDPSession();

    // Включение логирования сетевых запросов
    await client.send('Network.enable');
    
    await page.goto('https://example.com');
    await browser.close();
})();

Ключевой момент: CDPSession позволяет отправлять команды напрямую в DevTools Protocol и получать события в реальном времени.

Включение и отслеживание событий

Протокол DevTools основан на событиях. Для отладки часто используются события Network, Console, Runtime и Debugger.

Пример отслеживания сетевых запросов: 

client.on('Network.requestWillBeSent', (event) => {
    console.log('Запрос:', event.request.url);
});

client.on('Network.responseReceived', (event) => {
    console.log('Ответ:', event.response.status, event.response.url);
});

Примечание: Подключение к событиям до перехода на страницу позволяет захватывать все действия с момента инициализации.

Управление дебаггером

DevTools Protocol предоставляет возможность управлять точками останова, пошаговым выполнением и просмотром стеков вызовов. Это полезно при тестировании сложного JavaScript на странице.

Включение дебаггера: 

await client.send('Debugger.enable');
await client.send('Debugger.setBreakpointByUrl', {
    lineNumber: 10,
    url: 'https://example.com/script.js'
});

client.on('Debugger.paused', async (event) => {
    console.log('Скрипт приостановлен на линии:', event.callFrames[0].location.lineNumber);
    await client.send('Debugger.resume');
});

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

  • Debugger.enable — активирует дебаггер для текущей сессии.
  • setBreakpointByUrl — установка точки останова по URL и линии.
  • paused — событие, вызываемое при срабатывании точки останова.

Взаимодействие с DOM через протокол

CDP позволяет работать с DOM напрямую, обходя Puppeteer API, что ускоряет операции и даёт более детальный контроль.

Пример: получение содержимого элемента через DOM: 

await client.send('DOM.enable');
const { root: { nodeId } } = await client.send('DOM.getDocument');
const { nodeId: divId } = await client.send('DOM.querySelector', {
    nodeId,
    selector: '#main'
});
const { outerHTML } = await client.send('DOM.getOuterHTML', { nodeId: divId });
console.log(outerHTML);

Ключевой момент: Работа через DOM в CDP позволяет получать и изменять структуру страницы без использования page.evaluate, что полезно для отладки и тестирования сложных страниц.

Управление сетью и заголовками

Прямой доступ к сетевым событиям открывает возможность модифицировать запросы, тестировать кеширование и эмулировать ошибки сети.

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

await client.send('Network.setRequestInterception', {
    patterns: [{ urlPattern: '*', resourceType: 'Document', interceptionStage: 'HeadersReceived' }]
});

client.on('Network.requestIntercepted', async (event) => {
    if (event.request.url.includes('example.com/script.js')) {
        await client.send('Network.continueInterceptedRequest', {
            interceptionId: event.interceptionId,
            url: 'https://alternative.com/script.js'
        });
    } else {
        await client.send('Network.continueInterceptedRequest', { interceptionId: event.interceptionId });
    }
});

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

  • Можно изменять URL, заголовки или тело запроса.
  • Позволяет моделировать ошибки сети для стресс-тестирования.

Логирование консоли и ошибок

Протокол DevTools позволяет получать события консоли и ошибки JavaScript без использования page.on(‘console’), что может быть полезно для глубокого анализа. 

await client.send('Runtime.enable');

client.on('Runtime.consoleAPICalled', (event) => {
    console.log('Консоль:', event.type, event.args.map(arg => arg.value));
});

client.on('Runtime.exceptionThrown', (event) => {
    console.error('Ошибка JS:', event.exceptionDetails.text);
});

Преимущество: Все события приходят в реальном времени и включают стек вызовов, что невозможно через стандартные Puppeteer события.

Эмуляция устройств и медиа

Используя Debugging Protocol, можно эмулировать различные устройства, размеры экрана, геолокацию и даже сенсорные события.

Пример эмуляции мобильного устройства: 

await client.send('Emulation.setDeviceMetricsOverride', {
    width: 375,
    height: 667,
    deviceScaleFactor: 2,
    mobile: true
});

await client.send('Emulation.setTouchEmulationEnabled', { enabled: true });

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

  • setDeviceMetricsOverride позволяет изменять размеры экрана и DPI.
  • setTouchEmulationEnabled активирует сенсорные события.

Оптимизация тестирования с CDP

Использование Debugging Protocol ускоряет тесты за счет:

  • Прямого взаимодействия с DOM и сетью без evaluate.
  • Возможности включения и отключения событий, необходимых только для конкретного сценария.
  • Эмуляции условий, недоступных через Puppeteer API.

Заключение технических аспектов

Debugging Protocol в Puppeteer является мощным инструментом для глубокого анализа, контроля и эмуляции браузерного поведения. Понимание работы с CDPSession, событийной моделью, дебаггером и сетевыми интерцепторами позволяет создавать высоконадежные и точные автоматизированные тесты.

Оглавление