.png)
.svg){kind=icon}
Marzo 23, 2025
•
9
min leer
Análisis y procesamiento de la respuesta de red en Puppeteer: Monitoreo y modificación
George Miloradovich
Investigador, redactor y entrevistador de casos prácticos
quiero dominar Titiritero ¿Para la monitorización de la red y la manipulación de la respuesta? Esta guía cubre todo lo que necesita saber, desde la interceptación de solicitudes hasta la modificación de las respuestas de la API y las pruebas en diferentes condiciones de red. A continuación, un breve resumen de lo que aprenderá:
Comience a utilizar Puppeteer para mejorar sus flujos de trabajo de automatización y optimizar los procesos de prueba.
A continuación se explica cómo configurar Puppeteer para monitorear las respuestas de la red paso a paso.
Comience con estos pasos:
npm init para inicializar el proyecto.npm install puppeteer
A continuación, cree un archivo de script principal y agregue el código de configuración básico:
const puppeteer = require('puppeteer');
async function startMonitoring() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Continue configuration here
}
Para monitorear y modificar las respuestas de la red, debe habilitar la intercepción de solicitudes y configurar detectores de eventos.
// 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);
}
});
Como se señala en la documentación oficial de Puppeteer:
"Once request interception is enabled, every request will stall unless it's continued, responded or aborted" [ 2 ].
Un ejemplo de agencia's 2024 documentation shows how to intercept and analyze e-commerce API responses effectively [ 1 ]. Their method includes:
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();
}
});
Esta configuración le permite:
Consejo: Incluya siempre el manejo de errores, como envolver el análisis de la respuesta en try-catch bloques, especialmente cuando se trabaja con datos JSON o se accede a propiedades de respuesta.
Esta configuración prepara el escenario para técnicas de monitoreo de red más avanzadas en las siguientes secciones.
Puppeteer permite monitorizar las respuestas del servidor mediante escuchas de eventos para rastrear la actividad de la API y XHR. Esta sección explica cómo monitorizar las respuestas eficazmente, lo que permite realizar análisis detallados y ajustes adicionales.
Puede configurar escuchas de eventos para rastrear las respuestas de API y XHR de la siguiente manera:
// 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}`);
});
Una vez que haya realizado el seguimiento de las respuestas, puede organizar y procesar los datos para su uso posterior.
Ordene y gestione las respuestas según su tipo de contenido utilizando este enfoque:
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);
}
});
Utilice los siguientes métodos para extraer datos de las respuestas:
const searchResponse = await page.waitForResponse(
response => response.url().includes('sample-search.php')
);
const data = await searchResponse.json();
const results = data.results;
| Tipo de respuesta | Método de extracción | Mejor caso de uso |
|---|---|---|
| JSON | respuesta.json() | Respuestas API, datos estructurados |
| Texto | respuesta.texto() | Contenido HTML, texto sin formato |
| Binario | respuesta.buffer() | Archivos, imágenes, descargas |
Para garantizar un rendimiento sin problemas:
try-catch bloques para analizarAgenty’s study [ 1 ] demonstrates how careful response monitoring can significantly improve automation workflows.
Monitorear las respuestas es solo una parte de la ecuación; modificarlas es esencial para probar casos extremos y garantizar el buen rendimiento de la aplicación en diversas condiciones. Puppeteer facilita la optimización de las respuestas de la red, ayudándole a simular y probar escenarios específicos.
Ajustar los encabezados HTTP permite probar los mecanismos de autenticación y el comportamiento del servidor. Así es como se pueden modificar los encabezados con 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 });
});
Para encabezados múltiples, puedes usar setExtraHTTPHeaders Para un enfoque más limpio:
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'
});
Estos ajustes le permiten simular diferentes escenarios de solicitud, como probar contenido localizado o verificar la autenticación basada en token.
Probar el comportamiento de su aplicación en diversas condiciones de red es crucial. Puppeteer le permite emular diferentes escenarios de conectividad, como 3G o conexiones lentas.
| Estado de la red | Velocidad de descarga | Velocidad de carga | Estado latente |
|---|---|---|---|
| 3G | 750 KB / s | 250 KB / s | 100ms |
| 4G | 4 MB / s | 3 MB / s | 20ms |
| Conexión lenta | 100 KB / s | 50 KB / s | 500ms |
A continuación se muestra un ejemplo de cómo simular una red 3G:
await page.emulateNetworkConditions({
download: 768000,
upload: 256000,
latency: 100
});
Este método le ayuda a identificar cuellos de botella en el rendimiento y garantiza que su aplicación pueda utilizarse en una variedad de entornos de red.
También puedes interceptar solicitudes de API y devolver respuestas simuladas. Esto es especialmente útil para probar escenarios específicos sin depender de servidores activos:
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'
}
})
});
});
Para mayor confiabilidad, envuelva su lógica de intercepción en un bloque 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);
}
Este enfoque garantiza que sus pruebas se ejecuten sin problemas, incluso si ocurren errores inesperados durante la interceptación de solicitudes.
Puppeteer ofrece una gama de herramientas para la inspección detallada del tráfico y la mejora del rendimiento.
El Protocolo de Herramientas de Desarrollo de Chrome (CDP) permite una monitorización y depuración avanzadas. A continuación, se muestra un ejemplo de su uso:
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
});
});
También puedes recopilar métricas de rendimiento utilizando 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();
Estas herramientas le ayudan a supervisar la actividad de la red y analizar los cuellos de botella en el rendimiento de manera eficaz.
Los archivos HAR (archivo HTTP) proporcionan un registro completo de la actividad de la red, lo que los hace ideales para el análisis de rendimiento. A continuación, se muestra un ejemplo práctico de creación de un archivo 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);
});
Al analizar archivos HAR, tenga en cuenta estas métricas:
| Métrico | Descripción | Rango típico |
|---|---|---|
| Tiempo hasta el primer byte | Es hora de la primera respuesta | 100-500ms |
| Tiempo de descarga | Es hora de transferir recursos | 200 ms-2 s |
| Búsqueda de DNS | Es hora de resolver el dominio | 0-100ms |
| Negociación SSL | Es hora del apretón de manos de seguridad | 50-150ms |
Estas métricas ayudan a identificar problemas de rendimiento y mejorar la capacidad de respuesta de su aplicación.
Latenode mejora las capacidades de monitoreo de Puppeteer al agregar comprobaciones de estado automatizadas y diagnósticos visuales. Por ejemplo, Pegar tiempo utiliza un nodo personalizado para monitorear aplicaciones 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
});
}
};
Automatice la monitorización de sitios web y API con el nodo personalizado de TimePaste. Ahorre tiempo y mejore la fiabilidad recibiendo actualizaciones en tiempo real y capturas de pantalla de los problemas. Los nodos personalizados ofrecen automatización avanzada sin necesidad de conocimientos técnicos extensos, lo que le permite replicar las funcionalidades SaaS de forma eficiente. [ 3 ]
Con Latenode, puedes:
Estas características agilizan la supervisión y garantizan que los problemas se solucionen rápidamente.
La monitorización de red en Puppeteer puede presentar problemas comunes, como la falta de respuestas de red. Esto suele ocurrir cuando la interceptación de solicitudes no se gestiona correctamente.
Para evitar esto, llame siempre request.continue() durante la interceptación de solicitudes, incluso si solo estás monitoreando las respuestas:
await page.setRequestInterception(true);
page.on('request', request => {
request.continue();
});
page.on('response', async response => {
console.log(`Response received: ${response.url()}`);
});
Otro consejo: desactive el almacenamiento en caché para garantizar que se capturen todas las respuestas:
await page.setCacheEnabled(false);
await page.setDefaultNavigationTimeout(30000);
Estos pasos ayudan a garantizar una supervisión más fluida de la red y lo preparan para los consejos de rendimiento que se presentarán a continuación.
Mejore el rendimiento de Puppeteer con estas técnicas de optimización:
| Tecnologia | Cómo implementar | Impacto en el rendimiento |
|---|---|---|
| Configuración mínima de Chrome | Utilice los interruptores de Chrome para deshabilitar funciones innecesarias | Reduce el tiempo de inicio entre un 20 y un 30 % |
| Almacenamiento en caché de recursos | Use userDataDir para la reutilización de activos |
Acelera la carga de páginas en un 40% |
| Solicitar filtrado | Bloquea anuncios, rastreadores y otros recursos innecesarios | Reduce la carga de la red entre un 25% y un 35% |
| Optimización de capturas de pantalla | Guarde capturas de pantalla en formato JPG con el almacenamiento Buffer | Reduce el tamaño de los archivos entre un 50 y un 60 % |
Por ejemplo, puede filtrar recursos no esenciales como imágenes y fuentes para reducir la carga de la red:
const blockedResources = ['image', 'stylesheet', 'font'];
await page.setRequestInterception(true);
page.on('request', request => {
if (blockedResources.includes(request.resourceType())) {
request.abort();
} else {
request.continue();
}
});
Estos ajustes pueden hacer que Puppeteer sea más rápido y más eficiente.
Las mejoras técnicas son importantes, pero mantenerse dentro de los límites legales y éticos es igualmente crucial. A continuación, se presentan algunas prácticas clave a seguir:
He aquí un ejemplo de limitación de velocidad responsable:
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
async function responsibleMonitoring(page, url) {
await delay(2000);
await page.goto(url, { waitUntil: 'networkidle0' });
}
Para el cumplimiento a nivel empresarial, considere estas medidas:
Equilibrar las optimizaciones del rendimiento con el cumplimiento legal garantiza que sus esfuerzos de automatización sean efectivos y responsables.
Puppeteer proporciona a los desarrolladores herramientas para supervisar y modificar el tráfico web eficazmente. Al interceptar solicitudes y analizar respuestas, los desarrolladores pueden optimizar la carga de páginas, simular diferentes condiciones de red y gestionar contenido dinámico. Este nivel de control sobre las solicitudes HTTP permite flujos de trabajo de automatización precisos.
Ahora, exploremos cómo puedes usar Latenode para simplificar la supervisión de la red.
Latenode builds on Puppeteer's capabilities to automate network analysis. Its custom node features make monitoring more efficient and user-friendly [ 3 ].
Automatice la monitorización de sitios web y API con el nodo personalizado de TimePaste. Ahorre tiempo y mejore la fiabilidad recibiendo actualizaciones en tiempo real y capturas de pantalla de los problemas. Los nodos personalizados ofrecen automatización avanzada sin necesidad de conocimientos técnicos extensos, lo que le permite replicar las funcionalidades SaaS de forma eficiente. [ 3 ]
A continuación se explica cómo puede implementar el análisis de respuesta de red con Latenode:
El generador visual de flujos de trabajo de Latenode y la generación de código asistida por IA, combinados con las herramientas de red de Puppeteer, crean un potente sistema de monitorización. Esta integración ofrece información en tiempo real sobre las aplicaciones web, optimizando sus flujos de trabajo de automatización.
