Monitorloser Modus in Chrome

Peter Kvitek
Peter Kvitek

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 Code im headless Modus wird mit Chrome geteilt.

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.

  1. Gehen Sie zu chrome://inspect und klicken Sie auf die Schaltfläche Konfigurieren....
  2. Gib 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 Prüfen, um die Chrome-Entwicklertools aufzurufen und das Remote-Headless-Ziel zu prüfen, einschließlich einer Liveansicht der Seite.

Mit den Chrome DevTools eine remote Headless-Zielseite prüfen

Feedback

Wir freuen uns auf dein Feedback zum headless-Modus. Wenn Probleme auftreten, melden Sie den Fehler.