2017 wurde mit Chrome 59 der monitorlose Modus eingeführt, mit dem Sie den Browser in einer unbeaufsichtigten Umgebung ohne sichtbare UI ausführen können. 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. Hier sehen Sie ein minimales Befehlszeilenbeispiel, in dem Sie den monitorlosen Modus verwenden, um eine PDF-Datei einer bestimmten URL zu erstellen:
chrome --headless --print-to-pdf https://developer.chrome.com/
Wie funktioniert die Funktion „Headless“?
Bevor wir uns ansehen, wie Headless jetzt funktioniert, ist es wichtig zu verstehen, wie die „alte“ Headless funktioniert. Im vorherigen Befehlszeilen-Snippet wird das Befehlszeilen-Flag --headless
verwendet, was darauf hindeutet, dass Headless nur ein Betriebsmodus des regulären Chrome-Browsers ist. Vielleicht war es überraschend, dass das nicht stimmte.
Die alte Version von Headless war eine separate, alternative Browserimplementierung, die als Teil derselben Chrome-Binärdatei bereitgestellt wurde. Sie gibt keinen Code des Chrome-Browsers in //chrome
weiter.
Die Implementierung und Wartung eines separaten monitorlosen Browsers war mit einem hohen Entwicklungsaufwand verbunden. Da Headless eine separate Implementierung war, hatte es eigene Fehler und Funktionen, die in der Headless-Chrome-Version nicht vorhanden waren. Dies führte zu Verwirrung bei automatisierten Browsertests, die im monitorlosen Modus möglicherweise bestanden werden, aber im monitorlosen Modus fehlschlagen oder umgekehrt.
Darüber hinaus hat Headless alle automatisierten Tests ausgeschlossen, bei denen die Installation von Browsererweiterungen erforderlich war. Dasselbe gilt für alle anderen Funktionen auf Browserebene. Wenn Headless keine eigene Implementierung hatte, wurde sie nicht unterstützt.
Das Chrome-Team hat jetzt den monitorlosen Modus und den monitorlosen Modus zusammengeführt.
Der neue monitorlose Modus ist ab Chrome 112 verfügbar. In diesem Modus erstellt Chrome Plattformfenster, zeigt sie aber nicht an. Alle anderen vorhandenen und zukünftigen Funktionen sind ohne Einschränkungen verfügbar.
Monitorlosen Modus verwenden
Übergeben Sie das Befehlszeilen-Flag --headless=new
, um den neuen monitorlosen Modus zu verwenden:
chrome --headless=new
Der alte monitorlose Modus ist vorerst weiterhin verfügbar mit:
chrome --headless=old
In Puppeteer
So aktivieren Sie den neuen monitorlosen Modus in 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();
In Selenium WebDriver
So verwenden Sie den neuen monitorlosen Modus in Selenium-WebDriver:
const driver = await env
.builder()
.setChromeOptions(options.addArguments('--headless=new'))
.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 neuen monitorlosen Modus verfügbar.
--dump-dom
Das Flag --dump-dom
gibt das serialisierte DOM der Landingpage in stdout aus.
Beispiel:
chrome --headless=new --dump-dom https://developer.chrome.com/
Dies unterscheidet sich vom Drucken des HTML-Quellcodes, wie Sie es mit curl
tun können. Damit Sie die Ausgabe von --dump-dom
erhalten, parst Chrome zuerst den HTML-Code in ein DOM. Anschließend führt Chrome <script>
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 Landingpage erstellt und als screenshot.png
im aktuellen Arbeitsverzeichnis gespeichert. Dies ist besonders in Kombination mit dem Flag --window-size
nützlich.
Beispiel:
chrome --headless=new --screenshot --window-size=412,892 https://developer.chrome.com/
--print-to-pdf
Das Flag --print-to-pdf
speichert die Zielseite als PDF-Datei mit dem Namen output.pdf
im aktuellen Arbeitsverzeichnis. Beispiel:
chrome --headless=new --print-to-pdf https://developer.chrome.com/
Optional können Sie das Flag --no-pdf-header-footer
hinzufügen, um die Druckkopfzeile (mit dem aktuellen Datum und die aktuelle Uhrzeit) und die Fußzeile (mit URL und Seitennummer) wegzulassen.
chrome --headless=new --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/
Nicht: Die Funktion hinter dem Flag --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=new --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 die Ausführung dieses Vorgangs höchstens 5 Sekunden.
--virtual-time-budget
--virtual-time-budget
fungiert als "Vorspulen" für zeitabhängigen Code (z. B. setTimeout
/setInterval
). Er zwingt den Browser dazu, den Code der Seite so schnell wie möglich auszuführen, während die Seite den Eindruck erweckt, dass die Zeit tatsächlich verstrichen ist.
Die Verwendung wird in dieser Demo veranschaulicht, in der mit setTimeout(fn, 1000)
pro Sekunde ein Zähler erhöht, protokolliert und angezeigt wird. Hier ist der entsprechende 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=new --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=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu
Debuggen
Da Chrome im monitorlosen Modus praktisch unsichtbar ist, kann es kompliziert klingen, ein Problem zu beheben. Es ist möglich, eine monitorlose Chrome-Version auf eine Weise zu debuggen, die der monitorlosen Chrome-Version sehr ähnlich ist.
Starten Sie Chrome im monitorlosen Modus mit dem Befehlszeilen-Flag --remote-debugging-port
.
chrome --headless=new --remote-debugging-port=0 https://developer.chrome.com/
Damit wird eine eindeutige WebSocket-URL für stdout ausgegeben, zum Beispiel:
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.... - Geben Sie 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 Inspect (Prüfen), um auf die Chrome-Entwicklertools zuzugreifen und das monitorlose Remote-Ziel zu überprüfen, einschließlich eines Livestream der Seite.
Feedback
Wir freuen uns auf Ihr Feedback zum neuen monitorlosen Modus. Falls Probleme auftreten, melden Sie den Fehler.