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://inspectund 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:60926eingegeben.
- 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.