Configurer le mode headless dans Puppeteer : trouver l’équilibre entre vitesse et fonctionnalités

Puppeteer vous permet d’automatiser les navigateurs Chrome ou Chromium, et le choix entre le mode headless ou avec interface peut avoir un impact significatif sur les performances et le débogage. Voici un aperçu rapide :

• Mode headless : plus rapide, utilise moins de ressources, idéal pour l’automatisation et les tâches de production comme le web scraping ou les tests.
• Mode avec interface : interface visuelle du navigateur, plus adaptée au débogage et au développement.

Comparaison rapide

Le nouveau mode headless associe les performances du headless à des outils de débogage améliorés, ce qui en fait un choix équilibré pour de nombreux workflows.

Choisissez :

• Le mode headless standard pour l’efficacité en CI/CD ou en production.
• Le nouveau mode headless pour le débogage avancé et les fonctionnalités modernes.
• Le mode avec interface pour le débogage visuel et le test d’éléments interactifs.

Ce guide explique comment configurer chaque mode, leurs avantages et dans quels cas les utiliser.

Puppeteer - Modes headless et avec interface

1. Mode headless standard

Le mode headless standard est la configuration par défaut de Puppeteer. Il exécute Chrome ou Chromium sans leur interface utilisateur graphique (GUI). En éliminant la GUI, il utilise moins de mémoire, traite les pages plus rapidement et réduit l’utilisation du processeur.

Fonctionnalités clés

Le mode headless standard prend en charge un large éventail d’opérations de navigateur, notamment :

Comment l’utiliser

Vous pouvez lancer le mode headless avec le code suivant :

const browser = await puppeteer.launch(); // Headless par défaut
// OU
const browser = await puppeteer.launch({ headless: true }); // Headless explicite

Pourquoi il est utile

Le mode headless est idéal pour des tâches comme le web scraping, les tests automatisés et la création de captures d’écran ou de PDF. Par exemple, Optimizely a réduit son cycle de tests de 24 heures à une seule heure en exploitant les tests de navigateur headless dans le cloud [1].

Points de vigilance

Bien qu’efficace, le mode headless présente certaines difficultés :

• Certains sites web peuvent détecter et bloquer les navigateurs headless.
• Le débogage est plus difficile sans retour visuel.
• Les interactions utilisateur plus complexes peuvent nécessiter une configuration supplémentaire.

Pour améliorer la fiabilité et éviter la détection, vous pouvez :

• Définir une chaîne user-agent personnalisée.
• Ajouter des délais entre les actions automatisées.
• Utiliser des mécanismes robustes de gestion des erreurs.
• Vérifier que la page est entièrement chargée avant d’extraire les données.

Pour une efficacité encore plus grande sur certaines tâches côté serveur, vous pouvez envisager la variante chrome-headless-shell. Cette option légère est parfaite pour les workflows axés sur l’automatisation. Lancez-la avec :

const browser = await puppeteer.launch({ headless: 'shell' });

Ce mode est particulièrement efficace pour les opérations côté serveur et offre des performances optimisées.

Voyons maintenant le nouveau mode headless de Chrome et comment il fait passer les performances au niveau supérieur.

2. Nouveau mode headless de Chrome

Chrome a introduit un mode headless amélioré qui élève l’automatisation des navigateurs à un nouveau niveau. Contrairement à l’ancienne version, ce mode utilise la même base de code que le navigateur Chrome classique, garantissant une meilleure stabilité et l’accès à toutes les fonctionnalités du navigateur. Il combine l’efficacité du fonctionnement headless avec les fonctionnalités d’un navigateur complet, ce qui rend l’automatisation et le débogage bien plus fluides.

Fonctionnalités clés

Le nouveau mode headless fonctionne en créant des fenêtres de plateforme sans les afficher. Vous pouvez ainsi utiliser toutes les capacités du navigateur tout en bénéficiant des avantages en matière de performances du mode headless. Voici comment l’utiliser dans votre code :

const browser = await puppeteer.launch({ headless: 'new' }); // Utilise explicitement le nouveau mode headless
// OU
const browser = await puppeteer.launch({ headless: true }); // Utilise par défaut le nouveau mode headless

Outils de débogage

Ce mode comprend également plusieurs outils qui facilitent le débogage :

Résolution avancée des problèmes

1. Utiliser DevTools pour le débogage

Vous pouvez activer les DevTools intégrés de Chrome pour examiner en détail le comportement du navigateur :

const browser = await puppeteer.launch({
  headless: 'new',
  devtools: true
});

2. Surveillance des performances et suivi des erreurs

La base de code partagée permet un profilage précis des performances et une résolution efficace des erreurs. Utilisez cette configuration pour surveiller et déboguer les opérations côté client et côté serveur :

const browser = await puppeteer.launch({
  headless: 'new',
  devtools: true,
  slowMo: 100,
  args: ['--enable-logging', '--v=1']
});

Conseils de migration

Bien que l’ancien mode headless (headless: 'old') soit toujours disponible, il est recommandé de passer à la nouvelle version. Le mode historique sera progressivement abandonné ; effectuer la transition dès maintenant garantit une meilleure cohérence et vous prépare aux futures mises à jour.

Avantages en matière de performances

Grâce à une base de code unifiée, le nouveau mode headless offre un comportement cohérent dans différents environnements. Cette cohérence réduit les problèmes propres à chaque environnement et améliore la fiabilité des workflows automatisés.

sbb-itb-23997f1

3. Mode d’affichage du navigateur

Le mode d’affichage du navigateur ouvre une fenêtre de navigateur visible lors des opérations Puppeteer. Bien qu’il utilise davantage de ressources, il offre de meilleurs outils de débogage et un retour visuel.

Considérations relatives aux performances

L’exécution en mode affichage augmente l’utilisation des ressources, mais offre certains avantages :

const browser = await puppeteer.launch({
  headless: false,
  args: ['--enable-gpu-rasterization'],
  defaultViewport: null
});

Avec un navigateur visible, l’accélération matérielle du GPU peut être activée, ce qui améliore les performances sur les sites web riches en images. De plus, ce mode réduit les risques de détection en tant que bot en reproduisant le comportement d’un navigateur standard.

Fonctionnalités de débogage améliorées

Le mode affichage est idéal pour la résolution de problèmes, car il fournit un retour visuel immédiat. Voici une configuration de débogage utile :

const browser = await puppeteer.launch({
  headless: false,
  devtools: true,
  slowMo: 250,
  defaultViewport: {
    width: 1920,
    height: 1080
  }
});

Cette configuration ouvre automatiquement DevTools, introduit un délai de 250 ms pour faciliter l’inspection et utilise une taille de fenêtre standard afin de garantir la cohérence des tests.

Cas d’utilisation

Conseils d’optimisation

Pour préserver la fluidité du mode affichage :

• Gérez les ressources : fermez les onglets et fenêtres inutilisés afin d’économiser de la mémoire.
• Surveillez les performances : activez la journalisation du navigateur pour suivre les métriques de performance.
• Utilisez l’accélération GPU : activez les fonctionnalités GPU pour les tâches impliquant des graphismes lourds.

« Il est parfois utile de voir ce que le navigateur affiche. Au lieu de lancer le navigateur en mode headless, lancez une version complète du navigateur avec headless défini sur false. » - Documentation Puppeteer [2]

Configuration avancée

Pour les tâches plus exigeantes, vous pouvez améliorer le mode affichage avec des paramètres supplémentaires :

const browser = await puppeteer.launch({
  headless: false,
  args: [
    '--enable-gpu-rasterization',
    '--window-size=1920,1080',
    '--disable-web-security'
  ],
  dumpio: true
});

Cette configuration améliore la visibilité, active une journalisation détaillée et autorise les accès inter-origines. Ces ajustements garantissent une expérience plus fluide et préparent la comparaison des performances et des fonctionnalités dans le guide suivant.

Guide de comparaison des modes

Lors de la configuration de Puppeteer, chaque mode offre un compromis différent entre vitesse, utilisation des ressources et capacités de débogage. Le bon choix dépend de vos besoins spécifiques.

Voici le détail des modes :

• Mode headless standard
  Ce mode est conçu pour l’efficacité et un démarrage rapide, ce qui le rend parfait pour les tests automatisés ou les pipelines CI/CD. Il utilise un minimum de ressources système et fournit une sortie de débogage basique via la console.
• Nouveau mode headless
  Il combine de solides fonctionnalités de débogage avec des performances proches de celles du mode headless standard. C’est un bon choix pour les tâches qui nécessitent un équilibre entre vitesse et fonctionnalités.
• Mode d’affichage du navigateur
  Ce mode vous donne un accès complet à Chrome DevTools et fournit un retour visuel en temps réel. Il est idéal pour le débogage détaillé ou l’analyse de workflows complexes. Bien qu’il exige davantage de ressources système, il prend en charge les tâches qui bénéficient de l’accélération matérielle et de contrôles réseau avancés.

Puppeteer exploite le Chrome DevTools Protocol pour un contrôle précis du navigateur, notamment l’interception réseau et l’exécution de JavaScript, ce qui vous permet d’affiner vos configurations.

Par exemple, voici comment optimiser le nouveau mode headless :

const browser = await puppeteer.launch({
  headless: 'new',
  args: [
   '--disable-gpu',
   '--no-sandbox',
   '--disable-setuid-sandbox'
  ]
});

Utilisez le mode headless standard pour une automatisation rapide et économe en ressources, le mode d’affichage du navigateur pour un débogage détaillé, ou le nouveau mode headless lorsque vous avez besoin d’un équilibre entre performances et fonctionnalités.

Choisir le bon mode

Lors de la sélection d’un mode dans Puppeteer, tenez compte des objectifs et exigences spécifiques de votre projet. Puppeteer met l’accent sur la vitesse, la sécurité, la stabilité et la simplicité [3]. Voici une répartition pour vous aider à choisir :

Le mode headless standard est idéal si vous avez besoin de :

• Performances maximales avec un minimum de ressources
• Aucun débogage visuel ni rendu du navigateur
• Une option fiable pour les environnements CI/CD

Le nouveau mode headless est le plus adapté lorsque vous avez besoin de :

• Outils de débogage avancés sans sacrifier les performances
• Compatibilité avec les fonctionnalités web modernes
• Un équilibre entre utilisation des ressources et fonctionnalités
• Accès à la plupart des fonctionnalités du Chrome DevTools Protocol

Le mode d’affichage du navigateur convient aux situations impliquant :

• Des besoins de débogage détaillés
• Une validation visuelle des workflows d’automatisation
• Le développement et le test d’éléments interactifs
• L’utilisation de l’accélération matérielle

Cas d’utilisation courants et recommandations :

L’API de Puppeteer facilite le passage d’un mode à l’autre à mesure que votre projet évolue.