Le mode headless de Chrome vous permet d'exécuter le navigateur dans un environnement sans surveillance, sans interface utilisateur visible. En résumé, 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 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 se trouvait dans le même binaire Chrome. Il ne partageait aucun code du navigateur Chrome dans //chrome.
Chrome propose désormais des modes headless et headless.
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/
Cette opération est différente de l'impression du code source HTML, ce que vous pouvez faire 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 éventuellement 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 lui faisant croire 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 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", 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.
- Accédez à
chrome://inspectet cliquez sur le bouton Configure (Configurer). - 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.
- Dans l'exemple précédent, j'ai saisi
- Cliquez sur OK. Une cible distante doit s'afficher avec tous ses onglets et les autres cibles listées.
- Cliquez sur Inspecter pour accéder aux outils pour les développeurs Chrome et inspecter la cible headless distante, 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.