.png)
.svg){kind=icon}
23 mars 2025
•
9
min lire
Analyse et traitement des réponses du réseau dans Puppeteer : surveillance et modification
Georges Miloradovitch
Chercheur, rédacteur et intervieweur de cas d'utilisation
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 :
Commencez avec Puppeteer pour améliorer vos flux de travail d’automatisation et rationaliser les processus de test.
Voici comment configurer Puppeteer pour surveiller les réponses du réseau étape par étape.
Commencez par ces étapes :
npm init pour initialiser le projet.npm install puppeteer
Ensuite, créez un fichier de script principal et ajoutez le code de configuration de base :
const puppeteer = require('puppeteer');
async function startMonitoring() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Continue configuration here
}
Pour surveiller et modifier les réponses du réseau, vous devez activer l’interception des demandes et configurer des écouteurs d’événements.
// Enable request interception
await page.setRequestInterception(true);
// Set up request listener
page.on('request', request => {
// Always call continue() to prevent requests from stalling
request.continue();
});
// Set up response listener
page.on('response', async response => {
const url = response.url();
if (response.headers()['content-type'].includes('application/json')) {
const responseData = await response.json();
console.log(`Response from ${url}:`, responseData);
}
});
Comme indiqué dans la documentation officielle du marionnettiste :
« Une fois l’interception des demandes activée, chaque demande sera bloquée à moins qu’elle ne soit poursuivie, répondue ou abandonnée ».
Un exemple de AgenceLa documentation 2024 de montre comment intercepter et analyser efficacement les réponses des API de commerce électronique. Leur méthode comprend :
await page.setRequestInterception(true);
page.on("request", (req) => {
if (req.url().includes('/api/prices')) {
const modifiedData = {
// Modified request data
zipCode: '10001'
};
req.continue({ postData: JSON.stringify(modifiedData) });
} else {
req.continue();
}
});
Cette configuration vous permet de :
Conseil: 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.
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.
Vous pouvez configurer des écouteurs d’événements pour suivre les réponses API et XHR comme suit :
// Wait for a specific XHR response
const response = await page.waitForResponse(
response => response.url().includes('/api/data') &&
response.request().method() !== 'OPTIONS'
);
// Monitor all responses
page.on('response', async response => {
const url = response.url();
const method = response.request().method();
const status = response.status();
console.log(`${method} ${url}: ${status}`);
});
Une fois que vous avez suivi les réponses, vous pouvez organiser et traiter les données pour une utilisation ultérieure.
Triez et gérez les réponses en fonction de leur type de contenu en utilisant cette approche :
page.on('response', async response => {
const contentType = response.headers()['content-type'];
try {
if (contentType.includes('application/json')) {
const jsonData = await response.json();
// Process JSON data
} else if (contentType.includes('text/html')) {
const htmlContent = await response.text();
// Process HTML content
}
} catch (error) {
console.error('Error processing response:', error);
}
});
Utilisez les méthodes suivantes pour extraire les données des réponses :
const searchResponse = await page.waitForResponse(
response => response.url().includes('sample-search.php')
);
const data = await searchResponse.json();
const results = data.results;
| 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 :
try-catch blocs pour l'analyseL’étude d’Agenty démontre comment une surveillance minutieuse des réponses peut améliorer considérablement les flux de travail d’automatisation.
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.
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 :
await page.setRequestInterception(true);
page.on('request', (request) => {
const headers = request.headers();
headers['Authorization'] = 'Bearer YOUR_TOKEN';
headers['Accept-Language'] = 'en-US';
request.continue({ headers });
});
Pour plusieurs en-têtes, vous pouvez utiliser setExtraHTTPHeaders pour une approche plus propre :
await page.setExtraHTTPHeaders({
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36',
'accept': 'text/html,application/xhtml+xml,application/xml',
'accept-language': 'en-US,en;q=0.9'
});
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.
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 :
await page.emulateNetworkConditions({
download: 768000,
upload: 256000,
latency: 100
});
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.
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 :
await page.route('https://api.example.com/data', route => {
route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
success: true,
data: {
id: 123,
status: 'completed'
}
})
});
});
Pour plus de fiabilité, enveloppez votre logique d'interception dans un bloc try/catch :
try {
page.on('request', async request => {
if (request.url().includes('/api/')) {
const mockResponse = {
status: 200,
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ test: true })
};
await request.respond(mockResponse);
} else {
await request.continue();
}
});
} catch (error) {
console.error('Interception error:', 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.
Puppeteer propose une gamme d'outils pour une inspection détaillée du trafic et l'amélioration des performances.
Le protocole Chrome DevTools (CDP) permet une surveillance et un débogage avancés. Voici un exemple d'utilisation :
const client = await page.target().createCDPSession();
await client.send('Network.enable');
// Set up network interception
await client.send('Network.setRequestInterception', {
patterns: [{ urlPattern: '*' }]
});
client.on('Network.requestIntercepted', async ({ interceptionId, request }) => {
const response = await client.send('Network.getResponseBodyForInterception', {
interceptionId
});
console.log(`Response size: ${response.body.length} bytes`);
await client.send('Network.continueInterceptedRequest', {
interceptionId
});
});
Vous pouvez également collecter des mesures de performance à l’aide de CDP :
// Get runtime metrics
const metrics = await page.metrics();
console.log('JavaScript memory:', metrics.JSHeapUsedSize);
// Start performance tracing
await page.tracing.start();
await page.goto('https://example.com');
await page.tracing.stop();
Ces outils vous aident à surveiller l’activité du réseau et à analyser efficacement les goulots d’étranglement des performances.
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 :
const har = {
log: {
version: '1.2',
entries: []
}
};
page.on('response', async response => {
const entry = {
startedDateTime: new Date().toISOString(),
request: {
method: response.request().method(),
url: response.url(),
headers: response.request().headers()
},
response: {
status: response.status(),
headers: response.headers()
}
};
har.log.entries.push(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.
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 :
const monitor = async (page) => {
await page.setViewport({ width: 1920, height: 1080 });
// Enable real-time status monitoring
const status = await page.evaluate(() => {
return document.querySelector('.status-indicator').textContent;
});
if (status !== 'All checks passing') {
await page.screenshot({
path: `error-${Date.now()}.png`,
fullPage: true
});
}
};
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.
Avec Latenode, vous pouvez :
Ces fonctionnalités rationalisent la surveillance et garantissent que les problèmes sont résolus rapidement.
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 :
await page.setRequestInterception(true);
page.on('request', request => {
request.continue();
});
page.on('response', async response => {
console.log(`Response received: ${response.url()}`);
});
Autre conseil : désactivez la mise en cache pour garantir que toutes les réponses sont capturées :
await page.setCacheEnabled(false);
await page.setDefaultNavigationTimeout(30000);
Ces étapes contribuent à garantir une surveillance plus fluide du réseau et vous préparent aux conseils de performances à venir.
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 actifs |
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 :
const blockedResources = ['image', 'stylesheet', 'font'];
await page.setRequestInterception(true);
page.on('request', request => {
if (blockedResources.includes(request.resourceType())) {
request.abort();
} else {
request.continue();
}
});
Ces ajustements peuvent rendre Puppeteer à la fois plus rapide et plus efficace.
Les améliorations techniques sont importantes, mais respecter les limites légales et éthiques l'est tout autant. Voici quelques pratiques clés à suivre :
Voici un exemple de limitation de débit responsable :
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
async function responsibleMonitoring(page, url) {
await delay(2000);
await page.goto(url, { waitUntil: 'networkidle0' });
}
Pour une conformité au niveau de l’entreprise, tenez compte des mesures suivantes :
L’équilibre entre les optimisations des performances et la conformité légale garantit que vos efforts d’automatisation sont à la fois efficaces et responsables.
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.
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 plus intuitive.
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.
Voici comment vous pouvez implémenter l'analyse de la réponse du réseau avec Latenode :
Le générateur de workflows visuels et la génération de code assistée par IA de Latenode, combinés aux outils réseau de Puppeteer, créent un système de surveillance performant. Cette intégration offre des informations en temps réel sur les applications web, améliorant ainsi vos workflows d'automatisation.
