会话重放

会话重放提供了检查所执行操作和网络请求的途径。此功能可以回放录制的会话,从而可以逐页详细检查执行的操作和网络请求。

优点

✅ 实时录制 – 在脚本执行期间自动记录所有网络请求

✅ 逐帧回放 – 精确回溯浏览器操作

✅ 团队协作 – 轻松共享会话录制以进行团队调试

✅ 毫秒级精度 – 检查事件级时间戳以增强脚本调整

✅ 安全隔离 – 会话数据经过加密并通过细粒度访问控制进行保护

✅ 轻量级格式 – 得益于 rrweb 驱动的 DOM 差异比较,录制文件比视频文件小 90%

如何使用

创建Scrapless浏览器会话

类型一:通过Playground新建会话录屏

playground 默认已通过参数设置开启了会话录屏。

image1.png

同样你还可以在 Playground 的设置中开启会话录屏。但需要注意一旦你开启了 Use Playground Settings 选项,将会覆盖playground代码中的连接参数

image2.png

配置完成后,点击 “Run” 即可开始录制

类型二:通过API新建会话录屏

您也可以在您的其他项目中通过API来连接我们的session功能,通过设置代码中的参数对会话进行设置。

想要开启录制功能,需要设置query参数session_recordingtrue,该参数默认值为false。你还可以通过session_name参数为你的会话设置一个名称,这样便于在会话列表中快速查找到你的会话。

image3.png

更多详细文档说明可以参考:Scraping Browser API Docs。代码示例如下:

const puppeteer =require('puppeteer-core');
 
const token = 'API Key'
 
// custom fingerprint
const fingerprint = {
    platform: 'Windows',
}
 
const query = new URLSearchParams({
    session_ttl: 180,
    session_name: 'test_scraping', // session name
    session_recording: true, // enable web session recording
    proxy_country: 'ANY',
    token: token,
    fingerprint: encodeURIComponent(JSON.stringify(fingerprint)),
});
 
const connectionURL = `wss://browser.scrapeless.com/browser?${query.toString()}`;
 
(async () => {
    const browser = await puppeteer.connect({browserWSEndpoint: connectionURL});
    const page = await browser.newPage();
 
    await page.goto('https://www.scrapeless.com');
    await new Promise(res => setTimeout(res, 3000));
 
    await page.goto('https://www.google.com');
    await new Promise(res => setTimeout(res, 3000));
 
    await page.goto('https://www.youtube.com');
    await new Promise(res => setTimeout(res, 3000));
 
    await browser.close();
})();
 

查看回放

浏览器运行完毕后会自动记录会话录屏,点击会话历史列表可以进行查看。

image4.gif

限制

💡 会话录制仅关注用户在浏览器中的可视体验,不包括任何未反映在页面结构(DOM)中的底层服务器活动、数据库交互或技术变更。

💡 由 WebGL 或 canvas 等技术构建的复杂动画可能无法在会话录制中完全忠实地重现。