# Session Inspection

The **Session Inspection** tool is a powerful **debugging feature** of Oxylabs Headless Browser that leverages VNC (Virtual Network Computing) technology to provide real-time visual access to your browser automation sessions. This tool creates a secure bridge between your headless browser instance and a graphical interface you can observe and control.

### When to use it?

While Oxylabs Headless Browser offers built-in stealth capabilities, dynamic CAPTCHA bypassing, and other features, certain scenarios require direct visual observation to:

* Diagnose complex issues that aren't evident from logs or error messages
* Understand page rendering exactly as the browser sees it
* Verify proper execution of your automation workflows
* Troubleshoot unexpected behavior in real-time

### Usage example

You can enable the Session Inspection tool by adding the `o_vnc=true` parameter to the connection endpoint, for example:

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

{% hint style="success" %}
This feature works with both Playwright and Puppeteer libraries.
{% 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 %}