.png)
.svg){kind=icon}
23 de março de 2025
.
9
min ler
Análise e processamento de resposta de rede no Puppeteer: monitoramento e modificação
Jorge Miloradovitch
Pesquisador, redator e entrevistador de casos de uso
Quer dominar Marionetista para monitoramento de rede e manipulação de resposta? Este guia abrange tudo o que você precisa saber - desde interceptar solicitações até modificar respostas de API e testar sob diferentes condições de rede. Aqui está uma rápida olhada no que você aprenderá:
Comece a usar o Puppeteer para aprimorar seus fluxos de trabalho de automação e otimizar os processos de teste.
Veja como configurar o Puppeteer para monitorar respostas de rede passo a passo.
Comece com estas etapas:
npm init para inicializar o projeto.npm install puppeteer
Em seguida, crie um arquivo de script principal e adicione o código de configuração básica:
const puppeteer = require('puppeteer');
async function startMonitoring() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Continue configuration here
}
Para monitorar e modificar as respostas da rede, você precisa habilitar a interceptação de solicitações e configurar ouvintes 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);
}
});
Conforme observado na Documentação Oficial do Marionetista:
"Quando a interceptação de solicitações é habilitada, todas as solicitações serão interrompidas, a menos que sejam continuadas, respondidas ou abortadas".
Um exemplo de AgenteA documentação de 2024 da mostra como interceptar e analisar respostas de API de e-commerce de forma eficaz. O método deles inclui:
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 configuração permite que você:
Dica: Sempre inclua o tratamento de erros, como encapsular a análise de resposta em try-catch blocos, especialmente ao trabalhar com dados JSON ou acessar propriedades de resposta.
Esta configuração prepara o cenário para técnicas de monitoramento de rede mais avançadas nas seções a seguir.
O Puppeteer permite que você monitore respostas do servidor usando ouvintes de eventos para rastrear a atividade da API e do XHR. Esta seção explica como monitorar respostas de forma eficaz, permitindo análises detalhadas e ajustes posteriores.
Você pode configurar ouvintes de eventos para rastrear respostas de API e XHR da seguinte maneira:
// 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}`);
});
Depois de rastrear as respostas, você pode organizar e processar os dados para uso posterior.
Classifique e manipule as respostas com base no tipo de conteúdo usando esta abordagem:
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);
}
});
Use os seguintes métodos para extrair dados das respostas:
const searchResponse = await page.waitForResponse(
response => response.url().includes('sample-search.php')
);
const data = await searchResponse.json();
const results = data.results;
| Tipo de Resposta | Método de extração | Melhor caso de uso |
|---|---|---|
| JSON | resposta.json() | Respostas de API, dados estruturados |
| Texto | resposta.texto() | Conteúdo HTML, texto simples |
| Binário | resposta.buffer() | Arquivos, imagens, downloads |
Para garantir um desempenho suave:
try-catch blocos para análiseO estudo da Agenty demonstra como o monitoramento cuidadoso da resposta pode melhorar significativamente os fluxos de trabalho de automação.
Monitorar respostas é apenas parte da equação; modificá-las é essencial para testar casos extremos e garantir que seu aplicativo tenha um bom desempenho sob várias condições. O Puppeteer facilita o ajuste de respostas de rede, ajudando você a simular e testar cenários específicos.
Ajustar cabeçalhos HTTP permite que você teste mecanismos de autenticação e comportamento do servidor. Veja como você pode modificar cabeçalhos usando o 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 vários cabeçalhos, você pode usar setExtraHTTPHeaders para uma abordagem mais limpa:
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'
});
Esses ajustes permitem simular diferentes cenários de solicitação, como testar conteúdo localizado ou verificar autenticação baseada em token.
Testar como seu aplicativo se comporta sob várias condições de rede é crucial. O Puppeteer permite que você emule diferentes cenários de conectividade, como 3G ou conexões lentas:
| Condição da rede | Velocidade do download | Velocidade de upload | Latência |
|---|---|---|---|
| 3G | 750 KB / s | 250 KB / s | 100ms |
| 4G | 4 MB / s | 3 MB / s | 20ms |
| Conexão lenta | 100 KB / s | 50 KB / s | 500ms |
Aqui está um exemplo de como simular uma rede 3G:
await page.emulateNetworkConditions({
download: 768000,
upload: 256000,
latency: 100
});
Este método ajuda a identificar gargalos de desempenho e garante que seu aplicativo possa ser usado em diversos ambientes de rede.
Você também pode interceptar solicitações de API e retornar respostas simuladas. Isso é especialmente útil para testar cenários específicos sem depender de servidores ativos:
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 maior confiabilidade, envolva sua lógica de interceptação em um bloco 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);
}
Essa abordagem garante que seus testes sejam executados sem problemas, mesmo que ocorram erros inesperados durante a interceptação de solicitações.
O Puppeteer oferece uma variedade de ferramentas para inspeção detalhada de tráfego e melhoria de desempenho.
O Chrome DevTools Protocol (CDP) permite monitoramento e depuração avançados. Aqui está um exemplo de como usá-lo:
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
});
});
Você também pode coletar métricas de desempenho usando o 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();
Essas ferramentas ajudam você a monitorar a atividade da rede e a analisar gargalos de desempenho de forma eficaz.
Arquivos HAR (HTTP Archive) fornecem um registro completo da atividade de rede, tornando-os excelentes para análise de desempenho. Aqui está um exemplo prático de criação de um arquivo 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);
});
Ao analisar arquivos HAR, fique de olho nessas métricas:
| métrico | Descrição | Faixa típica |
|---|---|---|
| Tempo para o primeiro byte | Hora da primeira resposta | 100-500ms |
| Tempo de download | Hora de transferir recursos | 200ms-2s |
| Pesquisa de DNS | Tempo para resolução de domínio | 0-100ms |
| Negociação SSL | Hora do aperto de mão de segurança | 50-150ms |
Essas métricas ajudam a identificar problemas de desempenho e melhorar a capacidade de resposta do seu aplicativo.
O Latenode aprimora os recursos de monitoramento do Puppeteer adicionando verificações de saúde automatizadas e diagnósticos visuais. Por exemplo, Colar no Tempo usa um nó personalizado para monitorar aplicativos da 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
});
}
};
"Automatize o monitoramento de sites e APIs com o nó personalizado do TimePaste. Economize tempo e melhore a confiabilidade recebendo atualizações em tempo real e capturas de tela de problemas. Os nós personalizados oferecem automação avançada sem ampla experiência técnica, permitindo que você replique as funcionalidades do SaaS de forma eficiente."
Com o Latenode, você pode:
Esses recursos agilizam o monitoramento e garantem que os problemas sejam resolvidos prontamente.
O monitoramento de rede no Puppeteer pode apresentar alguns problemas comuns, como respostas de rede ausentes. Isso geralmente acontece quando a interceptação de solicitação não é tratada corretamente.
Para evitar isso, ligue sempre request.continue() durante a interceptação de solicitações - mesmo que você esteja apenas monitorando respostas:
await page.setRequestInterception(true);
page.on('request', request => {
request.continue();
});
page.on('response', async response => {
console.log(`Response received: ${response.url()}`);
});
Outra dica: desabilite o cache para garantir que todas as respostas sejam capturadas:
await page.setCacheEnabled(false);
await page.setDefaultNavigationTimeout(30000);
Essas etapas ajudam a garantir um monitoramento de rede mais tranquilo e preparam você para as dicas de desempenho que serão apresentadas a seguir.
Aumente o desempenho do Puppeteer com estas técnicas de otimização:
| Técnica | Como implementar | Impacto no Desempenho |
|---|---|---|
| Configurações mínimas do Chrome | Use os interruptores do Chrome para desabilitar recursos desnecessários | Reduz o tempo de inicialização em 20–30% |
| Cache de recursos | Use userDataDir para reutilização de ativos |
Acelera o carregamento de páginas em 40% |
| Solicitar Filtragem | Bloqueie anúncios, rastreadores e outros recursos desnecessários | Reduz a carga da rede em 25–35% |
| Otimização de captura de tela | Salve capturas de tela no formato JPG com armazenamento Buffer | Reduz o tamanho dos arquivos em 50–60% |
Por exemplo, você pode filtrar recursos não essenciais, como imagens e fontes, para reduzir a carga da rede:
const blockedResources = ['image', 'stylesheet', 'font'];
await page.setRequestInterception(true);
page.on('request', request => {
if (blockedResources.includes(request.resourceType())) {
request.abort();
} else {
request.continue();
}
});
Esses ajustes podem tornar o Puppeteer mais rápido e eficiente.
Melhorias técnicas são importantes, mas permanecer dentro dos limites legais e éticos é igualmente crítico. Aqui estão algumas práticas importantes a serem seguidas:
Aqui está um exemplo de limitação de taxa responsável:
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
async function responsibleMonitoring(page, url) {
await delay(2000);
await page.goto(url, { waitUntil: 'networkidle0' });
}
Para conformidade em nível empresarial, considere estas medidas:
Equilibrar as otimizações de desempenho com a conformidade legal garante que seus esforços de automação sejam eficazes e responsáveis.
O Puppeteer equipa os desenvolvedores com ferramentas para monitorar e modificar o tráfego da web de forma eficaz. Ao interceptar solicitações e analisar respostas, os desenvolvedores podem ajustar o carregamento de páginas, simular diferentes condições de rede e gerenciar conteúdo dinâmico. Esse nível de controle sobre solicitações HTTP permite fluxos de trabalho de automação precisos.
Agora, vamos explorar como você pode usar o Latenode para simplificar o monitoramento de rede.
O Latenode se baseia nas capacidades do Puppeteer para automatizar a análise de rede. Seus recursos de nó personalizados tornam o monitoramento mais eficiente e fácil de usar.
"Automatize o monitoramento de sites e APIs com o nó personalizado do TimePaste. Economize tempo e melhore a confiabilidade recebendo atualizações em tempo real e capturas de tela de problemas. Os nós personalizados oferecem automação avançada sem ampla experiência técnica, permitindo que você replique as funcionalidades do SaaS de forma eficiente."
Veja como você pode implementar a análise de resposta de rede com o Latenode:
O construtor de fluxo de trabalho visual do Latenode e a geração de código assistida por IA, combinados com as ferramentas de rede do Puppeteer, criam um sistema de monitoramento poderoso. Essa integração oferece insights em tempo real sobre aplicativos da web, aprimorando seus fluxos de trabalho de automação.
