> 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/cn/headless-browser/hui-hua-jian-cha-yu-lu-zhi.md).

# 会话检查与录制

Oxylabs 无头浏览器提供 [**会话检查**](#session-inspection-vnc) 和 [**会话录制**](#session-recording) 可实时观察浏览器自动化，或回看过去会话的视频。这些可视化调试功能可让你：

* 诊断日志或错误消息中不明显的复杂问题
* 准确了解页面在浏览器中的渲染效果
* 验证自动化工作流是否正确执行
* 实时排查意外行为

这两种工具都会通过 `headlesify.io` 域名（与 `oxylabs.io` 用于连接，且与此分离）。

## 会话检查（VNC） <a href="#session-inspection-vnc" id="session-inspection-vnc"></a>

会话检查工具是一项调试功能，使用 VNC（Virtual Network Computing）为你的浏览器自动化会话提供实时可视化访问。

你可以通过使用 `vnc.headlesify.io`  端点。这会打开一个 `noVNC` 查看器，你可以在浏览器中观看。通过会话 ID 获取查看器 URL：

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

## 会话录制

将整个无头浏览器会话录制为视频，用于调试、审计或审查。要录制会话，请添加 `record=true` 查询参数到你的连接 URL：

```bash
wss://USER:PASS@ubc.oxylabs.io?record=true
```

### 自定义录制名称

通过使用 `record_name` 参数。你可以使用字母数字字符、连字符和下划线，最长 64 个字符（`^[a-zA-Z0-9_-]{1,64}$`):

```bash
wss://USER:PASS@ubc.oxylabs.io?record=true&record_name=payment_checkout_flow_01
```

### 访问回放

所有完成的录制都会自动编码并保存到你的安全门户。你可以在以下位置搜索、筛选并查看录制内容： <https://dashboard.headlesify.io/#recordings>.

## 代码示例

以下 Node.js 示例演示如何在启用可视化选项的情况下连接到浏览器，编程方式提取 VNC 会话 ID，并将直播链接输出到控制台。

{% hint style="success" %}
&#x20;该功能同时支持 Playwright 和 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/cn/headless-browser/hui-hua-jian-cha-yu-lu-zhi.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.