.png)
.svg){kind=icon}
23. März 2025
•
9
min lesen
Netzwerkantwortanalyse und -verarbeitung in Puppeteer: Überwachung und Modifikation
Georgi Miloradowitsch
Forscher, Texter und Usecase-Interviewer
Willst du meistern Puppenspieler zur Netzwerküberwachung und Antwortmanipulation? Dieser Leitfaden behandelt alles, was Sie wissen müssen – vom Abfangen von Anfragen über das Ändern von API-Antworten bis hin zum Testen unter verschiedenen Netzwerkbedingungen. Hier ist ein kurzer Überblick über das, was Sie lernen werden:
Beginnen Sie mit Puppeteer, um Ihre Automatisierungs-Workflows zu verbessern und Testprozesse zu optimieren.
So richten Sie Puppeteer Schritt für Schritt zur Überwachung von Netzwerkantworten ein.
Beginnen Sie mit diesen Schritten:
npm init um das Projekt zu initialisieren.npm install puppeteer
Erstellen Sie als Nächstes eine Hauptskriptdatei und fügen Sie den grundlegenden Setup-Code hinzu:
const puppeteer = require('puppeteer');
async function startMonitoring() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Continue configuration here
}
Um Netzwerkantworten zu überwachen und zu ändern, müssen Sie die Anforderungsabfangfunktion aktivieren und Ereignislistener einrichten.
// 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);
}
});
Wie in der offiziellen Puppeteer-Dokumentation vermerkt:
„Sobald die Anforderungsabfangfunktion aktiviert ist, wird jede Anforderung unterbrochen, sofern sie nicht fortgesetzt, beantwortet oder abgebrochen wird.“
Ein Beispiel aus AgenturDie Dokumentation von 2024 zeigt, wie man E-Commerce-API-Antworten effektiv abfängt und analysiert. Die Methode umfasst:
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();
}
});
Mit diesem Setup können Sie:
TIPP: Schließen Sie immer eine Fehlerbehandlung ein, wie z. B. das Umschließen der Antwortanalyse in try-catch Blöcke, insbesondere beim Arbeiten mit JSON-Daten oder beim Zugriff auf Antworteigenschaften.
Diese Konfiguration bereitet den Boden für fortgeschrittenere Netzwerküberwachungstechniken in den folgenden Abschnitten.
Puppeteer ermöglicht die Überwachung von Serverantworten mithilfe von Ereignislistenern zur Verfolgung von API- und XHR-Aktivitäten. Dieser Abschnitt erläutert, wie Sie Antworten effektiv überwachen und so detaillierte Analysen und weitere Anpassungen ermöglichen.
Sie können Ereignis-Listener zum Verfolgen von API- und XHR-Antworten wie folgt einrichten:
// 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}`);
});
Nachdem Sie die Antworten verfolgt haben, können Sie die Daten für die weitere Verwendung organisieren und verarbeiten.
Sortieren und verarbeiten Sie Antworten basierend auf ihrem Inhaltstyp mit diesem Ansatz:
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);
}
});
Verwenden Sie die folgenden Methoden, um Daten aus Antworten zu extrahieren:
const searchResponse = await page.waitForResponse(
response => response.url().includes('sample-search.php')
);
const data = await searchResponse.json();
const results = data.results;
| Antworttyp | Extraktionsmethode | Bester Anwendungsfall |
|---|---|---|
| JSON | response.json() | API-Antworten, strukturierte Daten |
| Text | Antwort.Text() | HTML-Inhalt, einfacher Text |
| Binär | Antwort.Puffer() | Dateien, Bilder, Downloads |
So gewährleisten Sie eine reibungslose Leistung:
try-catch Blöcke zum ParsenDie Studie von Agenty zeigt, wie eine sorgfältige Reaktionsüberwachung Automatisierungsabläufe erheblich verbessern kann.
Die Überwachung von Reaktionen ist nur ein Teil der Gleichung. Ihre Anpassung ist unerlässlich, um Grenzfälle zu testen und sicherzustellen, dass Ihre Anwendung unter verschiedenen Bedingungen einwandfrei funktioniert. Puppeteer erleichtert die Optimierung von Netzwerkreaktionen und unterstützt Sie beim Simulieren und Testen spezifischer Szenarien.
Durch Anpassen von HTTP-Headern können Sie Authentifizierungsmechanismen und Serververhalten testen. So ändern Sie Header mit 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 });
});
Für mehrere Header können Sie setExtraHTTPHeaders für einen saubereren Ansatz:
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'
});
Mit diesen Optimierungen können Sie verschiedene Anforderungsszenarien simulieren, z. B. das Testen lokalisierter Inhalte oder die Überprüfung der tokenbasierten Authentifizierung.
Es ist wichtig, das Verhalten Ihrer Anwendung unter verschiedenen Netzwerkbedingungen zu testen. Mit Puppeteer können Sie verschiedene Verbindungsszenarien emulieren, z. B. 3G oder langsame Verbindungen:
| Netzwerkzustand | Download-Geschwindigkeit | Upload-Geschwindigkeit | Latency |
|---|---|---|---|
| 3G | 750 KB / s | 250 KB / s | 100ms |
| 4G | 4 MB / s | 3 MB / s | 20ms |
| Langsame Verbindung | 100 KB / s | 50 KB / s | 500ms |
Hier ist ein Beispiel für die Simulation eines 3G-Netzwerks:
await page.emulateNetworkConditions({
download: 768000,
upload: 256000,
latency: 100
});
Mit dieser Methode können Sie Leistungsengpässe erkennen und sicherstellen, dass Ihre App in zahlreichen Netzwerkumgebungen verwendet werden kann.
Sie können auch API-Anfragen abfangen und simulierte Antworten zurückgeben. Dies ist besonders nützlich, um bestimmte Szenarien zu testen, ohne auf Live-Server angewiesen zu sein:
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'
}
})
});
});
Um die Zuverlässigkeit zu erhöhen, packen Sie Ihre Abfanglogik in einen Try/Catch-Block:
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);
}
Dieser Ansatz stellt sicher, dass Ihre Tests reibungslos ablaufen, auch wenn beim Abfangen der Anforderung unerwartete Fehler auftreten.
Puppeteer bietet eine Reihe von Tools zur detaillierten Verkehrsprüfung und Leistungsverbesserung.
Das Chrome DevTools Protocol (CDP) ermöglicht erweitertes Monitoring und Debugging. Hier ist ein Anwendungsbeispiel:
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
});
});
Sie können mit CDP auch Leistungsmetriken erfassen:
// 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();
Diese Tools helfen Ihnen, die Netzwerkaktivität zu überwachen und Leistungsengpässe effektiv zu analysieren.
HAR-Dateien (HTTP-Archive) bieten eine vollständige Aufzeichnung der Netzwerkaktivität und eignen sich daher hervorragend für die Leistungsanalyse. Hier ist ein praktisches Beispiel für die Erstellung einer HAR-Datei:
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);
});
Behalten Sie beim Analysieren von HAR-Dateien diese Kennzahlen im Auge:
| Metrisch | Beschreibung | Typischer Bereich |
|---|---|---|
| Zeit zum ersten Byte | Zeit für die erste Antwort | 100-500ms |
| Download-Zeit | Zeit für die Übertragung von Ressourcen | 200 ms - 2 s |
| DNS-Suche | Zeit für die Domänenauflösung | 0-100ms |
| SSL-Aushandlung | Zeit für den Sicherheits-Handshake | 50-150ms |
Diese Metriken helfen dabei, Leistungsprobleme zu identifizieren und die Reaktionsfähigkeit Ihrer Anwendung zu verbessern.
Latenode erweitert die Überwachungsfunktionen von Puppeteer durch automatisierte Integritätsprüfungen und visuelle Diagnose. Beispielsweise: ZeitEinfügen verwendet einen benutzerdefinierten Knoten zur Überwachung von Webanwendungen:
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
});
}
};
Automatisieren Sie die Website- und API-Überwachung mit dem benutzerdefinierten Knoten von TimePaste. Sparen Sie Zeit und verbessern Sie die Zuverlässigkeit, indem Sie Echtzeit-Updates und Screenshots von Problemen erhalten. Benutzerdefinierte Knoten bieten erweiterte Automatisierung ohne umfangreiches technisches Fachwissen und ermöglichen Ihnen die effiziente Replikation von SaaS-Funktionen.
Mit Latenode können Sie:
Diese Funktionen optimieren die Überwachung und stellen sicher, dass Probleme umgehend behoben werden.
Bei der Netzwerküberwachung in Puppeteer können häufige Probleme auftreten, beispielsweise fehlende Netzwerkantworten. Dies geschieht häufig, wenn das Abfangen von Anfragen nicht korrekt gehandhabt wird.
Um dies zu vermeiden, rufen Sie immer request.continue() während der Anforderungsabfangung – auch wenn Sie nur Antworten überwachen:
await page.setRequestInterception(true);
page.on('request', request => {
request.continue();
});
page.on('response', async response => {
console.log(`Response received: ${response.url()}`);
});
Noch ein Tipp: Deaktivieren Sie das Caching, um sicherzustellen, dass alle Antworten erfasst werden:
await page.setCacheEnabled(false);
await page.setDefaultNavigationTimeout(30000);
Diese Schritte tragen zu einer reibungsloseren Netzwerküberwachung bei und bereiten Sie auf die nächsten Leistungstipps vor.
Steigern Sie die Leistung von Puppeteer mit diesen Optimierungstechniken:
| Technik | Wie umsetzen? | Auswirkungen auf die Leistung |
|---|---|---|
| Minimale Chrome-Einstellungen | Verwenden Sie Chrome-Schalter, um nicht benötigte Funktionen zu deaktivieren | Reduziert die Startzeit um 20–30 % |
| Ressourcen-Caching | Wasser userDataDir zur Wiederverwendung von Assets |
Beschleunigt das Laden von Seiten um 40 % |
| Anfragefilterung | Blockieren Sie Anzeigen, Tracker und andere unnötige Ressourcen | Reduziert die Netzwerklast um 25–35 % |
| Screenshot-Optimierung | Screenshots im JPG-Format mit Pufferspeicher speichern | Reduziert die Dateigröße um 50–60 % |
Sie können beispielsweise nicht unbedingt erforderliche Ressourcen wie Bilder und Schriftarten herausfiltern, um die Netzwerklast zu reduzieren:
const blockedResources = ['image', 'stylesheet', 'font'];
await page.setRequestInterception(true);
page.on('request', request => {
if (blockedResources.includes(request.resourceType())) {
request.abort();
} else {
request.continue();
}
});
Diese Optimierungen können Puppeteer schneller und effizienter machen.
Technische Verbesserungen sind wichtig, aber die Einhaltung rechtlicher und ethischer Grenzen ist ebenso wichtig. Hier sind einige wichtige Praktiken:
Hier ist ein Beispiel für eine verantwortungsvolle Ratenbegrenzung:
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
async function responsibleMonitoring(page, url) {
await delay(2000);
await page.goto(url, { waitUntil: 'networkidle0' });
}
Um die Compliance auf Unternehmensebene zu gewährleisten, sollten Sie die folgenden Maßnahmen in Betracht ziehen:
Durch die Abstimmung von Leistungsoptimierungen mit der Einhaltung gesetzlicher Vorschriften wird sichergestellt, dass Ihre Automatisierungsbemühungen sowohl effektiv als auch verantwortungsvoll sind.
Puppeteer bietet Entwicklern Tools zur effektiven Überwachung und Steuerung des Webverkehrs. Durch das Abfangen von Anfragen und die Analyse von Antworten können Entwickler das Laden von Seiten optimieren, verschiedene Netzwerkbedingungen simulieren und dynamische Inhalte verwalten. Diese umfassende Kontrolle über HTTP-Anfragen ermöglicht präzise Automatisierungs-Workflows.
Sehen wir uns nun an, wie Sie mit Latenode die Netzwerküberwachung vereinfachen können.
Latenode nutzt die Fähigkeiten von Puppeteer zur Automatisierung der Netzwerkanalyse. Die benutzerdefinierten Knotenfunktionen machen die Überwachung effizienter und benutzerfreundlicher.
Automatisieren Sie die Website- und API-Überwachung mit dem benutzerdefinierten Knoten von TimePaste. Sparen Sie Zeit und verbessern Sie die Zuverlässigkeit, indem Sie Echtzeit-Updates und Screenshots von Problemen erhalten. Benutzerdefinierte Knoten bieten erweiterte Automatisierung ohne umfangreiches technisches Fachwissen und ermöglichen Ihnen die effiziente Replikation von SaaS-Funktionen.
So können Sie die Netzwerkantwortanalyse mit Latenode implementieren:
Der visuelle Workflow-Builder und die KI-gestützte Codegenerierung von Latenode bilden zusammen mit den Netzwerktools von Puppeteer ein leistungsstarkes Überwachungssystem. Diese Integration bietet Echtzeit-Einblicke in Webanwendungen und verbessert Ihre Automatisierungs-Workflows.
