会话检查和录制

了解如何通过实时图形界面调试 Oxylabs 代理浏览器自动化会话。

Oxylabs Agent Browser 提供 会话检查 和 会话录制 用于实时观察浏览器自动化，或回放过往会话的视频。这些可视化调试功能可让您：

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

这两个工具可直接在 hb.oxylabs.io 域名下使用，与您的连接端点并列：

• 仪表板地址： hb.oxylabs.io/dashboard
• 会话检查地址： hb.oxylabs.io/novnc

注意： 仪表板和会话检查工具已从 headlesify.io 迁移到 hb.oxylabs.io.

请在 10月1日前更新您的集成。自该日起，旧域名的流量将自动路由到新域名。

会话检查（VNC）

会话检查工具是一项调试功能，使用 VNC（虚拟网络计算）为您的浏览器自动化会话提供实时可视访问。

观看实时会话的推荐方式是通过 hb.oxylabs.io/dashboard仪表板，您无需额外设置即可查看活动会话。

如果您需要直接的查看器链接（例如嵌入到自己的工具中），可以获取 hb.oxylabs.io/novnc 根据会话 ID 获取查看器 URL：

const cdp = await ctx.newCDPSession(page);
const { value: sid } = await cdp.send("__session_id");
const vncUrl = `https://hb.oxylabs.io/novnc/?id=${sid}`;
console.log(vncUrl);  // 在浏览器中打开此 URL

注意： 会话检查正在全面集成到主仪表板中。迁移完成后，仪表板将成为监控和检查实时会话的唯一入口，此页面将相应更新。

会话录制

将整个 Agent Browser 会话录制为视频，用于调试、审计或复核。要录制会话，请添加 record=true 到连接 URL 的查询参数：

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

默认情况下，每个账号最多可存储 10 个录制。如果你需要更高的限制，请联系 Oxylabs 支持（在线聊天 或 电子邮件）或你的专属客户经理。

使用 持久会话时，录制会在该会话的所有重新连接中保存为一段连续视频，而不是为每次连接创建单独的录制文件。

自定义录制名称

通过使用 record_name 参数为视频分配自定义名称，在仪表板中整理和筛选录制内容。您可以使用字母数字字符、连字符和下划线，最长 64 个字符（^[a-zA-Z0-9_-]{1,64}$):

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

访问回放

所有完成的录制都会自动编码并保存到您的仪表板。您可以直接在以下位置搜索、筛选、查看和删除录制： hb.oxylabs.io/dashboard.

代码示例

下面的 Node.js 示例展示了如何在启用录制的情况下连接浏览器，程序化提取会话 ID，并将实时检查链接输出到控制台。

功能同时支持 Playwright 和 Puppeteer 库。

import { chromium } from "playwright";

const username = "USERNAME_abc12";
const password = "PASSWORD";
const endpoint = "hb.oxylabs.io";
// 启用自定义名称的视频录制
const params = "record=true&record_name=chrome_vnc_test";
const browserUrl = `wss://${username}:${password}@${endpoint}?${params}`;

(async () => {
    // 连接到浏览器
    const browser = await chromium.connectOverCDP(browserUrl);
    const ctx = browser.contexts()[0] || (await browser.newContext());
    const page = ctx.pages()[0] || (await ctx.newPage());
    try {
        // 1. 在活动页面上初始化 CDP 会话
        const cdpSession = await ctx.newCDPSession(page);
        
        // 2. 查询自定义会话标识符
        const { value: sessionId } = await cdpSession.send("__session_id");
        
        // 3. 构建并输出会话检查链接
        console.log(`Live session inspection link: https://hb.oxylabs.io/novnc/?id=${sessionId}`);
        // 执行您的自动化步骤
        await page.goto("https://example.com");
        
        // 短暂保持会话打开，以便进行可视监控
        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://hb.oxylabs.io/dashboard");
    }
})();