Mode headless de Chrome

Mathias Bynens

Peter Kvitek

Le mode sans interface graphique 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 des navigateurs, grâce à des projets tels que Puppeteer ou ChromeDriver.

Utiliser le mode headless

Pour utiliser le mode Headless, 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 était fournie avec le même binaire Chrome. Il n'a partagé aucun code du navigateur Chrome dans //chrome.

Chrome dispose désormais de modes headless et headful unifiés.

Depuis Chrome 132.0.6793.0, l'ancien mode headless n'est disponible que sous la forme d'un binaire autonome nommé chrome-headless-shell, qui peut être téléchargé ici.

Dans Puppeteer

Pour utiliser le mode sans interface graphique dans Puppeteer :

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: true,  // (default) enables Chrome Headless mode
  // `headless: 'shell'` enables Headless Shell (old headless)
  // `headless: false` enables "headful" mode
});

const page = await browser.newPage();
await page.goto('https://developer.chrome.com/');

// …

await browser.close();

Pour en savoir plus sur l'utilisation de Headless dans Puppeteer, consultez les ressources disponibles ici.

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 des exemples utilisant d'autres liaisons de langage, consultez l'article de blog de l'équipe Selenium.

Options de ligne de commande

Les indicateurs de ligne de commande suivants sont disponibles en mode sans affichage et dans Headless Shell.

--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/

Cela diffère de l'impression du code source HTML, que vous pouvez effectuer avec curl. Pour vous fournir le résultat de --dump-dom, Chrome analyse d'abord le code HTML dans un DOM, exécute tout <script> qui pourrait modifier le DOM, puis transforme ce DOM en une chaîne HTML sérialisée.

--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 sous le nom output.pdf dans le répertoire de travail actuel. Exemple :

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

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

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

Remarque : La fonctionnalité associée à l'option --no-pdf-header-footer était auparavant disponible avec l'option --print-to-pdf-no-header. Si vous utilisez une version antérieure, vous devrez peut-être revenir à l'ancien nom de l'indicateur.

--timeout

L'indicateur --timeout définit le temps d'attente maximal (en millisecondes) au-delà duquel 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. Cette opération prend donc 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 le code de la page le plus rapidement possible tout en faisant croire à la page que le temps passe réellement.

Pour illustrer son utilisation, prenons l'exemple de cette démo, qui incrémente, enregistre 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", au bout de deux secondes, "2", et ainsi de suite. Voici comment capturer l'état de la page après 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 depuis Chrome 123. Exemple :

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

Déboguer

Comme Chrome est pratiquement invisible en mode headless, il peut sembler difficile de résoudre un problème. Il est possible de déboguer Headless Chrome d'une manière très similaire à Chrome avec interface graphique.

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/

Cela imprime 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 graphique, 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 à distance 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 affichage. Si vous rencontrez des problèmes, signalez un bug.