如何使用JavaScript和Selenium读取网页网络流量？

要捕获网页的网络流量，确实需要借助Chrome DevTools Protocol（CDP），Selenium的JavaScript绑定已经原生支持CDP交互，不用依赖旧的sendAndGetDevToolsCommands方法，下面是完整的实现步骤和代码：

核心步骤 #

1. 初始化Chrome驱动实例
2. 创建CDP会话，启用Network监控域
3. 监听CDP的网络事件（如请求发送、响应接收），收集流量数据
4. 访问目标页面，等待加载完成后处理捕获到的数据

完整代码示例 #

const { Builder } = require('selenium-webdriver');

async function captureNetworkTraffic() {
  // 初始化Chrome驱动
  let driver = await new Builder().forBrowser('chrome').build();
  
  try {
    await driver.manage().setTimeouts({ implicit: 30000 });
    
    // 建立CDP会话
    const cdpSession = await driver.createCDPSession();
    // 启用Network域，这是监听网络事件的前提
    await cdpSession.send('Network.enable');
    
    // 用于存储捕获到的网络请求/响应
    const networkLogs = [];
    
    // 监听「请求即将发送」事件
    cdpSession.on('Network.requestWillBeSent', (eventData) => {
      networkLogs.push({
        type: 'request',
        url: eventData.request.url,
        method: eventData.request.method,
        timestamp: eventData.timestamp,
        requestId: eventData.requestId
      });
    });
    
    // 监听「响应已接收」事件
    cdpSession.on('Network.responseReceived', (eventData) => {
      networkLogs.push({
        type: 'response',
        url: eventData.response.url,
        status: eventData.response.status,
        statusText: eventData.response.statusText,
        timestamp: eventData.timestamp,
        requestId: eventData.requestId
      });
    });
    
    // 访问目标网页
    await driver.get('your-target-url-here');
    
    // 等待页面完全加载（根据实际页面调整等待时间）
    await driver.sleep(5000);
    
    // 输出捕获到的网络流量
    console.log('捕获的网络流量日志：');
    console.log(JSON.stringify(networkLogs, null, 2));
    
  } finally {
    // 关闭驱动，释放资源
    await driver.quit();
  }
}

// 执行捕获函数
captureNetworkTraffic();

关键说明 #

• CDP会话创建：必须在访问页面之前建立CDP会话并启用Network域，否则会漏掉页面初始化阶段的请求
• 事件选择：除了示例中的两个事件，还可以监听Network.loadingFinished（请求加载完成）、Network.requestServedFromCache（请求命中缓存）等事件，按需选择即可
• 数据处理：你可以根据需求扩展日志内容，比如捕获请求头、响应头、请求体等，CDP事件参数里包含这些详细信息
• 旧API替代：你之前尝试的sendAndGetDevToolsCommands是旧版本的API，现在官方推荐使用CDPSession的send（发送命令）和on（监听事件）方法来实现CDP交互

内容的提问来源于stack exchange，提问作者Ona Mañer Pardina