Безголовый режим Chrome стал намного лучше!
Безголовый режим Chrome стал намного лучше! В этой статье представлен обзор недавних инженерных усилий, направленных на то, чтобы сделать Headless более полезным для разработчиков, приблизив Headless к обычному «головному» режиму Chrome.
Фон
Еще в 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 был отдельной реализацией, у него были свои ошибки и функции, которых не было в Headful Chrome. Это создавало запутанную ситуацию, когда любой автоматизированный тест браузера мог пройти в режиме Headful, но завершиться неудачей в режиме Headless, или наоборот — основная проблема для инженеров по автоматизации. Он также исключил любое автоматическое тестирование, которое зависело, например, от установки расширения браузера. То же самое касается любой другой функциональности уровня браузера: если у Headless не было собственной отдельной реализации, она не поддерживалась.
В 2021 году команда Chrome намеревалась решить эту проблему и раз и навсегда унифицировать режимы Headless и Headless.
Мы рады сообщить, что новый режим Headless теперь доступен в Chrome 112! В этом режиме Chrome создает, но не отображает окна платформы. Вся остальная функциональность, существующая и будущая, доступна без ограничений.
Попробуйте новый Безголовый
Чтобы попробовать новый режим Headless, передайте флаг командной строки --headless=new :
chrome --headless=new
На данный момент старый режим Headless все еще доступен через:
chrome --headless=old
В настоящее время передача флага командной строки --headless без явного значения по-прежнему активирует старый режим Headless, но мы планируем со временем изменить это значение по умолчанию на новый Headless.
Мы планируем полностью удалить старый режим Headless из двоичного файла Chrome и прекратить поддержку этого режима в Puppeteer позднее в этом году. В рамках этого удаления мы сделаем старую версию Headless доступной в виде отдельного автономного двоичного файла для тех пользователей, которые еще не могут выполнить обновление.
Новый Безголовый в Puppeteer
Чтобы включить новый режим без головы в 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();
Новый Headless в 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
Для нового режима 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/
--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 в режиме Headless с флагом командной строки --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 и проверить ее. Для этого перейдите по адресу chrome://inspect , нажмите кнопку «Настроить…» и введите IP-адрес и номер порта из URL-адреса WebSocket. В приведенном выше примере я ввел 127.0.0.1:60926 . Нажмите «Готово» , и вы должны увидеть удаленную цель со всеми ее вкладками и другими целями, перечисленными ниже. Нажмите «Проверить» , и теперь у вас есть доступ к Chrome DevTools для проверки удаленной цели без головы, включая просмотр страницы в реальном времени !
Обратная связь
Мы с нетерпением ждем ваших отзывов о новом режиме Headless. Если у вас возникнут какие-либо проблемы, сообщите о них .