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