如何在Puppeteer中编程调用Chrome Dev Tools API

基础支持说明 #

Puppeteer 完全支持编程调用 Chrome DevTools Protocol（简称 CDP，即你所说的 Chrome Dev Tools API），它本身所有的页面操作、元素定位、网络拦截等原生能力，底层都是基于 CDP 接口封装实现的。你可以通过 Puppeteer 内置的 page.createCDPSession() 方法创建独立的 CDP 会话，直接调用所有官方公开的 CDP 接口实现自定义需求。

场景1：获取指定元素的 XPath #

你可以结合页面上下文执行逻辑快速拿到目标元素的完整 XPath，也可以完全通过 CDP 接口实现，参考可运行代码示例：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  await page.goto('https://example.com'); // 替换为你的目标页面地址

  // 定位目标元素，示例定位页面的h1标签
  const targetEle = await page.$('h1');

  // 在页面上下文执行XPath生成逻辑
  const eleXPath = await page.evaluate((ele) => {
    function generateXPath(node) {
      if (node.id) return `//*[@id="${node.id}"]`;
      if (node === document.body) return '/html/body';
      
      let sameTagCount = 0;
      const siblings = node.parentNode.childNodes;
      for (let i = 0; i < siblings.length; i++) {
        const sibling = siblings[i];
        if (sibling === node) {
          return `${generateXPath(node.parentNode)}/${node.tagName.toLowerCase()}[${sameTagCount + 1}]`;
        }
        if (sibling.nodeType === 1 && sibling.tagName === node.tagName) {
          sameTagCount++;
        }
      }
    }
    return generateXPath(ele);
  }, targetEle);

  console.log('目标元素XPath为：', eleXPath);
  await browser.close();
})();

场景2：实现 CSS Overview 的 Capture Overview 能力 #

DevTools 自带的 CSS Overview 是 DevTools 前端层基于 CDP 基础接口封装的上层功能，没有单独的一键调用 CDP 接口，但你可以通过 CDP 的 DOM、CSS 域的基础接口复现全量采集逻辑，核心实现参考代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  await page.goto('https://example.com'); // 替换为你的目标页面地址

  // 创建CDP会话，开启DOM、CSS域权限
  const cdpClient = await page.createCDPSession();
  await cdpClient.send('DOM.enable');
  await cdpClient.send('CSS.enable');

  // 获取页面全量DOM节点
  const { root } = await cdpClient.send('DOM.getDocument', { depth: -1, pierce: true });
  const allElementNodes = [];
  // 递归遍历所有元素节点
  function traverseDom(node) {
    if (node.nodeType === 1) allElementNodes.push(node);
    if (node.children) node.children.forEach(traverseDom);
  }
  traverseDom(root);

  // 初始化统计容器，可按需扩展更多统计维度
  const colorStatistics = new Map();
  const fontSizeStatistics = new Map();
  const fontFamilyStatistics = new Map();

  // 逐个采集元素计算样式并统计
  for (const node of allElementNodes) {
    const { computedStyle } = await cdpClient.send('CSS.getComputedStyleForNode', {
      nodeId: node.nodeId
    });
    // 统计颜色
    const textColor = computedStyle.find(item => item.name === 'color')?.value;
    if (textColor) colorStatistics.set(textColor, (colorStatistics.get(textColor) || 0) + 1);
    // 统计字体大小
    const fontSize = computedStyle.find(item => item.name === 'font-size')?.value;
    if (fontSize) fontSizeStatistics.set(fontSize, (fontSizeStatistics.get(fontSize) || 0) + 1);
    // 统计字体族
    const fontFamily = computedStyle.find(item => item.name === 'font-family')?.value;
    if (fontFamily) fontFamilyStatistics.set(fontFamily, (fontFamilyStatistics.get(fontFamily) || 0) + 1);
    // 其余CSS Overview展示的未使用样式、对比度、媒体查询等维度，均可按照相同逻辑扩展采集
  }

  // 输出统计结果
  console.log('页面颜色统计：', Object.fromEntries(colorStatistics));
  console.log('页面字体大小统计：', Object.fromEntries(fontSizeStatistics));
  console.log('页面字体族统计：', Object.fromEntries(fontFamilyStatistics));

  await browser.close();
})();

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