Безголовый режим Chrome

Mathias Bynens

Peter Kvitek

В 2017 году в Chrome 59 появился режим Headless , который позволяет запускать браузер в автоматической среде без какого-либо видимого пользовательского интерфейса. По сути, вы можете запустить Chrome без Chrome.

Безголовый режим — популярный выбор для автоматизации браузера с помощью таких проектов, как Puppeteer или ChromeDriver . Вот минимальный пример командной строки с использованием режима Headless для создания PDF-файла по заданному URL-адресу:

chrome --headless --print-to-pdf https://developer.chrome.com/

Как работает Безголовый

Прежде чем мы рассмотрим, как работает Headless сейчас, важно понять, как работал «старый» Headless. В предыдущем фрагменте командной строки используется флаг командной строки --headless , предполагающий, что Headless — это всего лишь режим работы обычного браузера Chrome. Возможно, это было удивительно, но на самом деле это было неправдой. Фактически, старый Headless был отдельной альтернативной реализацией браузера , которая поставлялась как часть того же двоичного файла Chrome. Он не использует код браузера Chrome в //chrome .

Реализация и поддержка отдельного Headless-браузера потребовала больших инженерных затрат. А поскольку Headless был отдельной реализацией, у него были свои ошибки и функции, которых не было в Headful Chrome. Это создавало путаницу для автоматических браузерных тестов, которые могли пройти в режиме Headful, но не пройти в режиме Headless, или наоборот.

Кроме того, Headless исключил любое автоматическое тестирование, основанное на установке расширений браузера. То же самое касается любых других функций уровня браузера; если у Headless не было собственной отдельной реализации, он не поддерживался.

Команда Chrome теперь объединила режимы Headless и Headful.

Новый режим Headless доступен в Chrome 112. В этом режиме Chrome создает, но не отображает окна платформы. Все остальные функции, существующие и будущие, доступны без ограничений.

Использовать безголовый режим

Чтобы использовать новый режим Headless, передайте флаг командной строки --headless=new :

chrome --headless=new

На данный момент старый режим без головы все еще доступен:

chrome --headless=old

Примечание. Передача флага командной строки --headless без явного значения по-прежнему активирует старый режим Headless, но мы намерены изменить это значение по умолчанию. Мы намерены удалить старый режим Headless из двоичного файла Chrome и прекратить поддержку этого режима в Puppeteer в 2024 году. Одновременно мы сделаем старый режим Headless доступным в виде отдельного двоичного файла для пользователей, которые еще не могут обновиться.

В Кукольнике

Чтобы включить новый режим без головы в Puppeteer:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: 'new',
  // `headless: true` (default) enables old Headless;
  // `headless: 'new'` enables new Headless;
  // `headless: false` enables "headful" mode.
});

const page = await browser.newPage();
await page.goto('https://developer.chrome.com/');

// …

await browser.close();

В Selenium-WebDriver

Чтобы использовать новый режим Headless в Selenium-WebDriver:

const driver = await env
  .builder()
  .setChromeOptions(options.addArguments('--headless=new'))
  .build();

await driver.get('https://developer.chrome.com/');

// …

await driver.quit();

Дополнительную информацию, включая примеры использования привязок к другим языкам, см. в блоге команды Selenium.

Флаги командной строки

Следующие флаги командной строки доступны в новом режиме Headless.

--dump-dom

Флаг --dump-dom выводит сериализованный DOM целевой страницы на стандартный вывод. Например:

chrome --headless=new --dump-dom https://developer.chrome.com/

Это отличается от печати исходного кода HTML, которую вы можете сделать с помощью curl . Чтобы получить результат --dump-dom , Chrome сначала анализирует HTML-код в DOM, выполняет любой <script> , который может изменить DOM, а затем превращает этот DOM обратно в сериализованную строку HTML.

--screenshot

Флаг --screenshot делает снимок экрана целевой страницы и сохраняет его как screenshot.png в текущем рабочем каталоге. Это особенно полезно в сочетании с флагом --window-size .

Например:

chrome --headless=new --screenshot --window-size=412,892 https://developer.chrome.com/

--print-to-pdf

Флаг --print-to-pdf сохраняет целевую страницу как PDF-файл с именем output.pdf в текущем рабочем каталоге. Например:

chrome --headless=new --print-to-pdf https://developer.chrome.com/

При желании вы можете добавить флаг --no-pdf-header-footer чтобы опустить заголовок печати (с текущей датой и временем) и нижний колонтитул (с URL-адресом и номером страницы).

chrome --headless=new --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/

Не: функциональность флага --no-pdf-header-footer ранее была доступна с флагом --print-to-pdf-no-header . Возможно, вам придется вернуться к старому имени флага, если вы используете предыдущую версию.

--timeout

Флаг --timeout определяет максимальное время ожидания (в миллисекундах), после которого содержимое страницы захватывается функциями --dump-dom , --screenshot и --print-to-pdf даже если страница все еще загружается.

chrome --headless=new --print-to-pdf --timeout=5000 https://developer.chrome.com/

Флаг --timeout=5000 указывает Chrome подождать до 5 секунд перед печатью PDF-файла. Таким образом, этот процесс занимает не более 5 секунд.

--virtual-time-budget

--virtual-time-budget действует как «перемотка вперед» для любого кода, зависящего от времени (например, setTimeout / setInterval ). Он заставляет браузер выполнять любой код страницы как можно быстрее, заставляя страницу поверить, что время действительно идет.

Чтобы проиллюстрировать его использование, рассмотрим эту демонстрацию, которая увеличивает, регистрирует и отображает счетчик каждую секунду с помощью setTimeout(fn, 1000) . Вот соответствующий код:

<output>0</output>
<script>
  const element = document.querySelector('output');
  let counter = 0;
  setInterval(() => {
    counter++;
    console.log(counter);
    element.textContent = counter;
  }, 1_000);
</script>

Через одну секунду на странице появится цифра «1»; через две секунды «2» и так далее. Вот как можно зафиксировать состояние страницы через 42 секунды и сохранить его в формате PDF:

chrome --headless=new --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time

--allow-chrome-scheme-url

Флаг --allow-chrome-scheme-url необходим для доступа к URL-адресам chrome:// . Этот флаг доступен в Chrome 123. Вот пример:

chrome --headless=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu

Отлаживать

Поскольку Chrome фактически невидим в режиме Headless, решить проблему может показаться сложной задачей. Headless Chrome можно отлаживать способом, очень похожим на headful Chrome.

Запустите Chrome в безголовом режиме с флагом командной строки --remote-debugging-port .

chrome --headless=new --remote-debugging-port=0 https://developer.chrome.com/

Это выведет уникальный URL-адрес WebSocket на стандартный вывод, например:

DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9

В экземпляре Chrome с headful мы можем затем использовать удаленную отладку Chrome DevTools, чтобы подключиться к цели Headless и проверить ее.

1. Перейдите на chrome://inspect и нажмите кнопку «Настроить…» .
2. Введите IP-адрес и номер порта из URL-адреса WebSocket.
   • В предыдущем примере я ввел 127.0.0.1:60926 .
3. Нажмите Готово . Вы должны увидеть удаленную цель со всеми ее вкладками и другими целями в списке.
4. Нажмите «Проверить» , чтобы получить доступ к Chrome DevTools и проверить удаленную цель Headless, включая просмотр страницы в реальном времени.

Обратная связь

Мы с нетерпением ждем ваших отзывов о новом режиме Headless. Если возникнут какие-либо проблемы, сообщите об ошибке .