Análise e processamento de respostas de rede no Puppeteer: monitoramento e modificação

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á:

Monitorar e modificar solicitações de rede: Ajuste cabeçalhos, cargas úteis e respostas simuladas para testes.
Analisar respostas do servidor: Extraia dados JSON, HTML ou binários para testes de API e insights de desempenho.
Simular condições de rede: Teste em conexões 3G, 4G ou lentas para otimizar o desempenho.
Exemplos práticos de código: Configuração e uso passo a passo para cenários do mundo real.
Dicas legais e de eficiência: Mantenha a conformidade e melhore o desempenho do Puppeteer com cache, filtragem de solicitações e limitação de taxas.

Comece a usar o Puppeteer para aprimorar seus fluxos de trabalho de automação e otimizar os processos de teste.

Como capturar respostas/solicitações HTTP usando Marionetista ...

Configuração e Configuração

Veja como configurar o Puppeteer para monitorar respostas de rede passo a passo.

Configuração inicial

Comece com estas etapas:

Crie um novo diretório para o seu Node.js projeto.
Execute npm init para inicializar o projeto.
Instale o Puppeteer usando o comando:

npm install puppeteer

Em seguida, crie um arquivo de script principal e adicione o código de configuração básica:

<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>
}

Configuração de interceptação de rede

Para monitorar e modificar as respostas da rede, você precisa habilitar a interceptação de solicitações e configurar ouvintes de eventos.

<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);
    }
});

Conforme observado na Documentação Oficial do Marionetista:

"Uma vez que 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 mostra como interceptar e analisar respostas de API de comércio eletrônico de forma eficaz . O método deles inclui:

<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>();
    }
});

Esta configuração permite que você:

Monitore todas as solicitações e respostas da rede.
Modifique cabeçalhos de solicitação e cargas úteis.
Analise respostas JSON de APIs.
Filtre e rastreie padrões de URL específicos.
Lide com vários tipos de resposta.

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.

Monitoramento de resposta de rede

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.

Rastreamento de solicitações de API e XHR

Você pode configurar ouvintes de eventos para rastrear respostas de API e XHR da seguinte maneira:

<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>);
});

Depois de rastrear as respostas, você pode organizar e processar os dados para uso posterior.

Gerenciamento de dados de resposta

Classifique e manipule as respostas com base no tipo de conteúdo usando esta abordagem:

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étodos de Extração de Dados

Use os seguintes métodos para extrair dados das respostas:

<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>;

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:

Foco em padrões de URL específicos e métodos de solicitação
Lidar com erros normalmente
Uso try-catch blocos para análise
Armazenar em cache os dados de resposta quando aplicável

Estudo da Agência demonstra como o monitoramento cuidadoso da resposta pode melhorar significativamente os fluxos de trabalho de automação.

sbb-itb-23997f1

Métodos de modificação de resposta

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.

Modificação do Cabeçalho

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:

<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 });
});

Para vários cabeçalhos, você pode usar setExtraHTTPHeaders para uma abordagem mais limpa:

<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>
});

Esses ajustes permitem simular diferentes cenários de solicitação, como testar conteúdo localizado ou verificar autenticação baseada em token.

Testes de condição de rede

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:

<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>
});

Este método ajuda a identificar gargalos de desempenho e garante que seu aplicativo possa ser usado em diversos ambientes de rede.

Teste de resposta da API

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:

<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>
            }
        })
    });
});

Para maior confiabilidade, envolva sua lógica de interceptação em um bloco 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);
}

Essa abordagem garante que seus testes sejam executados sem problemas, mesmo que ocorram erros inesperados durante a interceptação de solicitações.

Ferramentas de análise avançada

O Puppeteer oferece uma variedade de ferramentas para inspeção detalhada de tráfego e melhoria de desempenho.

Protocolo Chrome DevTools Guia

O Chrome DevTools Protocol (CDP) permite monitoramento e depuração avançados. Aqui está um exemplo de como usá-lo:

<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
    });
});

Você também pode coletar métricas de desempenho usando o 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>();

Essas ferramentas ajudam você a monitorar a atividade da rede e a analisar gargalos de desempenho de forma eficaz.

Análise de arquivo HAR

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:

<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);
});

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.

Nó latente Integração

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:

<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> 
        });
    }
};

"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:

Configurar verificações de saúde automatizadas
Capture capturas de tela de problemas para obter evidências visuais
Habilitar notificações em tempo real

Esses recursos agilizam o monitoramento e garantem que os problemas sejam resolvidos prontamente.

Resolução de problemas e diretrizes

Resolução de Problemas

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:

<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>);
});

Outra dica: desabilite o cache para garantir que todas as respostas sejam capturadas:

<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>);

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.

Dicas de velocidade e eficiência

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:

<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>();
    }
});

Esses ajustes podem tornar o Puppeteer mais rápido e eficiente.

Diretrizes Legais

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:

Obtenha consentimento explícito antes de coletar dados pessoais.
Verifique as políticas de automação para os sites com os quais você interage.
Limitação de taxa de uso para evitar sobrecarregar os servidores.

Aqui está um exemplo de limitação de taxa responsável:

<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> });
}

Para conformidade em nível empresarial, considere estas medidas:

Protocolos de tratamento de dados: Limite a coleta de dados, defina políticas de retenção e atividades de processamento de documentos.
Controles de Acesso: Use autenticação e autorização para proteger dados confidenciais.
Trilhas de auditoria: Mantenha registros detalhados com registros de data e hora e quaisquer alterações feitas.

Equilibrar as otimizações de desempenho com a conformidade legal garante que seus esforços de automação sejam eficazes e responsáveis.

Conclusão

Resumo

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.

Introdução ao Latenode

O Latenode se baseia nos recursos do Puppeteer para automatizar a análise de redes. Seus recursos de nó personalizados tornam o monitoramento mais eficiente e fácil de usar. .