# Inspección de sesiones

El **Inspección de Sesión** herramienta es una potente **función de depuración** de Oxylabs Headless Browser que aprovecha la tecnología VNC (Virtual Network Computing) para proporcionar acceso visual en tiempo real a tus sesiones de automatización del navegador. Esta herramienta crea un puente seguro entre tu instancia de navegador sin interfaz y una interfaz gráfica que puedes observar y controlar.

### ¿Cuándo usarla?

Aunque Oxylabs Headless Browser ofrece capacidades de sigilo integradas, evasión dinámica de CAPTCHA y otras funciones, ciertos escenarios requieren observación visual directa para:

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

### Ejemplo de uso

Puedes habilitar la herramienta de Inspección de Sesión añadiendo el `o_vnc=true` parámetro al endpoint de conexión, por ejemplo:

* **Navegador Chrome:** `wss://username:password@ubc.oxylabs.io?o_vnc=true`
* **Navegador Firefox:** `wss://username:password@ubs.oxylabs.io?o_vnc=true`

{% hint style="success" %}
Esta función funciona con las bibliotecas Playwright y Puppeteer.
{% endhint %}

{% tabs %}
{% tab title="Chrome (UBC)" %}

```javascript
const {chromium} = require('playwright');

(async () => {
    let page = null;
    let browser = null;

    try {
        // Use o_vnc=true parameter to connect
        browser = await chromium.connectOverCDP('wss://user:pass@ubc.oxylabs.io?o_vnc=true');
        const ctx = browser.contexts()[0];

        // Create a new page
        page = await ctx.newPage();
        page.on('console', async msg => {
            console.log(`BROWSER [${msg.type()}] ${msg.text()}`);
        });

        // Get the session ID using a CDP session
        let sesId = await (await ctx.newCDPSession(page)).send("__session_id");
        // Use UB novnc client or any WebSocket capable client to connect to vnc
        console.log(`Connect to VNC: https://vnc.headlesify.io/novnc/?id=${sesId.value}`);

        // Goto to a page
        await page.goto('https://duckduckgo.com');

        // Sleep for 10 minutes
        await new Promise(resolve => {
            setTimeout(resolve, 6000000);
        });
    }
    catch (e) {
        console.log("Finished with error:", e);
    } finally {
        if (page != null) await page.close();
        if (browser != null) await browser.close();
        process.exit(0);
    }
})();
```

{% endtab %}

{% tab title="Firefox (UBS)" %}

```javascript
const { firefox } = require('playwright');

(async () => {
    let page = null;
    let browser = null;

    try {
        // Use o_vnc=true parameter to connect
        browser = await firefox.connect('wss://user:pass@ubs.oxylabs.io?o_vnc=true');
        const ctx = await browser.newContext();

        // Create a new page
        page = await ctx.newPage()
        page.on('console', async msg => {
            console.log(`BROWSER [${msg.type()}] ${msg.text()}`);
        })

        // Get the session ID using a CDP session
        let sesId = await (await ctx.newCDPSession(page)).evaluate("__session_id")
        // Use UB novnc client or any WebSocket capable client to connect to VNC
        console.log(`Connect to VNC: https://vnc.headlesify.io/novnc/?id=${sesId.value}`);

        // Goto to a page
        await page.goto('https://duckduckgo.com');

        // Sleep for 10 minutes
        await new Promise(resolve => {
            setTimeout(resolve, 6000000);
        })
    }
    catch (e) {
        console.log("Finished with error:", e);
    } finally {
        if (page != null) await page.close();
        if (browser != null) await browser.close();
        process.exit(0);
    }
})();
```

{% endtab %}
{% endtabs %}