Inspeção e gravação de sessão

Veja como depurar sessões de automação por meio de uma interface gráfica em tempo real.

Oxylabs Headless Browser oferece Inspeção de Sessão e Gravação de Sessão para observar a automação do navegador em tempo real ou revisar reproduções em vídeo de sessões passadas. Esses recursos de depuração visual permitem que você:

• Diagnostique problemas complexos que não são evidentes em logs ou mensagens de erro
• Entenda a renderização da página exatamente como o navegador a vê
• Verifique a execução correta dos seus fluxos de automação
• Solucione comportamentos inesperados em tempo real

Ambas as ferramentas estão disponíveis diretamente no hb.oxylabs.io domínio, junto com o seu endpoint de conexão:

• Painel em hb.oxylabs.io/dashboard
• Inspeção de sessão em hb.oxylabs.io/novnc

Atenção: As ferramentas de painel e de inspeção de sessão foram movidas form headlesify.io para hb.oxylabs.io.

Atualize sua integração até 1º de outubro. A partir dessa data, o tráfego para os domínios antigos será automaticamente redirecionado para os novos.

Inspeção de Sessão (VNC)

A ferramenta de Inspeção de Sessão é um recurso de depuração que usa VNC (Virtual Network Computing) para fornecer acesso visual em tempo real às suas sessões de automação do navegador.

A maneira recomendada de assistir a uma sessão ao vivo é pelo Painel em hb.oxylabs.io/dashboard, onde você pode ver sessões ativas sem nenhuma configuração extra.

Se precisar de um link direto do visualizador (por exemplo, para incorporar em sua própria ferramenta), você pode obter o hb.oxylabs.io/novnc URL do visualizador a partir do ID da sessão:

const cdp = await ctx.newCDPSession(page);
const { value: sid } = await cdp.send("__session_id");
const vncUrl = `https://hb.oxylabs.io/novnc/?id=${sid}`;
console.log(vncUrl);  // open this URL in your browser

Atenção: A Inspeção de Sessão está sendo totalmente integrada ao painel principal. Quando a migração estiver concluída, o painel será o único lugar para monitorar e inspecionar sessões ao vivo, e esta página será atualizada de acordo.

Gravação de Sessão

Grave toda a sua sessão do Headless Browser como um vídeo para depuração, auditoria ou revisões. Para gravar uma sessão, adicione o record=true parâmetro de consulta à sua URL de conexão:

wss://USER:[e-mail]?record=true

Por padrão, cada conta pode armazenar até 10 gravações. Se precisar de um limite maior, entre em contato com o suporte da Oxylabs (chat ao vivo ou e-mail) ou com seu Gerente de Conta Dedicado.

Ao usar sessões persistentes, as gravações são armazenadas como um único vídeo contínuo em todas as reconexões a essa sessão, em vez de criar um arquivo de gravação separado para cada conexão.

Personalizando nomes de gravação

Organize e filtre suas gravações no seu painel atribuindo nomes personalizados aos seus vídeos usando o record_name parâmetro. Você pode usar caracteres alfanuméricos com hífens e sublinhados, até um comprimento máximo de 64 caracteres (^[a-zA-Z0-9_-]{1,64}$):

wss://USER:[e-mail]?record=true&record_name=payment_checkout_flow_01

Acessando reproduções

Todas as gravações concluídas são codificadas automaticamente e salvas no seu Painel. Você pode pesquisar, filtrar, visualizar e excluir suas gravações diretamente em hb.oxylabs.io/dashboard.

Exemplos de código

O exemplo a seguir em Node.js mostra como se conectar ao navegador com gravação ativada, extrair o ID da sessão programaticamente e exibir o link de inspeção ao vivo no console.

Os recursos são compatíveis com as bibliotecas Playwright e Puppeteer.

import { chromium } from "playwright";

const username = "USERNAME_abc12";
const password = "PASSWORD";
const endpoint = "hb.oxylabs.io";
// Enable video recording under a custom name
const params = "record=true&record_name=chrome_vnc_test";
const browserUrl = `wss://${username}:${password}@${endpoint}?${params}`;

(async () => {
    // Connect to the browser
    const browser = await chromium.connectOverCDP(browserUrl);
    const ctx = browser.contexts()[0] || (await browser.newContext());
    const page = ctx.pages()[0] || (await ctx.newPage());
    try {
        // 1. Initialize a CDP session on the active page
        const cdpSession = await ctx.newCDPSession(page);
        
        // 2. Query the custom session identifier
        const { value: sessionId } = await cdpSession.send("__session_id");
        
        // 3. Construct and output the session inspection link
        console.log(`Live session inspection link: https://hb.oxylabs.io/novnc/?id=${sessionId}`);
        // Execute your automation steps
        await page.goto("https://example.com");
        
        // Hold session open briefly to allow visual monitoring
        await new Promise(resolve => setTimeout(resolve, 10000));
    } catch (error) {
        console.error("Visual session execution failed:", error.message);
    } finally {
        await browser.close();
        console.log("Recording compiled. Access playback at https://hb.oxylabs.io/dashboard");
    }
})();