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 fornece 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 anteriores. Esses recursos de depuração visual permitem que você:

• Diagnostique problemas complexos que não são evidentes nos 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
• Investigue comportamentos inesperados em tempo real

Ambas as ferramentas encaminham seus dados visuais pelo headlesify.io domínio (separado de oxylabs.io usado para conexões).

Inspeção de Sessão (VNC)

A ferramenta 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.

Você pode ativar a ferramenta Inspeção de Sessão usando o vnc.headlesify.io endpoint. Isso abre um noVNC visualizador que você pode assistir no seu navegador. Recupere a 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://vnc.headlesify.io/novnc/?id=${sid}`;
console.log(vncUrl);  // open this URL in your browser

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

Personalizando nomes de gravação

Organize e filtre suas gravações dentro do 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 underscores, 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 portal seguro. Você pode pesquisar, filtrar e revisar suas gravações em https://dashboard.headlesify.io/#recordings.

Exemplos de código

O exemplo a seguir em Node.js mostra como se conectar ao navegador com as opções visuais habilitadas, extrair programaticamente o ID da sessão VNC e exibir o link da transmissão ao vivo no seu console.

Os recursos dão suporte às bibliotecas Playwright e Puppeteer.

import { chromium } from "playwright";

const username = "USERNAME_abc12";
const password = "PASSWORD";
const endpoint = "ubc.oxylabs.io";

// Enable VNC stream and video recording under a custom name
const params = "o_vnc=true&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 VNC viewer link
        console.log(`Live VNC Link: https://vnc.headlesify.io/novnc/?id=${sessionId}`);

        // Execute your automation steps
        await page.goto("https://example.com");
        
        // Hold session open briefly to allow visual monitoring via VNC link
        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://dashboard.headlesify.io/#recordings");
    }
})();