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.
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
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.
- Accédez à
chrome://inspectet cliquez sur le bouton Configure (Configurer). - 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.
- Dans l'exemple précédent, j'ai saisi
- Cliquez sur OK. Vous devriez voir apparaître une cible distante avec tous ses onglets et d'autres cibles.
- 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.