使用 puppeteer 来使用 CSS @media 规则答案

【问题标题】：Using puppeteer to get used CSS @media rules使用 puppeteer 来使用 CSS @media 规则
【发布时间】：2019-11-07 11:51:14
【问题描述】：

我编写了一个小节点应用程序，它将使用 puppeteer 和 Headless Chrome 来抓取网站使用的 CSS。

它很好用，除了一件事：它没有得到 @media 规则？

const puppeteer = require('puppeteer');
const util = require('util');
const fs = require("fs");

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.coverage.startCSSCoverage();
 await page.goto('http://localhost');
 await page.setViewport({width  : 320, height : 640});
 const css_coverage = await page.coverage.stopCSSCoverage();
 console.log(util.inspect(css_coverage, { showHidden: false, depth: null }));
 await browser.close();

let final_css_bytes = '';
let total_bytes = 0;
let used_bytes = 0;

for (const entry of css_coverage) {
  final_css_bytes = "";

  total_bytes += entry.text.length;
  for (const range of entry.ranges) {
    used_bytes += range.end - range.start - 1;
    final_css_bytes += entry.text.slice(range.start, range.end) + '\n';
  }

  filename = entry.url.split('/').pop();

  fs.writeFile('./'+filename, final_css_bytes, error => {
    if (error) {
      console.log('Error creating file:', error);
    } else {
      console.log('File saved');
    }
  });
}
})();

有谁知道为什么@media 规则不包含在最终输出中，而页面有很多？

【问题讨论】：

标签： javascript css node.js puppeteer google-chrome-headless

【解决方案1】：

我相信这是铬本身的行为。如果您检查了 chrome 开发工具的代码覆盖率，使用的 css 将不包含媒体查询的定义。只有实际的选择器可用。

这同样适用于字体和关键帧。甚至还有一个 issue in chromium 用于 font-face。

要提取页面中使用的 css，您可以查看 minimalcss 之类的内容

【讨论】：

【解决方案2】：

我将此报告为 Chrome 中的一个错误，并已移至 Chromium：

https://bugs.chromium.org/p/chromium/issues/detail?id=983887

希望很快有一天会添加此功能。

【讨论】：