运行Protractor测试时捕获Chrome堆快照仅含测试信息如何解决

你之前使用的heapdump、v8-profiler-next均为Node.js环境的堆抓取工具，只能捕获运行Protractor测试脚本的Node进程内存数据，而目标应用的JS逻辑、类、实例都运行在Chrome浏览器的渲染进程中，两个运行时完全隔离，因此抓取的快照里只会有测试逻辑相关内容，不会包含应用侧数据。

通过Chrome DevTools Protocol（CDP）直接和运行目标应用的Chrome进程通信，调用CDP的HeapProfiler域接口抓取浏览器侧的堆快照，Protractor本身支持直接对接Chrome的CDP能力，无需复杂改造：

• 第一步修改protractor.conf.js配置，开启Chrome远程调试端口：

exports.config = {
  // 其余原有配置保持不变
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: ['--remote-debugging-port=9222']
    }
  }
}

• 第二步封装堆快照抓取方法，Protractor v6及以上版本可直接使用内置的DevTools能力：

const fs = require('fs');

async function takeHeapSnapshot(savePath) {
  const devTools = await browser.driver.getDevTools();
  await devTools.send('HeapProfiler.enable');
  
  const snapshotChunks = [];
  // 监听快照分块数据返回
  devTools.on('HeapProfiler.addHeapSnapshotChunk', (params) => {
    snapshotChunks.push(params.chunk);
  });

  // 触发堆快照生成
  await devTools.send('HeapProfiler.takeHeapSnapshot', { reportProgress: false });
  await devTools.send('HeapProfiler.disable');

  // 拼接完整快照写入本地文件
  const fullSnapshot = snapshotChunks.join('');
  fs.writeFileSync(savePath, fullSnapshot);
}

• 第三步在测试流程中插入快照抓取节点：

describe('应用内存对比测试', () => {
  it('操作前后堆快照校验', async () => {
    await browser.get('你的目标应用访问地址');
    // 操作前主动触发垃圾回收，避免临时对象干扰
    const devTools = await browser.driver.getDevTools();
    await devTools.send('HeapProfiler.collectGarbage');
    // 生成第一份快照
    await takeHeapSnapshot('./before-operate.heapsnapshot');

    // 此处插入你要执行的测试操作逻辑
    await element(by.css('#test-btn')).click();
    await element(by.css('#input-box')).sendKeys('测试内容');
    await browser.sleep(1000);

    // 操作后再次触发垃圾回收
    await devTools.send('HeapProfiler.collectGarbage');
    // 生成第二份快照
    await takeHeapSnapshot('./after-operate.heapsnapshot');
  });
});

• 生成的两份.heapsnapshot文件可以直接导入Chrome DevTools的Memory标签页，选择「对比」模式即可查看应用侧对象、类、DOM节点的增减情况，所有应用相关数据都会完整保留。

• 快照生成过程中不要执行额外的页面操作，避免快照数据异常
• 如果使用低于v6版本的Protractor，可以引入chrome-remote-interface库对接9222调试端口实现相同的快照抓取逻辑

内容的提问来源于stack exchange，提问作者DDana