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

Mathias Bynens

Peter Kvitek

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

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

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

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

chrome --headless

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

Раньше режим Headless представлял собой отдельную альтернативную реализацию браузера , которая поставлялась как часть того же двоичного файла Chrome. Он не использовал код браузера Chrome в //chrome .

В Chrome теперь есть унифицированные режимы Headless и Headful.

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

chrome --headless=old

В Кукольнике

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

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: 'true', // (default) enables Headless
  // `headless: 'old'` enables old 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'))
  .build();

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

// …

await driver.quit();

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

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

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

--dump-dom

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

chrome --headless --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 --screenshot --window-size=412,892 https://developer.chrome.com/

--print-to-pdf

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

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

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

chrome --headless --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 --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 --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 --print-to-pdf --allow-chrome-scheme-url chrome://gpu

Отлаживать

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

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

chrome --headless --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. Если возникнут какие-либо проблемы, сообщите об ошибке .