Inspección y grabación de sesiones

Mira cómo depurar sesiones de automatización mediante una interfaz gráfica en tiempo real.

Oxylabs Headless Browser ofrece Inspección de sesión y Grabación de sesión para observar la automatización del navegador en tiempo real o revisar reproducciones en video de sesiones anteriores. Estas funciones de depuración visual le permiten:

• Diagnosticar problemas complejos que no son evidentes en los registros ni en los mensajes de error
• Entender el renderizado de la página exactamente como lo ve el navegador
• Verificar la ejecución correcta de sus flujos de trabajo de automatización
• Solucionar problemas de comportamiento inesperado en tiempo real

Ambas herramientas están disponibles directamente en el hb.oxylabs.io dominio, junto con su endpoint de conexión:

• Dashboard en hb.oxylabs.io/dashboard
• Inspección de sesión en hb.oxylabs.io/novnc

Atención: Las herramientas del dashboard y de inspección de sesión se han movido form headlesify.io a hb.oxylabs.io.

Actualice su integración antes del 1 de octubre. A partir de esa fecha, el tráfico a los dominios antiguos se redirigirá automáticamente a los nuevos.

Inspección de sesión (VNC)

La herramienta de Inspección de sesión es una función de depuración que usa VNC (Virtual Network Computing) para proporcionar acceso visual en tiempo real a sus sesiones de automatización del navegador.

La forma recomendada de ver una sesión en vivo es a través del Dashboard en hb.oxylabs.io/dashboard, donde puede ver las sesiones activas sin configuración adicional.

Si necesita un enlace directo del visor (p. ej., para integrarlo en sus propias herramientas), puede obtener el hb.oxylabs.io/novnc URL del visor a partir del ID de sesión:

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

Atención: Inspección de sesión se está integrando por completo en el dashboard principal. Una vez completada la migración, el dashboard será el único lugar para monitorear e inspeccionar sesiones en vivo, y esta página se actualizará en consecuencia.

Grabación de sesión

Grabe toda su sesión de Headless Browser como video para depuración, auditoría o revisiones. Para grabar una sesión, agregue el record=true parámetro de consulta a su URL de conexión:

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

De forma predeterminada, cada cuenta puede almacenar hasta 10 grabaciones. Si necesita un límite mayor, contacte con el soporte de Oxylabs (chat en vivo o email) o su Dedicated Account Manager.

Al usar sesiones persistentes, las grabaciones se almacenan como un único video continuo a través de todas las reconexiones a esa sesión, en lugar de crear un archivo de grabación separado para cada conexión.

Personalizar los nombres de las grabaciones

Organice y filtre sus grabaciones dentro de su dashboard asignando nombres personalizados a sus videos usando el record_name parámetro. Puede usar caracteres alfanuméricos con guiones y guiones bajos, hasta una longitud máxima de 64 caracteres (^[a-zA-Z0-9_-]{1,64}$):

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

Acceder a las reproducciones

Todas las grabaciones completadas se codifican automáticamente y se guardan en su Dashboard. Puede buscar, filtrar, ver y eliminar sus grabaciones directamente en hb.oxylabs.io/dashboard.

Ejemplos de código

El siguiente ejemplo de Node.js muestra cómo conectarse al navegador con la grabación habilitada, extraer programáticamente el ID de sesión y mostrar el enlace de inspección en vivo en su consola.

Las funciones son compatibles con las bibliotecas Playwright y 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");
    }
})();