Debugging режим

Lighthouse — это инструмент для автоматического аудита веб-страниц, встроенный в Chrome DevTools и доступный как отдельный npm-пакет. Для работы в режиме отладки необходимо использовать Node.js версию не ниже 14. Установка производится через команду:

npm install -g lighthouse

После установки библиотеку можно использовать как из командной строки, так и программно через Node.js API:

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {port: chrome.port};
  const runnerResult = await lighthouse('https://example.com', options);

  console.log('Lighthouse score:', runnerResult.lhr.score);
  await chrome.kill();
})();

Включение режима отладки

Режим отладки (Debugging mode) позволяет получать детализированные логи выполнения и трассировки, что особенно полезно для выявления проблем с производительностью, доступностью или SEO.

Для активации режима отладки в командной строке используется флаг --verbose или переменная окружения DEBUG:

lighthouse https://example.com --verbose
DEBUG=lighthouse:* lighthouse https://example.com

При использовании Node.js API включение детального логирования достигается через опцию logLevel:

const options = {
  port: chrome.port,
  logLevel: 'verbose'
};

Ключевой момент: logLevel: 'verbose' выводит все стадии аудита, включая внутренние события Chromium, трассировки сетевых запросов и шаги генерации отчёта.

Логирование и трассировки

Режим отладки предоставляет несколько уровней информации:

  • Сетевые события: отображение всех запросов и ответов, включая статус-коды, заголовки и время загрузки.
  • События производительности: подробное отслеживание фреймов, скриптов и рендеринга страниц.
  • Ошибки Jav * aScript: вывод всех исключений и предупреждений в консоль, включая стек вызовов.
  • Пошаговое выполнение аудитов: показывает последовательность выполнения всех проверок Lighthouse.

Для записи логов в файл используется опция --output-path:

lighthouse https://example.com --verbose --output=json --output-path=report.json

Это позволяет сохранять трассировки и анализировать их с помощью специализированных инструментов, например, Chrome DevTools или Lighthouse Viewer.

Использование режима протоколирования Chrome DevTools (CDP)

Node.js API поддерживает подключение к Chrome через протокол CDP, что позволяет ещё точнее отслеживать внутренние процессы:

const options = {
  port: chrome.port,
  disableStorageReset: true,
  logLevel: 'verbose'
};

const runnerResult = await lighthouse('https://example.com', options);

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

  • disableStorageReset: true предотвращает очистку кэша и локального хранилища между запусками.
  • Через logLevel: 'verbose' можно получать трассировку всех команд CDP, что упрощает анализ багов и нестабильного поведения страниц.

Встроенные инструменты анализа

В режиме отладки Lighthouse создаёт дополнительные артефакты:

  • Trace Events: подробная запись всех событий рендеринга и выполнения скриптов.
  • Network Records: список всех сетевых взаимодействий с детализацией по ресурсам.
  • Audit Results: подробные отчёты по каждой категории (Performance, Accessibility, SEO, Best Practices).

Для визуализации можно использовать Chrome DevTools:

  1. Открыть chrome://tracing/.
  2. Загрузить файл трассировки .json, созданный Lighthouse.
  3. Анализировать время загрузки скриптов, рендеринга и взаимодействий пользователя.

Советы по эффективной отладке

  • Всегда использовать режим --headless при массовой проверке страниц на CI/CD, но для визуальной отладки лучше запускать с GUI Chrome.
  • Логи verbose помогают выявить узкие места в производительности и нестандартные сценарии работы страницы.
  • При работе с Node.js API удобно комбинировать logLevel с port для многократного подключения к одному экземпляру Chrome.
  • Использовать фильтры DEBUG=lighthouse:* для получения наиболее детальной информации без лишних системных сообщений.

Типичные ошибки при отладке

  • Chrome не запускается: проверить флаги запуска и путь к исполняемому файлу Chrome.
  • Неполные отчёты: убедиться, что disableStorageReset не мешает повторной загрузке ресурсов.
  • Ошибки сети: иногда режим отладки выявляет нестабильные соединения или блокировки CORS.

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

Оглавление