Chrome CDP 技术实战：从自动化测试到爬虫开发的深度解析

1次阅读

共计 2843 个字符，预计需要花费 8 分钟才能阅读完成。

在浏览器自动化领域，Selenium 一直是主流选择，但它存在明显的性能问题。每次操作都需要通过 WebDriver 协议进行 HTTP 请求 / 响应，这种通信方式带来了较大的开销。特别是在大规模并发场景下，这种架构会导致严重的性能瓶颈。

另一个曾经流行的工具 PhantomJS 已经停止维护多年，其基于 QtWebKit 的引擎无法支持现代 Web 特性。这些限制促使开发者寻找更高效的解决方案，而 Chrome DevTools Protocol (CDP) 正是这样一个原生级别的选择。

CDP 是 Chrome 内置的调试协议，与 Puppeteer 和 Playwright 这些高级封装库不同，它提供了更底层的浏览器控制能力：

Puppeteer 实际上是 CDP 的高级封装，简化了常见操作
Playwright 则进一步跨浏览器，但其 Chrome 实现仍然基于 CDP
直接使用 CDP 可以获得更细粒度的控制，避免不必要的抽象层开销

首先需要启动 Chrome 并启用远程调试端口：

chrome --remote-debugging-port=9222

然后通过 Node.js 连接：

const CDP = require('chrome-remote-interface');

async function connect() {const client = await CDP();
  const {Page, Network} = client;

  // 启用必要的 Domain
  await Page.enable();
  await Network.enable();

  return client;
}

传统截图方式会消耗大量内存，CDP 提供了更高效的方案：

async function captureScreenshot(url) {const client = await connect();
  const {Page} = client;

  await Page.navigate({url});
  await Page.loadEventFired(); // 等待页面完全加载

  const screenshot = await Page.captureScreenshot({
    format: 'jpeg',
    quality: 80
  });

  require('fs').writeFileSync('screenshot.jpg', Buffer.from(screenshot.data, 'base64'));
  client.close();}

CDP 允许在请求发出前进行修改：

async function interceptRequests() {const client = await connect();
  const {Network} = client;

  await Network.setRequestInterception({patterns: [{ urlPattern: '*'}] });

  Network.requestIntercepted(async ({ interceptionId, request}) => {if (request.url.match(/ads\.example\.com/)) {return Network.continueInterceptedRequest({ interceptionId});
    }

    // 修改 POST 请求体
    if (request.method === 'POST') {
      const postData = {...JSON.parse(request.postData),
        injected: true
      };

      return Network.continueInterceptedRequest({
        interceptionId,
        postData: JSON.stringify(postData)
      });
    }
  });
}

处理 XHR 和 WebSocket 数据需要监听特定事件：

async function monitorDynamicContent() {const client = await connect();
  const {Network} = client;

  Network.responseReceived(({response}) => {if (response.mimeType === 'application/json') {Network.getResponseBody({ requestId: response.requestId})
        .then(({body}) => console.log('XHR Data:', body));
    }
  });

  Network.webSocketFrameReceived(({response}) => {console.log('WebSocket Data:', response.payloadData);
  });
}

心跳机制 ：定期发送 CDP 命令保持连接
重连策略 ：实现指数退避重连算法

function setupHeartbeat(client) {const interval = setInterval(() => {client.send('Browser.getVersion').catch(() => {clearInterval(interval);
      // 触发重连逻辑
    });
  }, 30000);

  return interval;
}

及时移除事件监听器
显式关闭不再使用的会话

async function safeClose(client) {const { Page, Network} = client;

  // 禁用 Domain 并移除监听器
  await Page.disable();
  await Network.disable();

  client.removeAllListeners();
  await client.close();}

每个 Tab 使用独立 CDP 会话
限制并发 Tab 数量

class CDPPool {constructor(maxConnections = 5) {this.semaphore = maxConnections;}

  async acquire() {while (this.semaphore <= 0) {await new Promise(resolve => setTimeout(resolve, 100));
    }
    this.semaphore--;
    return await CDP();}

  release(client) {client.close();
    this.semaphore++;
  }
}

CDP 为浏览器自动化开辟了新可能，但仍有许多值得探索的方向：