Monitorloser Modus in Chrome

Mathias Bynens

Peter Kvitek

2017 wurde mit Chrome 59 der monitorlose Modus eingeführt, 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. Projekte wie Puppeteer oder ChromeDriver: Hier sehen Sie ein minimales Befehlszeilenbeispiel, in dem Sie den monitorlosen Modus verwenden, um eine PDF-Datei zu erstellen. einer bestimmten URL:

chrome --headless --print-to-pdf https://developer.chrome.com/

Wie funktioniert die Funktion „Headless“?

Bevor wir uns ansehen, wie Headless funktioniert, sollten Sie wissen, "alt" Headless hat funktioniert. Im vorherigen Befehlszeilen-Snippet wird die --headless Befehlszeilen-Flag, das darauf hinweist, dass Headless nur ein Betriebsmodus des normalen Chrome-Browsers. Vielleicht war es überraschend, dass das nicht stimmte. Tatsächlich war das alte Headless-Modell eine separate, alternative Browserimplementierung die als Teil desselben Chrome-Binärprogramms ausgeliefert wurden. Daten werden nicht geteilt Chrome-Browsercode in //chrome

Die Implementierung und Wartung eines separaten monitorlosen Browsers brachte viele Engineering-Aufwand. Da Headless ein separater wurden eigene Fehler und Funktionen gefunden, Chrome Dies führte zu Verwirrung bei automatisierten Browsertests, die möglicherweise im monitorlosen Modus fehlschlagen und im monitorlosen Modus fehlschlagen oder umgekehrt.

Darüber hinaus hat Headless alle automatisierten Tests ausgeschlossen, die auf dem Browser Installation der Erweiterung. Dasselbe gilt für alle anderen Funktionen auf Browserebene. nur wenn Headless eine eigene, separate Implementierung hatte.

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 aber kein Plattformfenster angezeigt wird. Alle anderen Funktionen, Zukunft, sind uneingeschränkt 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: Übergabe des Befehlszeilen-Flags --headless ohne expliziten Wert weiterhin den alten monitorlosen Modus aktiviert, aber wir beabsichtigen, diese Standardeinstellung zu ändern. Wir beabsichtigen, die alte Headless-Version aus dem Chrome-Binärprogramm zu entfernen und diesen Modus in Puppeteer 2024 unterstützt. Gleichzeitig erstellen wir den alten monitorlosen Modus als eigenständiges Binärprogramm für Nutzer, die kann noch nicht aktualisiert werden.

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, curl Damit du die Ausgabe von --dump-dom abrufen kannst, parst Chrome zuerst den HTML-Code in ein DOM wandeln, alle <script> ausführen, die das DOM ändern könnten, und wandelt dieses DOM wieder in einen serialisierten HTML-String um.

--screenshot

Mit dem Flag --screenshot wird ein Screenshot der Landingpage erstellt und unter dem Namen screenshot.png im aktuellen Arbeitsverzeichnis. Dies ist besonders nützlich in mit dem Flag --window-size kombinieren.

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 in 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 den Druckvorgang wegzulassen Kopfzeile (mit dem aktuellen Datum und der aktuellen Uhrzeit) und Fußzeile (mit URL und Seite) Nummer).

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 verfügbar mit dem Flag --print-to-pdf-no-header. Möglicherweise müssen Sie den alten Flag-Namen, falls Sie eine frühere Version verwenden.

--timeout

Das Flag --timeout definiert die maximale Wartezeit (in Millisekunden), nach der Der Inhalt der Seite wird von --dump-dom, --screenshot und --print-to-pdf, 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, mit dem Drucken bis zu 5 Sekunden zu warten in der PDF-Datei. 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). Dadurch wird der Browser gezwungen, so schnell wie möglich, während die Seite den Eindruck erweckt, dass die die Zeit tatsächlich vergeht.

Sehen Sie sich diese Demo an, um die Verwendung zu veranschaulichen. Inkrementierungen, Protokolle und Anzeigen von Zählern pro Sekunde mit setTimeout(fn, 1000). 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

Fehlerbehebung

Da Chrome im monitorlosen Modus praktisch unsichtbar ist, mag es kompliziert klingen. um ein Problem zu lösen. Es ist möglich, die monitorlose Chrome-Version ähnlich wie Headful Chrome.

Starten Sie Chrome im monitorlosen Modus mit der --remote-debugging-port-Befehlszeilen-Flag.

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 Chrome-Instanz können wir dann Remote-Debugging in Chrome DevTools ausführen, um eine Verbindung herzustellen zum monitorlosen Ziel hinzu und sehen Sie es sich an.

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 aufgeführten Zielen.
4. Klicken Sie auf Prüfen, um auf die Chrome-Entwicklertools zuzugreifen und die Remote-Version zu prüfen. Monitorloses Ziel mit Livestream der Seite.

Feedback

Wir freuen uns auf Ihr Feedback zum neuen monitorlosen Modus. Wenn auf Probleme stoßen, melden Sie den Fehler.