Analyse et traitement des réponses réseau dans Puppeteer : surveillance et modification

Voulez-vous maîtriser Marionnettiste pour la surveillance du réseau et la manipulation des réponses ? Ce guide couvre tout ce que vous devez savoir : de l'interception des requêtes à la modification des réponses d'API, en passant par les tests dans différentes conditions réseau. Voici un aperçu de ce que vous apprendrez :

Surveiller et modifier les requêtes réseau: Ajustez les en-têtes, les charges utiles et les réponses fictives pour les tests.
Analyser les réponses du serveur: Extrayez des données JSON, HTML ou binaires pour les tests d'API et les informations sur les performances.
Simuler les conditions du réseau:Testez sous 3G, 4G ou connexions lentes pour optimiser les performances.
Exemples de codes pratiques:Configuration et utilisation étape par étape pour des scénarios réels.
Conseils juridiques et d'efficacité:Restez conforme et améliorez les performances de Puppeteer avec la mise en cache, le filtrage des requêtes et la limitation du débit.

Commencez avec Puppeteer pour améliorer vos flux de travail d’automatisation et rationaliser les processus de test.

Comment capturer les réponses/requêtes HTTP à l'aide de Marionnettiste ...

Configuration et configuration

Voici comment configurer Puppeteer pour surveiller les réponses du réseau étape par étape.

La configuration initiale

Commencez par ces étapes :

Créez un nouveau répertoire pour votre Node.js .
Courir npm init pour initialiser le projet.
Installez Puppeteer en utilisant la commande :

npm install puppeteer

Ensuite, créez un fichier de script principal et ajoutez le code de configuration de base :

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);

<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">startMonitoring</span>(<span class="hljs-params"></span>) {
    <span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
    <span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
    <span class="hljs-comment">// Continue configuration here</span>
}

Configuration de l'interception du réseau

Pour surveiller et modifier les réponses du réseau, vous devez activer l’interception des demandes et configurer des écouteurs d’événements.

<span class="hljs-comment">// Enable request interception</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);

<span class="hljs-comment">// Set up request listener</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function"><span class="hljs-params">request</span> =></span> {
    <span class="hljs-comment">// Always call continue() to prevent requests from stalling</span>
    request.<span class="hljs-title function_">continue</span>();
});

<span class="hljs-comment">// Set up response listener</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'response'</span>, <span class="hljs-keyword">async</span> response => {
    <span class="hljs-keyword">const</span> url = response.<span class="hljs-title function_">url</span>();
    <span class="hljs-keyword">if</span> (response.<span class="hljs-title function_">headers</span>()[<span class="hljs-string">'content-type'</span>].<span class="hljs-title function_">includes</span>(<span class="hljs-string">'application/json'</span>)) {
        <span class="hljs-keyword">const</span> responseData = <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">json</span>();
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`Response from <span class="hljs-subst">${url}</span>:`</span>, responseData);
    }
});

Comme indiqué dans la documentation officielle du marionnettiste :

« Une fois l'interception des requêtes activée, chaque requête sera bloquée à moins qu'elle ne soit poursuivie, traitée ou abandonnée. » [2].

Un exemple de AgenceLa documentation 2024 montre comment intercepter et analyser efficacement les réponses des API de commerce électronique [1]Leur méthode comprend :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">"request"</span>, <span class="hljs-function">(<span class="hljs-params">req</span>) =></span> {
    <span class="hljs-keyword">if</span> (req.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/prices'</span>)) {
        <span class="hljs-keyword">const</span> modifiedData = {
            <span class="hljs-comment">// Modified request data</span>
            <span class="hljs-attr">zipCode</span>: <span class="hljs-string">'10001'</span>
        };
        req.<span class="hljs-title function_">continue</span>({ <span class="hljs-attr">postData</span>: <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>(modifiedData) });
    } <span class="hljs-keyword">else</span> {
        req.<span class="hljs-title function_">continue</span>();
    }
});

Cette configuration vous permet de :

Surveillez toutes les demandes et réponses du réseau.
Modifier les en-têtes de requête et les charges utiles.
Analysez les réponses JSON des API.
Filtrez et suivez des modèles d’URL spécifiques.
Gérer différents types de réponses.

Astuce: Incluez toujours la gestion des erreurs, comme l'encapsulation de l'analyse des réponses try-catch blocs, en particulier lorsque vous travaillez avec des données JSON ou que vous accédez aux propriétés de réponse.

Cette configuration ouvre la voie à des techniques de surveillance réseau plus avancées dans les sections suivantes.

Surveillance de la réponse du réseau

Puppeteer vous permet de surveiller les réponses du serveur en utilisant des écouteurs d'événements pour suivre l'activité API et XHR. Cette section explique comment surveiller efficacement les réponses, permettant ainsi une analyse détaillée et des ajustements supplémentaires.

Suivi des requêtes API et XHR

Vous pouvez configurer des écouteurs d’événements pour suivre les réponses API et XHR comme suit :

<span class="hljs-comment">// Wait for a specific XHR response</span>
<span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForResponse</span>(
    <span class="hljs-function"><span class="hljs-params">response</span> =></span> response.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/data'</span>) && 
                response.<span class="hljs-title function_">request</span>().<span class="hljs-title function_">method</span>() !== <span class="hljs-string">'OPTIONS'</span>
);

<span class="hljs-comment">// Monitor all responses</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'response'</span>, <span class="hljs-keyword">async</span> response => {
    <span class="hljs-keyword">const</span> url = response.<span class="hljs-title function_">url</span>();
    <span class="hljs-keyword">const</span> method = response.<span class="hljs-title function_">request</span>().<span class="hljs-title function_">method</span>();
    <span class="hljs-keyword">const</span> status = response.<span class="hljs-title function_">status</span>();

    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`<span class="hljs-subst">${method}</span> <span class="hljs-subst">${url}</span>: <span class="hljs-subst">${status}</span>`</span>);
});

Une fois que vous avez suivi les réponses, vous pouvez organiser et traiter les données pour une utilisation ultérieure.

Gestion des données de réponse

Triez et gérez les réponses en fonction de leur type de contenu en utilisant cette approche :

page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'response'</span>, <span class="hljs-keyword">async</span> response => {
    <span class="hljs-keyword">const</span> contentType = response.<span class="hljs-title function_">headers</span>()[<span class="hljs-string">'content-type'</span>];

    <span class="hljs-keyword">try</span> {
        <span class="hljs-keyword">if</span> (contentType.<span class="hljs-title function_">includes</span>(<span class="hljs-string">'application/json'</span>)) {
            <span class="hljs-keyword">const</span> jsonData = <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">json</span>();
            <span class="hljs-comment">// Process JSON data</span>
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (contentType.<span class="hljs-title function_">includes</span>(<span class="hljs-string">'text/html'</span>)) {
            <span class="hljs-keyword">const</span> htmlContent = <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">text</span>();
            <span class="hljs-comment">// Process HTML content</span>
        }
    } <span class="hljs-keyword">catch</span> (error) {
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Error processing response:'</span>, error);
    }
});

Méthodes d'extraction de données

Utilisez les méthodes suivantes pour extraire les données des réponses :

<span class="hljs-keyword">const</span> searchResponse = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForResponse</span>(
    <span class="hljs-function"><span class="hljs-params">response</span> =></span> response.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'sample-search.php'</span>)
);

<span class="hljs-keyword">const</span> data = <span class="hljs-keyword">await</span> searchResponse.<span class="hljs-title function_">json</span>();
<span class="hljs-keyword">const</span> results = data.<span class="hljs-property">results</span>;

Type de réponse	Méthode d'extraction	Meilleur cas d'utilisation
JSON	réponse.json()	Réponses API, données structurées
Texte	réponse.texte()	Contenu HTML, texte brut
binaire	réponse.buffer()	Fichiers, images, téléchargements

Pour garantir un fonctionnement fluide :

Concentrez-vous sur des modèles d'URL et des méthodes de requête spécifiques
Gérer les erreurs avec élégance
Utilisez le try-catch blocs pour l'analyse
Mettre en cache les données de réponse, le cas échéant

Étude d'Agenty [1] démontre comment une surveillance minutieuse des réponses peut améliorer considérablement les flux de travail d'automatisation.

sbb-itb-23997f1

Méthodes de modification de la réponse

La surveillance des réponses n'est qu'une partie de l'équation ; leur modification est essentielle pour tester les cas limites et garantir le bon fonctionnement de votre application dans diverses conditions. Puppeteer facilite l'ajustement des réponses réseau, vous aidant ainsi à simuler et tester des scénarios spécifiques.

Modification de l'en-tête

Ajuster les en-têtes HTTP vous permet de tester les mécanismes d'authentification et le comportement du serveur. Voici comment modifier les en-têtes avec Puppeteer :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function">(<span class="hljs-params">request</span>) =></span> {
    <span class="hljs-keyword">const</span> headers = request.<span class="hljs-title function_">headers</span>();
    headers[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Bearer YOUR_TOKEN'</span>;
    headers[<span class="hljs-string">'Accept-Language'</span>] = <span class="hljs-string">'en-US'</span>;
    request.<span class="hljs-title function_">continue</span>({ headers });
});

Pour plusieurs en-têtes, vous pouvez utiliser setExtraHTTPHeaders pour une approche plus propre :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setExtraHTTPHeaders</span>({
    <span class="hljs-string">'user-agent'</span>: <span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36'</span>,
    <span class="hljs-string">'accept'</span>: <span class="hljs-string">'text/html,application/xhtml+xml,application/xml'</span>,
    <span class="hljs-string">'accept-language'</span>: <span class="hljs-string">'en-US,en;q=0.9'</span>
});

Ces ajustements vous permettent de simuler différents scénarios de demande, tels que le test de contenu localisé ou la vérification de l'authentification basée sur des jetons.

Tests de l'état du réseau

Il est essentiel de tester le comportement de votre application dans différentes conditions réseau. Puppeteer vous permet d'émuler différents scénarios de connectivité, comme la 3G ou des connexions lentes :

État du réseau	Vitesse de téléchargement	Vitesse de téléchargement	Latence
3G	750 Ko / s	250 Ko / s	100ms
4G	4 Mo / s	3 Mo / s	20ms
Connection lente	100 Ko / s	50 Ko / s	500ms

Voici un exemple de simulation d’un réseau 3G :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">emulateNetworkConditions</span>({
    <span class="hljs-attr">download</span>: <span class="hljs-number">768000</span>,
    <span class="hljs-attr">upload</span>: <span class="hljs-number">256000</span>,
    <span class="hljs-attr">latency</span>: <span class="hljs-number">100</span>
});

Cette méthode vous aide à identifier les goulots d’étranglement des performances et garantit que votre application est utilisable dans une gamme d’environnements réseau.

Test de réponse API

Vous pouvez également intercepter les requêtes API et renvoyer des réponses fictives. Ceci est particulièrement utile pour tester des scénarios spécifiques sans dépendre de serveurs en ligne :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">route</span>(<span class="hljs-string">'https://api.example.com/data'</span>, <span class="hljs-function"><span class="hljs-params">route</span> =></span> {
    route.<span class="hljs-title function_">fulfill</span>({
        <span class="hljs-attr">status</span>: <span class="hljs-number">200</span>,
        <span class="hljs-attr">contentType</span>: <span class="hljs-string">'application/json'</span>,
        <span class="hljs-attr">body</span>: <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>({
            <span class="hljs-attr">success</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">data</span>: {
                <span class="hljs-attr">id</span>: <span class="hljs-number">123</span>,
                <span class="hljs-attr">status</span>: <span class="hljs-string">'completed'</span>
            }
        })
    });
});

Pour plus de fiabilité, enveloppez votre logique d'interception dans un bloc try/catch :

<span class="hljs-keyword">try</span> {
    page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-keyword">async</span> request => {
        <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/'</span>)) {
            <span class="hljs-keyword">const</span> mockResponse = {
                <span class="hljs-attr">status</span>: <span class="hljs-number">200</span>,
                <span class="hljs-attr">headers</span>: { <span class="hljs-string">'Content-Type'</span>: <span class="hljs-string">'application/json'</span> },
                <span class="hljs-attr">body</span>: <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>({ <span class="hljs-attr">test</span>: <span class="hljs-literal">true</span> })
            };
            <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">respond</span>(mockResponse);
        } <span class="hljs-keyword">else</span> {
            <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
        }
    });
} <span class="hljs-keyword">catch</span> (error) {
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Interception error:'</span>, error);
}

Cette approche garantit que vos tests se déroulent sans problème, même si des erreurs inattendues se produisent lors de l’interception des requêtes.

Outils d'analyse avancés

Puppeteer propose une gamme d'outils pour une inspection détaillée du trafic et l'amélioration des performances.

Protocole Chrome DevTools Guide

Le protocole Chrome DevTools (CDP) permet une surveillance et un débogage avancés. Voici un exemple d'utilisation :

<span class="hljs-keyword">const</span> client = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">target</span>().<span class="hljs-title function_">createCDPSession</span>();
<span class="hljs-keyword">await</span> client.<span class="hljs-title function_">send</span>(<span class="hljs-string">'Network.enable'</span>);

<span class="hljs-comment">// Set up network interception</span>
<span class="hljs-keyword">await</span> client.<span class="hljs-title function_">send</span>(<span class="hljs-string">'Network.setRequestInterception'</span>, {
    <span class="hljs-attr">patterns</span>: [{ <span class="hljs-attr">urlPattern</span>: <span class="hljs-string">'*'</span> }]
});

client.<span class="hljs-title function_">on</span>(<span class="hljs-string">'Network.requestIntercepted'</span>, <span class="hljs-title function_">async</span> ({ interceptionId, request }) => {
    <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> client.<span class="hljs-title function_">send</span>(<span class="hljs-string">'Network.getResponseBodyForInterception'</span>, {
        interceptionId
    });

    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`Response size: <span class="hljs-subst">${response.body.length}</span> bytes`</span>);
    <span class="hljs-keyword">await</span> client.<span class="hljs-title function_">send</span>(<span class="hljs-string">'Network.continueInterceptedRequest'</span>, {
        interceptionId
    });
});

Vous pouvez également collecter des mesures de performance à l’aide de CDP :

<span class="hljs-comment">// Get runtime metrics</span>
<span class="hljs-keyword">const</span> metrics = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">metrics</span>();
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'JavaScript memory:'</span>, metrics.<span class="hljs-property">JSHeapUsedSize</span>);

<span class="hljs-comment">// Start performance tracing</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-property">tracing</span>.<span class="hljs-title function_">start</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-property">tracing</span>.<span class="hljs-title function_">stop</span>();

Ces outils vous aident à surveiller l’activité du réseau et à analyser efficacement les goulots d’étranglement des performances.

Analyse du fichier HAR

Les fichiers HAR (archives HTTP) fournissent un enregistrement complet de l'activité réseau, ce qui les rend parfaits pour l'analyse des performances. Voici un exemple pratique de création d'un fichier HAR :

<span class="hljs-keyword">const</span> har = {
    <span class="hljs-attr">log</span>: {
        <span class="hljs-attr">version</span>: <span class="hljs-string">'1.2'</span>,
        <span class="hljs-attr">entries</span>: []
    }
};

page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'response'</span>, <span class="hljs-keyword">async</span> response => {
    <span class="hljs-keyword">const</span> entry = {
        <span class="hljs-attr">startedDateTime</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>().<span class="hljs-title function_">toISOString</span>(),
        <span class="hljs-attr">request</span>: {
            <span class="hljs-attr">method</span>: response.<span class="hljs-title function_">request</span>().<span class="hljs-title function_">method</span>(),
            <span class="hljs-attr">url</span>: response.<span class="hljs-title function_">url</span>(),
            <span class="hljs-attr">headers</span>: response.<span class="hljs-title function_">request</span>().<span class="hljs-title function_">headers</span>()
        },
        <span class="hljs-attr">response</span>: {
            <span class="hljs-attr">status</span>: response.<span class="hljs-title function_">status</span>(),
            <span class="hljs-attr">headers</span>: response.<span class="hljs-title function_">headers</span>()
        }
    };
    har.<span class="hljs-property">log</span>.<span class="hljs-property">entries</span>.<span class="hljs-title function_">push</span>(entry);
});

Lors de l’analyse des fichiers HAR, gardez un œil sur ces mesures :

Métrique	Description	Plage typique
Heure du premier octet	Il est temps de donner la première réponse	100-500ms
Temps de téléchargement	Il est temps de transférer les ressources	200 ms-2 s
Recherche DNS	Il est temps de résoudre le domaine	0-100ms
Négociation SSL	Il est temps de conclure une poignée de main de sécurité	50-150ms

Ces mesures aident à identifier les problèmes de performances et à améliorer la réactivité de votre application.

Laténode Intégration :

Latenode améliore les capacités de surveillance de Puppeteer en ajoutant des contrôles de santé automatisés et des diagnostics visuels. Par exemple : TimePaste utilise un nœud personnalisé pour surveiller les applications Web :

<span class="hljs-keyword">const</span> <span class="hljs-title function_">monitor</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">page</span>) => {
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({ <span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">1080</span> });

    <span class="hljs-comment">// Enable real-time status monitoring</span>
    <span class="hljs-keyword">const</span> status = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
        <span class="hljs-keyword">return</span> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.status-indicator'</span>).<span class="hljs-property">textContent</span>;
    });

    <span class="hljs-keyword">if</span> (status !== <span class="hljs-string">'All checks passing'</span>) {
        <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({ 
            <span class="hljs-attr">path</span>: <span class="hljs-string">`error-<span class="hljs-subst">${<span class="hljs-built_in">Date</span>.now()}</span>.png`</span>,
            <span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span> 
        });
    }
};

Automatisez la surveillance de votre site web et de vos API grâce au nœud personnalisé de TimePaste. Gagnez du temps et améliorez la fiabilité en recevant des mises à jour et des captures d'écran des problèmes en temps réel. Les nœuds personnalisés offrent une automatisation avancée sans expertise technique approfondie, vous permettant de répliquer efficacement les fonctionnalités SaaS. [3]

Avec Latenode, vous pouvez :

Mettre en place des contrôles de santé automatisés
Capturez des captures d'écran des problèmes pour obtenir des preuves visuelles
Activer les notifications en temps réel

Ces fonctionnalités rationalisent la surveillance et garantissent que les problèmes sont résolus rapidement.

Résolution de problèmes et lignes directrices

Résolution de problèmes

La surveillance réseau dans Puppeteer peut rencontrer des problèmes courants, comme l'absence de réponses réseau. Cela se produit souvent lorsque l'interception des requêtes n'est pas gérée correctement.

Pour éviter cela, appelez toujours request.continue() pendant l'interception des requêtes, même si vous surveillez simplement les réponses :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function"><span class="hljs-params">request</span> =></span> {
    request.<span class="hljs-title function_">continue</span>();
});

page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'response'</span>, <span class="hljs-keyword">async</span> response => {
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`Response received: <span class="hljs-subst">${response.url()}</span>`</span>);
});

Autre conseil : désactivez la mise en cache pour garantir que toutes les réponses sont capturées :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setCacheEnabled</span>(<span class="hljs-literal">false</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setDefaultNavigationTimeout</span>(<span class="hljs-number">30000</span>);

Ces étapes contribuent à garantir une surveillance plus fluide du réseau et vous préparent aux conseils de performances à venir.

Conseils pour gagner en rapidité et en efficacité

Améliorez les performances de Puppeteer avec ces techniques d'optimisation :

Technique	Comment implémenter	Impact sur les performances
Paramètres Chrome minimaux	Utilisez les commutateurs Chrome pour désactiver les fonctionnalités inutiles	Réduit le temps de démarrage de 20 à 30 %
Mise en cache des ressources	Utilisez userDataDir pour la réutilisation des ressources	Accélère le chargement des pages de 40 %
Demande de filtrage	Bloquer les publicités, les trackers et autres ressources inutiles	Réduit la charge du réseau de 25 à 35 %
Optimisation des captures d'écran	Enregistrez les captures d'écran au format JPG avec le stockage tampon	Réduit la taille des fichiers de 50 à 60 %

Par exemple, vous pouvez filtrer les ressources non essentielles comme les images et les polices pour réduire la charge du réseau :

<span class="hljs-keyword">const</span> blockedResources = [<span class="hljs-string">'image'</span>, <span class="hljs-string">'stylesheet'</span>, <span class="hljs-string">'font'</span>];
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function"><span class="hljs-params">request</span> =></span> {
    <span class="hljs-keyword">if</span> (blockedResources.<span class="hljs-title function_">includes</span>(request.<span class="hljs-title function_">resourceType</span>())) {
        request.<span class="hljs-title function_">abort</span>();
    } <span class="hljs-keyword">else</span> {
        request.<span class="hljs-title function_">continue</span>();
    }
});

Ces ajustements peuvent rendre Puppeteer à la fois plus rapide et plus efficace.

Directives légales

Les améliorations techniques sont importantes, mais respecter les limites légales et éthiques l'est tout autant. Voici quelques pratiques clés à suivre :

Obtenir un consentement explicite avant de collecter des données personnelles.
Vérifier les politiques d'automatisation pour les sites Web avec lesquels vous interagissez.
Utiliser la limitation de débit pour éviter de surcharger les serveurs.

Voici un exemple de limitation de débit responsable :

<span class="hljs-keyword">const</span> <span class="hljs-title function_">delay</span> = ms => <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function"><span class="hljs-params">resolve</span> =></span> <span class="hljs-built_in">setTimeout</span>(resolve, ms));

<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">responsibleMonitoring</span>(<span class="hljs-params">page, url</span>) {
    <span class="hljs-keyword">await</span> <span class="hljs-title function_">delay</span>(<span class="hljs-number">2000</span>);
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url, { <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span> });
}

Pour une conformité au niveau de l’entreprise, tenez compte des mesures suivantes :

Protocoles de traitement des données: Limitez la collecte de données, définissez des politiques de conservation et documentez les activités de traitement.
Contrôles d'accès:Utilisez l’authentification et l’autorisation pour protéger les données sensibles.
Des pistes de vérification:Conservez des journaux détaillés avec des horodatages et toutes les modifications apportées.

L’équilibre entre les optimisations des performances et la conformité légale garantit que vos efforts d’automatisation sont à la fois efficaces et responsables.

Conclusion

Résumé

Puppeteer offre aux développeurs des outils pour surveiller et modifier efficacement le trafic web. En interceptant les requêtes et en analysant les réponses, ils peuvent optimiser le chargement des pages, simuler différentes conditions réseau et gérer le contenu dynamique. Ce niveau de contrôle sur les requêtes HTTP permet des workflows d'automatisation précis.

Voyons maintenant comment vous pouvez utiliser Latenode pour simplifier la surveillance du réseau.

Démarrer avec Latenode

Latenode s'appuie sur les capacités de Puppeteer pour automatiser l'analyse réseau. Ses fonctionnalités de nœuds personnalisés rendent la surveillance plus efficace et intuitive. [3].