В режиме 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 и проверить ее.
- Перейдите на
chrome://inspect
и нажмите кнопку «Настроить…» . - Введите IP-адрес и номер порта из URL-адреса WebSocket.
- В предыдущем примере я ввел
127.0.0.1:60926
.
- В предыдущем примере я ввел
- Нажмите Готово . Вы должны увидеть удаленную цель со всеми ее вкладками и другими целями в списке.
- Нажмите «Проверить» , чтобы получить доступ к Chrome DevTools и проверить удаленную цель Headless, включая просмотр страницы в реальном времени.
Обратная связь
Мы с нетерпением ждем ваших отзывов о режиме Headless. Если возникнут какие-либо проблемы, сообщите об ошибке .