如何利用Puppeteer DevTools Protocol查找元素未匹配的媒体查询？

要搞定这个需求——通过指定的nodeId定位元素，找出它当前没应用但调整尺寸后能生效的媒体查询，得结合DevTools Protocol的CSS和DOM域API来操作，具体步骤如下：

1. 启用必要的DevTools域 #

连接页面后，先把CSS和DOM域开启，否则无法调用相关API：

await client.send('DOM.enable');
await client.send('CSS.enable');

2. 获取页面所有媒体查询 #

调用CSS.getMediaQueries拿到页面中所有已解析的媒体查询集合：

const { mediaQueries } = await client.send('CSS.getMediaQueries');

3. 监听媒体查询匹配状态变化 #

绑定CSS.mediaQueryResultChanged事件，用来记录媒体查询的匹配状态变更：

const matchedQueries = new Map();
client.on('CSS.mediaQueryResultChanged', (params) => {
  matchedQueries.set(params.mediaQueryId, params.matches);
});

4. 获取目标元素的当前尺寸 #

用已知的nodeId调用DOM.getBoxModel，拿到元素当前的盒模型数据，确定它的现有宽高：

const { model } = await client.send('DOM.getBoxModel', { nodeId });
const currentWidth = model.width;
const currentHeight = model.height;

5. 模拟元素尺寸（或视口）变化 #

根据需求修改元素尺寸，比如改成移动端适配宽度，触发媒体查询重新计算：

// 示例：将元素宽度修改为320px
await client.send('CSS.setStyleTexts', {
  edits: [{
    nodeId,
    text: `width: 320px;`,
    range: { startLine: 0, startColumn: 0, endLine: 0, endColumn: 0 }
  }]
});
// 强制页面重排重绘，确保媒体查询状态更新
await client.send('DOM.forceLayout');

如果是依赖视口的媒体查询，就改用Emulation.setDeviceMetricsOverride调整视口大小，而非修改元素尺寸。

6. 筛选目标媒体查询 #

遍历所有媒体查询，对比初始状态和修改后的匹配状态，找出那些初始未匹配、修改后匹配的查询，同时验证这些查询的样式确实作用于目标元素：

const targetQueries = [];
for (const mq of mediaQueries) {
  const initialMatch = mq.matches;
  const newMatch = matchedQueries.get(mq.mediaQueryId) ?? mq.matches;
  // 筛选初始未匹配、修改后匹配的查询
  if (!initialMatch && newMatch) {
    // 验证该媒体查询的样式是否影响目标元素
    const { matchedCSSRules } = await client.send('CSS.getMatchedStylesForNode', { nodeId });
    const hasRuleFromMQ = matchedCSSRules.some(rule => rule.origin === 'media' && rule.media === mq.text);
    if (hasRuleFromMQ) {
      targetQueries.push({
        mediaQuery: mq.text,
        mediaQueryId: mq.mediaQueryId
      });
    }
  }
}

收尾操作 #

完成所有步骤后，记得关闭启用的DevTools域，避免资源占用：

await client.send('DOM.disable');
await client.send('CSS.disable');

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