Mode headless de Chrome

Mathias Bynens

Peter Kvitek

Le mode headless de Chrome vous permet d'exécuter le navigateur dans un environnement sans surveillance, sans interface utilisateur visible. En d'autres termes, vous pouvez exécuter Chrome sans Chrome.

Le mode headless est un choix populaire pour l'automatisation du navigateur, via des projets tels que Puppeteer ou ChromeDriver.

Utiliser le mode headless

Pour utiliser le mode sans tête, transmettez l'indicateur de ligne de commande --headless:

chrome --headless

Utiliser l'ancien mode headless

Auparavant, le mode headless était une implémentation de navigateur distincte et alternative qui se trouvait dans le même binaire Chrome. Il ne partageait aucun code du navigateur Chrome dans //chrome.

Chrome propose désormais un mode headless et un mode avec interface utilisateur unifiés.

Pour l'instant, l'ancien mode headless est toujours disponible avec:

chrome --headless=old

Dans Puppeteer

Pour utiliser le mode headless dans 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();

Dans Selenium-WebDriver

Pour utiliser le mode headless dans Selenium-WebDriver:

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

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

// …

await driver.quit();

Pour en savoir plus, y compris obtenir des exemples utilisant d'autres liaisons de langage, consultez l'article de blog de l'équipe Selenium.

Options de ligne de commande

Les options de ligne de commande suivantes sont disponibles en mode sans tête.

--dump-dom

L'indicateur --dump-dom imprime le DOM sérialisé de la page cible dans stdout. Exemple :

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

Il s'agit d'une méthode différente de l'impression du code source HTML, que vous pouvez effectuer avec curl. Pour afficher la sortie de --dump-dom, Chrome analyse d'abord le code HTML dans un DOM, exécute tous les <script> susceptibles de modifier le DOM, puis transforme ce DOM en chaîne sérialisée de code HTML.

--screenshot

L'indicateur --screenshot prend une capture d'écran de la page cible et l'enregistre sous le nom screenshot.png dans le répertoire de travail actuel. Cela est particulièrement utile en combinaison avec l'option --window-size.

Exemple :

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

--print-to-pdf

L'indicateur --print-to-pdf enregistre la page cible au format PDF nommé output.pdf dans le répertoire de travail actuel. Exemple :

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

Vous pouvez également ajouter l'option --no-pdf-header-footer pour omettre l'en-tête d'impression (avec la date et l'heure actuelles) et le pied de page (avec l'URL et le numéro de page).

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

Remarque: La fonctionnalité derrière l'option --no-pdf-header-footer était auparavant disponible avec l'option --print-to-pdf-no-header. Vous devrez peut-être revenir à l'ancien nom d'indicateur si vous utilisez une version précédente.

--timeout

L'indicateur --timeout définit le délai d'attente maximal (en millisecondes) après lequel le contenu de la page est capturé par --dump-dom, --screenshot et --print-to-pdf, même si la page est toujours en cours de chargement.

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

L'indicateur --timeout=5000 indique à Chrome d'attendre jusqu'à cinq secondes avant d'imprimer le PDF. Par conséquent, l'exécution de ce processus prend au maximum cinq secondes.

--virtual-time-budget

--virtual-time-budget agit comme un "avance rapide" pour tout code dépendant du temps (par exemple, setTimeout/setInterval). Il force le navigateur à exécuter tout le code de la page aussi rapidement que possible, tout en faisant croire à la page que le temps passe.

Pour illustrer son utilisation, considérez cette démonstration, qui incrémente, consigne et affiche un compteur toutes les secondes à l'aide de setTimeout(fn, 1000). Voici le code concerné:

<output>0</output>
<script>
  const element = document.querySelector('output');
  let counter = 0;
  setInterval(() => {
    counter++;
    console.log(counter);
    element.textContent = counter;
  }, 1_000);
</script>

Au bout d'une seconde, la page contient "1", puis "2" au bout de deux secondes, et ainsi de suite. Voici comment capturer l'état de la page au bout de 42 secondes et l'enregistrer au format PDF:

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

--allow-chrome-scheme-url

Le flag --allow-chrome-scheme-url est requis pour accéder aux URL chrome://. Ce flag est disponible à partir de Chrome 123. Exemple :

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

Déboguer

Étant donné que Chrome est effectivement invisible en mode headless, il peut sembler difficile de résoudre un problème. Il est possible de déboguer Chrome sans interface utilisateur de manière très similaire à Chrome avec interface utilisateur.

Lancez Chrome en mode headless avec l'option de ligne de commande --remote-debugging-port.

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

Cette opération permet d'imprimer une URL WebSocket unique dans stdout, par exemple:

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

Dans une instance Chrome avec interface utilisateur, nous pouvons ensuite utiliser le débogage à distance des outils pour les développeurs Chrome pour nous connecter à la cible headless et l'inspecter.

1. Accédez à chrome://inspect, puis cliquez sur le bouton Configurer.
2. Saisissez l'adresse IP et le numéro de port de l'URL WebSocket.
   • Dans l'exemple précédent, j'ai saisi 127.0.0.1:60926.
3. Cliquez sur OK. Une cible distante doit s'afficher avec tous ses onglets et les autres cibles listées.
4. Cliquez sur Inspecter pour accéder aux outils pour les développeurs Chrome et inspecter la cible headless à distance, y compris une vue en direct de la page.

Commentaires

Nous avons hâte de connaître votre avis sur le mode sans tête. Si vous rencontrez des problèmes, signalez un bug.