Inspección y grabación de sesiones

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

Oxylabs Agent Browser proporciona 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 pasadas. Estas funciones de depuración visual te permiten:

• Diagnosticar problemas complejos que no son evidentes a partir de los registros o los mensajes de error
• Entender el renderizado de la página exactamente como lo ve el navegador
• Verificar la ejecución correcta de tus flujos de trabajo de automatización
• Solucionar comportamientos inesperados en tiempo real

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

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

Atención: El panel de control y las herramientas de inspección de sesión se han movido desde headlesify.io a hb.oxylabs.io.

Actualiza tu integración antes del 1 de octubre. A partir de esa fecha, el tráfico de 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 tus sesiones de automatización del navegador.

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

Si necesitas un enlace directo de visualización (por ejemplo, para integrarlo en tus propias herramientas), puedes obtener el hb.oxylabs.io/novnc URL del visor a partir del ID de la 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: Session Inspection se está integrando completamente en el panel principal. Una vez que la migración esté completa, el panel será el único lugar para supervisar e inspeccionar sesiones en vivo, y esta página se actualizará en consecuencia.

Grabación de sesión

Graba toda tu sesión de Agent Browser como un video para depuración, auditoría o revisiones. Para grabar una sesión, añade el record=true parámetro de consulta a tu URL de conexión:

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

Por defecto, cada cuenta puede almacenar hasta 10 grabaciones. Si necesitas un límite mayor, contacta con el soporte de Oxylabs (chat en vivo o correo electrónico) o a tu gestor de cuenta dedicado.

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.

Personalización de los nombres de las grabaciones

Organiza y filtra tus grabaciones dentro de tu panel de control asignando nombres personalizados a tus videos usando el record_name parámetro. Puedes 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

Acceso a las reproducciones

Todas las grabaciones completadas se codifican automáticamente y se guardan en tu Panel de control. Puedes buscar, filtrar, ver y eliminar tus 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 el ID de la sesión mediante programación y mostrar el enlace de inspección en vivo en tu 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");
    }
})();