> For the complete documentation index, see [llms.txt](https://developers.oxylabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.oxylabs.io/products/pt-br/headless-browser/inspecao-e-gravacao-de-sessao.md).

# Inspeção e gravação de sessão

Oxylabs Headless Browser fornece [**Inspeção de Sessão**](#session-inspection-vnc) e [**Gravação de Sessão**](#session-recording) 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 href="#session-inspection-vnc" id="session-inspection-vnc"></a>

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:

```javascript
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:

```bash
wss://USER:PASS@ubc.oxylabs.io?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}$`):

```bash
wss://USER:PASS@ubc.oxylabs.io?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.

{% hint style="success" %}
&#x20;Os recursos dão suporte às bibliotecas Playwright e Puppeteer.
{% endhint %}

```javascript
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");
    }
})();
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://developers.oxylabs.io/products/pt-br/headless-browser/inspecao-e-gravacao-de-sessao.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.