Mode headless de Chrome

Mathias Bynens

Peter Kvitek

Grâce au mode headless de Chrome, vous pouvez exécuter le navigateur dans un environnement sans assistance, sans interface utilisateur visible. En résumé, vous pouvez exécuter Chrome sans Chrome.

Le mode headless est un choix populaire pour l'automatisation des navigateurs, par le biais de projets Puppeteer ou ChromeDriver.

Remarque :Dans Chrome 112, nous avons mis à jour le mode headless pour que Chrome crée, mais n'affiche aucune fenêtre de la plateforme. Toutes les autres fonctions, existantes et à l'avenir, sont disponibles sans limitation.

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 distincte et alternative du navigateur qui étaient livrés avec le même binaire Chrome. Non partagé n'importe quel code du navigateur Chrome //chrome

Chrome propose désormais des modes headless et headless.

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

chrome --headless=old

Remarque :Nous avons l'intention de supprimer l'ancienne version sans interface graphique du fichier binaire Chrome et d'arrêter la prise en charge de ce mode dans Puppeteer en 2024. En même temps, nous ferons l'ancien mode headless est disponible en tant que binaire autonome pour les utilisateurs ne peuvent pas encore être mises à niveau.

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();

Consultez l'article de blog de l'équipe Selenium pour en savoir plus, y compris pour découvrir des exemples utilisant des liaisons d'autres langages.

Options de ligne de commande

Les options de ligne de commande suivantes sont disponibles en mode headless.

--dump-dom

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

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

Ceci est différent de l'impression du code source HTML, ce que vous pouvez faire curl Pour afficher la sortie de --dump-dom, Chrome analyse d'abord le code HTML dans un DOM, exécute toutes les <script> susceptibles de modifier le DOM, puis qui transforme ce DOM en une chaîne HTML sérialisée.

--screenshot

L'indicateur --screenshot effectue une capture d'écran de la page cible et l'enregistre en tant que screenshot.png dans le répertoire de travail actuel. Ceci est particulièrement utile dans avec l'indicateur --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 éventuellement ajouter l'option --no-pdf-header-footer pour omettre l'impression un en-tête (avec la date et l'heure actuelles) et un pied de page (avec l'URL et la page (numéro de référence).

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

Non: auparavant, la fonctionnalité derrière l'indicateur --no-pdf-header-footer était disponible avec l'indicateur --print-to-pdf-no-header. Vous devrez peut-être revenir à l'ancien nom de l'indicateur, si vous utilisez une version antérieure.

--timeout

L'option --timeout définit le temps d'attente maximal (en millisecondes) au terme 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 de lancer l'impression. le PDF. L'exécution de ce processus prend donc au maximum 5 secondes.

--virtual-time-budget

--virtual-time-budget sert d'avance rapide. pour tout code dépendant de l'heure (par exemple, setTimeout/setInterval). Il oblige le navigateur à exécuter du code de la page aussi vite que possible, tout en faisant croire à la page le temps passe réellement.

Pour illustrer son utilisation, prenons cette démonstration, incrémente, consigne et affiche un compteur par seconde avec setTimeout(fn, 1000). Voici le code approprié:

<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". après deux secondes, "2", etc. Pour capturer l'état de la page au bout de 42 secondes et l'enregistrer au format PDF, procédez comme suit:

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

--allow-chrome-scheme-url

L'option --allow-chrome-scheme-url est requise pour accéder aux URL chrome://. Cet indicateur est disponible à partir de Chrome 123. Exemple :

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

Déboguer

Chrome étant effectivement invisible en mode headless, cette opération peut sembler complexe. pour résoudre un problème. Il est possible de déboguer Chrome sans interface graphique d'une manière très comme dans Chrome.

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

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

Cette commande imprime une URL WebSocket unique vers stdout, par exemple:

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

Dans une instance tête de Chrome, nous pouvons alors utiliser Débogage à distance des outils pour les développeurs Chrome pour vous connecter à la cible headless et de l'inspecter.

1. Accédez à chrome://inspect et cliquez sur le bouton Configure (Configurer).
2. Saisissez l'adresse IP et le numéro de port issus de l'URL WebSocket.
   • Dans l'exemple précédent, j'ai saisi 127.0.0.1:60926.
3. Cliquez sur OK. Vous devriez voir apparaître une cible distante avec tous ses onglets et d'autres cibles.
4. Cliquez sur inspect pour accéder aux outils pour les développeurs Chrome et inspecter la télécommande Cible sans interface graphique, y compris une vue en direct de la page.

Commentaires

Nous sommes impatients de recevoir vos commentaires sur le mode headless. Si Si vous rencontrez des problèmes, signalez un bug.