Général
Georges Miloradovitch
Chercheur, rédacteur et intervieweur de cas d'utilisation
28 février 2025
.png)
.svg){kind=icon}
Vous souhaitez automatiser des tâches, extraire des données ou tester des sites Web efficacement ? Sans tête Chrome peut vous aider à faire exactement cela. Il s'agit d'un navigateur qui fonctionne sans interface graphique, ce qui le rend plus rapide et moins gourmand en ressources pour des tâches telles que le scraping Web, les tests automatisés et l'analyse SEO.
Des plates-formes comme Laténode Simplifiez encore davantage ce processus avec des outils low-code pour l'automatisation. Que vous soyez développeur ou débutant, Headless Chrome est un outil puissant pour rationaliser les tâches Web. Voyons comment le configurer et l'utiliser efficacement.
Assurez-vous que votre système répond aux spécifications requises et suivez les étapes d'installation pour votre plateforme.
Vérifiez la compatibilité de votre système :
| Système d'exploitation | Configuration requise |
|---|---|
| Windows | • Windows 10 ou Windows Server 2016+ • Intel Pentium 4 (compatible SSE3) ou plus récent |
| macOS | • macOS Big Sur 11 ou version ultérieure |
| Linux | • 64 bits Ubuntu 18.04 + Debian +10 • openSUSE 15.5 + ou Fedora +39 • Intel Pentium 4 (compatible SSE3) ou plus récent |
Vous devrez également installer Node.js (dernière version LTS) pour utiliser Puppeteer.
Suivez ces étapes en fonction de votre plateforme :
npm install puppeteer
brew install --cask google-chrome
npm install puppeteer
sudo apt update
sudo apt install google-chrome-stable
npm install puppeteer
Après l'installation, vérifiez votre configuration pour vous assurer que tout fonctionne.
Exécutez ces commandes pour confirmer que Chrome est correctement installé :
google-chrome-stable --version
google-chrome-stable --headless --disable-gpu --dump-dom https://www.google.com/
Si vous voyez la version de Chrome et la sortie HTML de Google, Chrome est prêt à fonctionner. Pour tester Puppeteer, utilisez le script ci-dessous :
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.google.com');
await browser.close();
})();
Enregistrez ce code sous test.js et exécutez-le en utilisant node test.jsSi tout s'exécute sans erreur, votre configuration est terminée et vous êtes prêt à vous lancer dans les tâches d'automatisation.
Configurez les configurations essentielles pour garantir une automatisation fluide, une gestion efficace des ressources et une gestion fiable des demandes.
const browser = await puppeteer.launch({
headless: true,
defaultViewport: { width: 1920, height: 1080 },
args: [
'--no-sandbox',
'--disable-setuid-sandbox',
'--disable-dev-shm-usage',
'--disable-accelerated-2d-canvas',
'--disable-gpu'
]
});
Cette configuration fonctionne bien pour la plupart des tâches d'automatisation, en utilisant des dimensions d'écran de bureau standard et des arguments axés sur la stabilité. Vous pouvez modifier ces paramètres en fonction de vos besoins spécifiques.
Ajustez la configuration pour des tâches individuelles. Par exemple, si vous travaillez sur le scraping Web, vous pouvez réduire l'utilisation des ressources et éviter la détection :
const page = await browser.newPage();
// Block unnecessary resources
await page.setRequestInterception(true);
page.on('request', (request) => {
if (['image', 'stylesheet', 'font'].includes(request.resourceType())) {
request.abort();
} else {
request.continue();
}
});
// Set custom headers
await page.setExtraHTTPHeaders({
'Accept-Language': 'en-US,en;q=0.9',
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
});
// Enable JavaScript if required
await page.setJavaScriptEnabled(true);
Pour les tests automatisés, privilégiez la stabilité et la cohérence :
const page = await browser.newPage();
await page.setDefaultTimeout(30000);
await page.setDefaultNavigationTimeout(30000);
await page.setCacheEnabled(false);
Vous pouvez encore améliorer les performances en modifiant les paramètres de vitesse et d’allocation des ressources.
Améliorez les performances de Chrome sans tête en gérant efficacement les ressources. Vous trouverez ci-dessous quelques configurations utiles :
| Type de réglage | Configuration | Objectif |
|---|---|---|
| Mémoire | --max-old-space-size=4096 |
Alloue jusqu'à 4 Go de mémoire pour Node.js |
| Processus | --single-process |
Exécute Chrome en tant que processus unique |
| interprétation | --disable-gpu |
Désactive l’accélération matérielle du GPU (comme indiqué précédemment) |
Pour les tâches à plus grande échelle, vous pouvez exécuter plusieurs sessions de navigateur simultanément tout en gérant les ressources :
const cluster = await Cluster.launch({
concurrency: Cluster.CONCURRENCY_CONTEXT,
maxConcurrency: 4,
monitor: true,
puppeteerOptions: {
headless: true,
args: ['--no-sandbox']
}
});
De plus, ajustez les paramètres de délai d'attente en fonction des conditions de votre réseau :
page.setDefaultNavigationTimeout(60000); // 60 seconds for navigation
page.setDefaultTimeout(30000); // 30 seconds for other tasks
Ces configurations vous aideront à trouver un équilibre entre vitesse, stabilité et efficacité des ressources.
Headless Chrome peut exécuter JavaScript et gérer efficacement les interactions Web avec Puppeteer.
Puppeteer simplifie l'automatisation du navigateur :
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
// Navigate to a page and wait for the network to be idle
await page.goto('https://example.com', {
waitUntil: 'networkidle0',
timeout: 30000
});
// Get the page title using JavaScript
const pageTitle = await page.evaluate(() => {
return document.title;
});
// Extract specific data from the page
const results = await page.evaluate(() => {
const data = [];
document.querySelectorAll('.product-item').forEach(item => {
data.push({
name: item.querySelector('.title').textContent,
price: item.querySelector('.price').textContent
});
});
return data;
});
Vous pouvez simuler les actions des utilisateurs, comme les clics et la saisie, pour rendre les interactions plus naturelles :
// Wait for an element to appear and click it
await page.waitForSelector('.login-button');
await page.click('.login-button');
// Type text into an input field with random delays
await page.type('#username', '[email protected]', {
delay: Math.floor(Math.random() * 100) + 50
});
// Handle form submission and wait for navigation
await Promise.all([
page.waitForNavigation(),
page.click('#submit-button')
]);
« Un navigateur sans interface utilisateur est un excellent outil pour les tests automatisés et les environnements de serveur où vous n'avez pas besoin d'une interface utilisateur visible. » - Eric Bidelman
Le contenu dynamique nécessite une gestion spécifique pour assurer une interaction appropriée :
// Wait for dynamic content to load
await page.waitForFunction(
'document.querySelector(".dynamic-content").childNodes.length > 0',
{ timeout: 5000 }
);
// Handle infinite scrolling
async function scrollToBottom() {
await page.evaluate(async () => {
await new Promise((resolve) => {
let totalHeight = 0;
const distance = 100;
const timer = setInterval(() => {
window.scrollBy(0, distance);
totalHeight += distance;
if (totalHeight >= document.body.scrollHeight) {
clearInterval(timer);
resolve();
}
}, 100);
});
});
}
Voici quelques scénarios et solutions courants pour travailler avec des éléments dynamiques :
| Scénario | Solution | Case Study |
|---|---|---|
| États de chargement | Utilisez waitForSelector avec contrôle de visibilité |
Demandes d'une seule page |
| Mises à jour AJAX | Utilisez waitForFunction pour vérifier le contenu |
Flux de données en temps réel |
| DOM de l'ombre | Utilisez evaluateHandle avec des sélecteurs personnalisés |
Composants Web |
Conseils d'optimisation:
S'appuyant sur des paramètres de base et des opérations JavaScript, ces fonctionnalités avancées font passer Headless Chrome au niveau supérieur. Elles permettent d'obtenir des résultats plus précis et une meilleure gestion des erreurs, ce qui rend vos tâches d'automatisation encore plus efficaces.
Prendre des captures d'écran avec Puppeteer est simple. Voici comment vous pouvez capturer une capture d'écran d'une page entière :
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Set a consistent viewport size
await page.setViewport({
width: 1920,
height: 1080,
deviceScaleFactor: 2
});
// Wait for the page to load and capture a full-page screenshot
await page.goto('https://example.com', {
waitUntil: 'networkidle0',
timeout: 30000
});
await page.screenshot({
path: 'full-page.jpg',
fullPage: true,
type: 'jpeg'
});
Vous devez capturer un élément spécifique ? Concentrez-vous sur une section particulière de la page :
// Screenshot of a specific element
const element = await page.$('.hero-section');
await element.screenshot({
path: 'hero.png',
omitBackground: true
});
| Option de capture d'écran | Meilleur cas d'utilisation | Impact sur les performances |
|---|---|---|
| Format JPEG | Captures d'écran de grande taille, traitement plus rapide | Qualité inférieure, taille de fichier plus petite |
| Format PNG | Niveau de détail ou de transparence élevé requis | Des fichiers plus volumineux, un traitement plus lent |
| Élément spécifique | Composants de l'interface utilisateur, capture sélective | Utilisation minimale des ressources |
Vous pouvez également générer des PDF avec un formatage personnalisé :
await page.pdf({
path: 'document.pdf',
format: 'A4',
margin: {
top: '1in',
right: '1in',
bottom: '1in',
left: '1in'
},
printBackground: true,
displayHeaderFooter: true,
headerTemplate: '<div style="font-size: 10px;">Generated on {{date}}</div>',
footerTemplate: '<div style="font-size: 10px;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>'
});
« Chrome sans tête est un moyen d'exécuter le navigateur Chrome dans un environnement sans tête. En gros, il s'agit d'exécuter Chrome sans Chrome ! Il apporte toutes les fonctionnalités de la plateforme Web moderne fournies par Chromium et le moteur de rendu Blink à la ligne de commande. » - Eric Bidelman, Chrome pour les développeurs
Une fois vos sorties prêtes, vous pouvez utiliser des outils intégrés pour déboguer et affiner les performances.
Le débogage des problèmes dans Headless Chrome est plus facile avec le protocole Chrome DevTools :
// Enable debugging
const browser = await puppeteer.launch({
headless: true,
devtools: true,
args: ['--remote-debugging-port=9222']
});
// Add error logging
page.on('console', msg => console.log('Browser console:', msg.text()));
page.on('pageerror', err => console.error('Page error:', err));
Pour les problèmes plus complexes, vous pouvez automatiser la capture des erreurs :
try {
await page.goto('https://example.com');
} catch (error) {
await page.screenshot({
path: `error-${Date.now()}.png`,
fullPage: true
});
console.error('Navigation failed:', error);
}
Par exemple, Chrome DevTools a été utilisé pour résoudre les problèmes d’identification d’éléments dans les services Google IDP.
| Méthode de débogage | Objectif | Quand utiliser |
|---|---|---|
| Outils de développement à distance | Inspection en direct | Problèmes de rendu complexes |
| Journalisation de la console | Suivre l'exécution du script | Problèmes de flux de script |
| Captures d'écran d'erreur | Débogage visuel | Pannes liées à l'interface utilisateur |
Cette section explique comment utiliser une plateforme low-code comme Latenode pour l'automatisation Headless Chrome. Latenode intègre Headless Chrome dans son système, ce qui simplifie l'automatisation Web pour les développeurs et les utilisateurs non techniques.
Latenode intègre la fonctionnalité Headless Chrome via son système de nœuds « Navigateur sans tête ». Cela permet aux équipes d'automatiser les flux de travail sans avoir à gérer directement Puppeteer.
| Fonctionnalité | Description | Bénéfice |
|---|---|---|
| Visual Builder | Création de workflow par glisser-déposer | Simplifie les tâches d'automatisation de base |
| Copilote de code IA | Génération de code automatisée | Accélère la configuration de scénarios complexes |
| Stockage de données intégré | Gestion des données intégrée | Facilite la gestion des données extraites |
| Intégration NPM | Accès à plus d'un million de forfaits | Ajoute des fonctionnalités supplémentaires |
Voici un exemple de script pour commencer :
async function run({execution_id, input, data, page}) {
// Set user agent for better compatibility
await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/98.0.4758.102');
// Configure viewport for reliable element detection
await page.setViewport({
width: 1920,
height: 1080,
deviceScaleFactor: 1
});
return {
status: 'success'
}
}
Pour les tâches Web plus avancées, le nœud de navigateur Headless de Latenode permet d'accéder aux fonctions de manipulation de page. Il gère également automatiquement les instances de navigateur, vous n'avez donc pas besoin de configurer Puppeteer manuellement.
Latenode rationalise l'automatisation de Chrome Headless en s'attaquant aux problèmes courants liés au codage traditionnel. Les principales fonctionnalités incluent :
La tarification est basée sur l'utilisation de l'exécution, avec des options allant d'un niveau gratuit (300 crédits) à des plans de niveau entreprise qui prennent en charge jusqu'à 1.5 million d'exécutions de scénarios par mois. Cela en fait un choix flexible et économique pour faire évoluer les efforts d'automatisation.
Pour les équipes qui jonglent avec plusieurs flux de travail, le générateur visuel accélère le développement tout en prenant en charge des fonctionnalités avancées telles que la capture d'écran et la génération de PDF. En simplifiant le déploiement et la gestion, Latenode améliore ce que propose déjà Headless Chrome, rendant l'automatisation plus accessible.
Headless Chrome rend l'automatisation Web plus rapide et plus efficace en éliminant le besoin d'une interface de navigateur complète. Il réduit la consommation de ressources et accélère les processus, ce qui le rend idéal pour des tâches telles que le scraping Web, les tests, l'analyse SEO et le suivi des performances. Des plateformes comme Latenode facilitent le déploiement de Headless Chrome avec des outils visuels et des fonctionnalités automatisées, nécessitant moins de connaissances techniques.
Suivez ces étapes pour commencer à utiliser Headless Chrome :
| Paramètres | Objectif | Bénéfice |
|---|---|---|
| Désactiver les images | Économisez de la bande passante | Chargement plus rapide des pages |
| Fenêtre d'affichage personnalisée | Assurer un rendu cohérent | Meilleure détection des éléments |
| Blocage des ressources | Évitez les téléchargements inutiles | Exécution plus rapide |
waitForSelector pour gérer le contenu dynamique et configurer la gestion des erreurs pour des opérations plus fluides. Pour la mise à l'échelle, Latenode propose des plans flexibles, commençant par un niveau gratuit (300 crédits) et allant jusqu'aux solutions d'entreprise qui prennent en charge jusqu'à 1.5 million d'exécutions par mois.
