Question

我有一个简单的html页面：

<body>
  <h1>This is my sample page</h1>
  <div>This is my sample page content</div>
</body>

和简单的css文件：

div {
  background: red;
  color: white;
}

.aqua {
  color: aqua;
}

h1 {
  color: red;
}

我正在使用puppeteer来获取CSS报道：

const puppeteer = require('puppeteer');

(async() => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.coverage.startCSSCoverage()

  await page.goto('http://localhost:3000', { waitUntil: 'networkidle2' });

  const cssCoverage = await page.coverage.stopCSSCoverage();

  console.log(JSON.stringify(cssCoverage, null, 2));
  await browser.close();
})();

从上面的代码中，我得到的输出如下：

[
  {
    "url": "http://localhost:3000/main.css",
    "ranges": [
      {
        "start": 4,
        "end": 58
      },
      {
        "start": 102,
        "end": 130
      }
    ],
    "text": "    div {\n      background: red;\n      color: white;\n    }\n\n    .aqua {\n      color: aqua;\n    }\n\n    h1 {\n      color: red;\n    }\n"
  }
]

您知道有什么工具/库可以用来很好地可视化我得到的coverage输出吗？

Answer 1

@lusarz我不知道有任何关于p的本地记者。但是，有一个puppeteer-to-istanbul可以生成伊斯坦布尔报告。

如何可视化操纵up的CSS覆盖结果

1 个答案: