Im Chrome-Headless-Modus können Sie den Browser in einer unbeaufsichtigten Umgebung ohne sichtbare Benutzeroberfläche ausführen. Im Prinzip kann Chrome auch ohne Chrome ausgeführt werden.
Der monitorlose Modus ist eine beliebte Wahl für die Browserautomatisierung im Rahmen von Projekten 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
Früher war der monitorlose Modus eine separate Implementierung eines alternativen Browsers, der als Teil derselben Chrome-Binärdatei bereitgestellt wurde. Es wurde kein Chrome-Browsercode aus //chrome
freigegeben.
In Chrome gibt es jetzt einen einheitlichen Modus für den monitorlosen Modus und den Heads-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 sowie Beispiele zur Verwendung anderer Sprachbindungen finden Sie im Blogpost des Selenium-Teams.
Befehlszeilen-Flags
Die folgenden Befehlszeilen-Flags sind im Headless-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. Damit Sie die Ausgabe von --dump-dom
erhalten, parst Chrome zuerst den HTML-Code in ein DOM, führt ein beliebiges <script>
-Objekt aus, das das DOM ändern könnte, und wandelt dieses 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 die PDF-Datei 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.
Zur Veranschaulichung der Verwendung sehen Sie sich diese Demo an, in der mithilfe von 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 sie 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 Chrome-Instanz mit Benutzeroberfläche können wir dann mithilfe der Chrome DevTools-Ferndebugging-Funktion eine Verbindung zum headless-Ziel herstellen und es prü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.