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. 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 monitorlose Modus teilt Code mit Chrome.

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.

  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.