Deze pagina is vertaald door de Cloud Translation API.

Chrome Headless-modus

Mathias Bynens

Peter Kvitek

Met de Chrome Headless-modus kunt u de browser in een onbeheerde omgeving uitvoeren, zonder enige zichtbare gebruikersinterface. In wezen kunt u Chrome zonder chroom uitvoeren.

De headless-modus is een populaire keuze voor browserautomatisering, via projecten als Puppeteer of ChromeDriver .

Gebruik de Headless-modus

Om de Headless-modus te gebruiken, geeft u de opdrachtregelvlag --headless door:

chrome --headless

Gebruik de oude Headless-modus

Voorheen was de Headless-modus een afzonderlijke, alternatieve browserimplementatie die toevallig werd geleverd als onderdeel van hetzelfde Chrome-binaire bestand. Er is geen enkele Chrome-browsercode gedeeld in //chrome .

Chrome heeft nu een uniforme Headless- en Headful-modus.

Headless-modus deelt code met Chrome.

Voorlopig is de oude Headless-modus nog steeds beschikbaar met:

chrome --headless=old

In Poppenspeler

Om de Headless-modus in Puppeteer te gebruiken:

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

Om de Headless-modus te gebruiken in Selenium-WebDriver:

const driver = await env
  .builder()
  .setChromeOptions(options.addArguments('--headless'))
  .build();

await driver.get('https://developer.chrome.com/');

// …

await driver.quit();

Zie de blogpost van het Selenium-team voor meer informatie, inclusief voorbeelden van het gebruik van andere taalbindingen.

Commandoregelvlaggen

De volgende opdrachtregelvlaggen zijn beschikbaar in de Headless-modus.

`--dump-dom`

De vlag --dump-dom drukt de geserialiseerde DOM van de doelpagina af naar stdout. Bijvoorbeeld:

chrome --headless --dump-dom https://developer.chrome.com/

Dit is anders dan het afdrukken van de HTML-broncode, wat u zou kunnen doen met curl . Om u de uitvoer van --dump-dom te geven, parseert Chrome eerst de HTML-code in een DOM, voert een <script> uit dat de DOM zou kunnen veranderen en verandert die DOM vervolgens weer in een geserialiseerde HTML-reeks.

`--screenshot`

De vlag --screenshot maakt een screenshot van de doelpagina en slaat deze op als screenshot.png in de huidige werkmap. Dit is vooral handig in combinatie met de vlag --window-size .

Bijvoorbeeld:

chrome --headless --screenshot --window-size=412,892 https://developer.chrome.com/

`--print-to-pdf`

De vlag --print-to-pdf slaat de doelpagina op als een PDF met de naam output.pdf in de huidige werkmap. Bijvoorbeeld:

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

Optioneel kunt u de vlag --no-pdf-header-footer toevoegen om de printkoptekst (met de huidige datum en tijd) en voettekst (met de URL en het paginanummer) weg te laten.

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

Niet: de functionaliteit achter de vlag --no-pdf-header-footer was voorheen beschikbaar met de vlag --print-to-pdf-no-header . Mogelijk moet u terugvallen op de oude vlagnaam als u een eerdere versie gebruikt.

`--timeout`

De vlag --timeout definieert de maximale wachttijd (in milliseconden) waarna de inhoud van de pagina wordt vastgelegd door --dump-dom , --screenshot en --print-to-pdf , zelfs als de pagina nog wordt geladen.

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

De vlag --timeout=5000 geeft aan dat Chrome maximaal 5 seconden moet wachten voordat de PDF wordt afgedrukt. Dit proces duurt dus maximaal 5 seconden.

`--virtual-time-budget`

Het --virtual-time-budget fungeert als een "snel vooruitspoelen" voor elke tijdsafhankelijke code (bijvoorbeeld setTimeout / setInterval ). Het dwingt de browser om de code van de pagina zo snel mogelijk uit te voeren, terwijl de pagina denkt dat de tijd daadwerkelijk verstrijkt.

Om het gebruik ervan te illustreren, kunt u deze demo overwegen, waarin elke seconde een teller wordt verhoogd, geregistreerd en weergegeven met behulp van setTimeout(fn, 1000) . Hier is de 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>

Na één seconde bevat de pagina "1"; na twee seconden, "2", enzovoort. Zo legt u de status van de pagina na 42 seconden vast en slaat u deze op als pdf:

chrome --headless --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time

`--allow-chrome-scheme-url`

De vlag --allow-chrome-scheme-url is vereist voor toegang tot chrome:// URL's. Deze vlag is beschikbaar via Chrome 123. Hier is een voorbeeld:

chrome --headless --print-to-pdf --allow-chrome-scheme-url chrome://gpu

Foutopsporing

Omdat Chrome feitelijk onzichtbaar is in de Headless-modus, kan het lastig klinken om een probleem op te lossen. Het is mogelijk om Headless Chrome te debuggen op een manier die sterk lijkt op headful Chrome.

Start Chrome in Headless-modus met de opdrachtregelvlag --remote-debugging-port .

chrome --headless --remote-debugging-port=0 https://developer.chrome.com/

Hiermee wordt een unieke WebSocket-URL naar stdout afgedrukt, bijvoorbeeld:

DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9

In een headful Chrome-exemplaar kunnen we vervolgens Chrome DevTools foutopsporing op afstand gebruiken om verbinding te maken met het Headless-doel en het te inspecteren.

Ga naar chrome://inspect en klik op de knop Configureren… .
Voer het IP-adres en poortnummer van de WebSocket-URL in.
- In het vorige voorbeeld heb ik 127.0.0.1:60926 ingevoerd.
Klik op Gereed . U zou een extern doel moeten zien verschijnen met alle bijbehorende tabbladen en andere doelen vermeld.
Klik op inspecteren om toegang te krijgen tot Chrome DevTools en inspecteer het externe Headless-doel, inclusief een liveweergave van de pagina.

Chrome DevTools kan een Headless-doelpagina op afstand inspecteren

Feedback

We kijken uit naar uw feedback over de Headless-modus. Als u problemen ondervindt, dient u een bug in .