会话检查与录制

了解如何通过实时图形界面调试自动化会话。

Oxylabs 无头浏览器提供 会话检查 和 会话录制 可实时观察浏览器自动化，或回看过去会话的视频。这些可视化调试功能可让你：

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

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

会话检查（VNC）

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

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

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：

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

自定义录制名称

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

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

访问回放

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

代码示例

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

该功能同时支持 Playwright 和 Puppeteer 库。

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