Im Chrome-Headless-Modus können Sie den Browser in einer unbeaufsichtigten Umgebung ohne sichtbare Benutzeroberfläche ausführen. Sie können Chrome also ohne Chrome ausführen.
Der headless Modus ist eine beliebte Option für die Browserautomatisierung, z. B. über Projekte wie Puppeteer oder ChromeDriver.
Monitorlosen Modus verwenden
Wenn Sie den headless-Modus verwenden möchten, geben Sie das Befehlszeilen-Flag --headless
an:
chrome --headless
Alten headless-Modus verwenden
Bisher war der Headless-Modus eine separate, alternative Browserimplementierung, die zufällig im selben Chrome-Binärprogramm enthalten war. Es wurde kein Chrome-Browsercode aus //chrome
freigegeben.
Chrome hat jetzt einen einheitlichen Headless- und einen Headful-Modus.
Der alte headless-Modus ist derzeit noch mit folgenden Versionen verfügbar:
chrome --headless=old
In Puppeteer
So verwenden Sie den headless-Modus in 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();
In Selenium-WebDriver
So verwenden Sie den headless Modus in Selenium-WebDriver:
const driver = await env
.builder()
.setChromeOptions(options.addArguments('--headless'))
.build();
await driver.get('https://developer.chrome.com/');
// …
await driver.quit();
Weitere Informationen, einschließlich Beispielen mit anderen Sprachbindungen, finden Sie im Blogpost des Selenium-Teams.
Befehlszeilen-Flags
Die folgenden Befehlszeilen-Flags sind im monitorlosen Modus verfügbar.
--dump-dom
Mit dem Flag --dump-dom
wird das serialisierte DOM der Zielseite auf stdout ausgegeben.
Beispiel:
chrome --headless --dump-dom https://developer.chrome.com/
Das unterscheidet sich vom Drucken des HTML-Quellcodes, was Sie mit curl
tun können. Um die Ausgabe von --dump-dom
zu erhalten, parset Chrome zuerst den HTML-Code in ein DOM, führt alle <script>
aus, die das DOM ändern könnten, und wandelt das DOM dann wieder in einen serialisierten HTML-String um.
--screenshot
Mit dem Flag --screenshot
wird ein Screenshot der Zielseite erstellt und als screenshot.png
im aktuellen Arbeitsverzeichnis gespeichert. Das ist besonders in Kombination mit dem Flag --window-size
nützlich.
Beispiel:
chrome --headless --screenshot --window-size=412,892 https://developer.chrome.com/
--print-to-pdf
Mit dem Flag --print-to-pdf
wird die Zielseite als PDF mit dem Namen output.pdf
im aktuellen Arbeitsverzeichnis gespeichert. Beispiel:
chrome --headless --print-to-pdf https://developer.chrome.com/
Optional können Sie das Flag --no-pdf-header-footer
hinzufügen, um den Druckheader (mit dem aktuellen Datum und der Uhrzeit) und den Footer (mit der URL und der Seitennummer) auszuschließen.
chrome --headless --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/
Hinweis: Die Funktion des Flags --no-pdf-header-footer
war zuvor mit dem Flag --print-to-pdf-no-header
verfügbar. Wenn Sie eine frühere Version verwenden, müssen Sie möglicherweise auf den alten Flag-Namen zurückgreifen.
--timeout
Das Flag --timeout
definiert die maximale Wartezeit (in Millisekunden), nach der der Inhalt der Seite von --dump-dom
, --screenshot
und --print-to-pdf
erfasst wird, auch wenn die Seite noch geladen wird.
chrome --headless --print-to-pdf --timeout=5000 https://developer.chrome.com/
Das Flag --timeout=5000
weist Chrome an, bis zu 5 Sekunden zu warten, bevor das PDF gedruckt wird. Daher dauert dieser Vorgang maximal 5 Sekunden.
--virtual-time-budget
Das --virtual-time-budget
dient als „Vorspultaste“ für zeitabhängigen Code (z. B. setTimeout
/setInterval
). Es zwingt den Browser, den Code der Seite so schnell wie möglich auszuführen, während die Seite glaubt, dass die Zeit tatsächlich vergeht.
Die Verwendung wird in dieser Demo veranschaulicht, in der mit setTimeout(fn, 1000)
ein Zähler jede Sekunde erhöht, protokolliert und angezeigt wird. Hier ist der relevante Code:
<output>0</output>
<script>
const element = document.querySelector('output');
let counter = 0;
setInterval(() => {
counter++;
console.log(counter);
element.textContent = counter;
}, 1_000);
</script>
Nach einer Sekunde enthält die Seite „1“, nach zwei Sekunden „2“ usw. So erfassen Sie den Status der Seite nach 42 Sekunden und speichern ihn als PDF:
chrome --headless --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time
--allow-chrome-scheme-url
Das Flag --allow-chrome-scheme-url
ist für den Zugriff auf chrome://
-URLs erforderlich. Dieses Flag ist ab Chrome 123 verfügbar. Beispiel:
chrome --headless --print-to-pdf --allow-chrome-scheme-url chrome://gpu
Fehlerbehebung
Da Chrome im Headless-Modus praktisch unsichtbar ist, kann es schwierig erscheinen, ein Problem zu beheben. Das Debuggen von Headless Chrome ist sehr ähnlich wie das von Chrome mit Benutzeroberfläche.
Starten Sie Chrome im monitorlosen Modus mit dem Befehlszeilen-Flag --remote-debugging-port
.
chrome --headless --remote-debugging-port=0 https://developer.chrome.com/
Dadurch wird eine eindeutige WebSocket-URL an stdout ausgegeben, z. B.:
DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9
In einer überwachten Chrome-Instanz können wir dann mithilfe des Remote-Debugging in Chrome DevTools eine Verbindung zum monitorlosen Ziel herstellen und es überprüfen.
- Gehen Sie zu
chrome://inspect
und klicken Sie auf die Schaltfläche Konfigurieren…. - Gib die IP-Adresse und die Portnummer aus der WebSocket-URL ein.
- Im vorherigen Beispiel habe ich
127.0.0.1:60926
eingegeben.
- Im vorherigen Beispiel habe ich
- Klicken Sie auf Fertig. Es sollte ein Remote-Ziel mit allen zugehörigen Tabs und anderen Zielen angezeigt werden.
- Klicken Sie auf Prüfen, um die Chrome-Entwicklertools aufzurufen und das Remote-Headless-Ziel zu prüfen, einschließlich einer Liveansicht der Seite.
Feedback
Wir freuen uns auf dein Feedback zum headless-Modus. Wenn Probleme auftreten, melden Sie den Fehler.