Chrome sans tête : comment l'utiliser et le configurer

Table des matières

Chrome sans tête : comment l'utiliser et le configurer

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.

Principaux avantages:

Raclage Web: Extraire des données de sites Web utilisant beaucoup de JavaScript.
Tests automatisés : Exécutez des tests plus rapides et économes en ressources pour les pipelines CI/CD.
Suivi de la performance: Simulez les interactions des utilisateurs pour déboguer les problèmes.
Analyse SEO : Collectez et analysez rapidement les données du site Web.

Installation rapide:

Installer Node.js et du Marionnettiste.
Configurez les paramètres de base tels que la taille de la fenêtre d'affichage et le blocage des ressources.
Utilisez des scripts pour automatiser des tâches, capturer des captures d'écran ou générer des PDF.

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.

Qu'est-ce qu'un navigateur headless ? Comment exécuter Headless Chrome?

Chrome

Guide d'installation

Assurez-vous que votre système répond aux spécifications requises et suivez les étapes d'installation pour votre plateforme.

Exigences techniques

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.

Procédure d'installation

Suivez ces étapes en fonction de votre plateforme :

Windows Téléchargez Chrome depuis son site officiel, installez Node.js, puis exécutez :
```
npm install puppeteer
```
macOS Utilisez Homebrew pour installer Chrome et Puppeteer :
```
brew install --cask google-chrome
npm install puppeteer
```

Linux Mettez à jour votre système et installez Chrome avec 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.

Tester votre installation

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.

Réglages de base

Paramètres de base

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.

Configuration spécifique à la tâche

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.

Paramètres de vitesse et de 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.

sbb-itb-23997f1

Opérations JavaScript

Headless Chrome peut exécuter JavaScript et gérer efficacement les interactions Web avec Puppeteer.

Exécution de scripts simples

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

Méthodes d'interaction des pages

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

Gestion des éléments dynamiques

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:

Utilisez des attentes explicites pour éviter les retards inutiles.
Implémenter la gestion des erreurs pour gérer les échecs de script.
Gardez un œil sur l’utilisation du processeur et de la mémoire pendant l’exécution.
Désactivez les ressources non essentielles telles que les images ou les publicités pour améliorer les performances.

Fonctionnalités avancées

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.

Création de capture d'écran

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

Création de PDF

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.

Outils de dépannage

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 des éléments dans les services IDP de Google. .

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

Utilisation de Chrome sans tête avec Laténode

Laténode

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.

À propos Laténode

Laténode

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

Étapes de configuration de Latenode

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.

Faits saillants de la plateforme

Latenode rationalise l'automatisation de Chrome Headless en s'attaquant aux problèmes courants liés au codage traditionnel. Les principales fonctionnalités incluent :

Gestion automatisée des erreurs et options de nouvelle tentative
Gestion des proxys intégrée
Outils de débogage visuel pour les flux de travail
Suivi de l'historique d'exécution jusqu'à 60 jours (disponible dans le forfait Prime)

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.

Conclusion

Résumé

Chrome sans tête 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 savoir-faire technique.

Pour commencer

Suivez ces étapes pour commencer à utiliser Headless Chrome :

Notions de base de la configuration :
Installez Node.js et Puppeteer. Ces outils fournissent des API qui simplifient les tâches d'automatisation.

Configurer les paramètres :
Commencez par parcourir les pages et prendre des captures d'écran. Ajustez les performances en modifiant ces paramètres :

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

Fonctionnalités avancées:
Utilisez 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.