会话检查和录制

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

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

• 诊断仅凭日志或错误消息无法显现的复杂问题
• 准确了解页面在浏览器中呈现的样子
• 验证自动化工作流是否正确执行
• 实时排查意外行为

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

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

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

请在 10月1日前更新你的集成。从那天起，对旧域名的流量将自动路由到新域名。

会话检查 (VNC)

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

推荐的实时会话查看方式是通过 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);  // open this URL in your 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";
// Enable video recording under a custom name
const params = "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 session inspection link
        console.log(`Live session inspection link: https://hb.oxylabs.io/novnc/?id=${sessionId}`);
        // Execute your automation steps
        await page.goto("https://example.com");
        
        // Hold session open briefly to allow visual monitoring
        await new Promise(resolve => setTimeout(resolve, 10000));
    } catch (error) {
        console.error("Visual session execution failed:", error.message);
    } finally {
        await browser.close();
        录制已生成。请访问 https://hb.oxylabs.io/dashboard 查看回放。
    }
})();