Monitorloser Modus in Chrome

Mathias Bynens

Peter Kvitek

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

Hinweis: Wird das Befehlszeilen-Flag --headless ohne expliziten Wert übergeben, wird trotzdem der alte monitorlose Modus aktiviert. Dieser Standardwert soll aber geändert werden. Wir beabsichtigen, das alte Headless-Objekt 2024 aus dem Chrome-Binärprogramm zu entfernen und die Unterstützung dieses Modus in Puppeteer einzustellen. Gleichzeitig wird der alte monitorlose Modus als eigenständiges Binärprogramm für Nutzer verfügbar gemacht, die noch kein Upgrade ausführen können.

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.

1. Gehen Sie zu chrome://inspect und klicken Sie auf die Schaltfläche Konfigurieren....
2. Geben Sie die IP-Adresse und die Portnummer aus der WebSocket-URL ein.
   • Im vorherigen Beispiel habe ich 127.0.0.1:60926 eingegeben.
3. Klicken Sie auf Fertig. Es sollte ein Remote-Ziel mit allen zugehörigen Tabs und anderen Zielen angezeigt werden.
4. 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.