What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Start CSS coverage on the Puppeteer Page before the navigation or interactions you want to measure, then call page.coverage.stopCSSCoverage() after those actions. The stop method returns stylesheet reports containing CSS text and usage ranges.
Start collection before the page actions you want to measure
Install Puppeteer in your project if needed, then use its documented sequence: launch a browser, create a page, start CSS coverage, navigate, exercise relevant states, and stop coverage.
As an Amazon Associate I earn from qualifying purchases.
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.coverage.startCSSCoverage();
await page.goto('https://example.com');
// Exercise the page states whose CSS usage you want to capture.
const cssCoverage = await page.coverage.stopCSSCoverage();
console.log(cssCoverage);
} finally {
await browser.close();
}The official API reference labels this method in Puppeteer 25.10.0 and gives its signature as startCSSCoverage(options?: CSSCoverageOptions): Promise<void>. The returned promise resolves when coverage has started. See the startCSSCoverage API reference and the Coverage class reference.
Stop coverage and understand the reports
After navigation and the interactions you want included, await page.coverage.stopCSSCoverage(). It resolves to an array of stylesheet coverage reports. Each report includes stylesheet text and ranges describing used portions. The stopCSSCoverage reference documents the result type.
#1 Best Overall
Puppeteer’s example calculates used bytes by adding each range’s end - start - 1 and dividing that sum by the total stylesheet text length. This is a byte-based example calculation, not a universal measure of stylesheet quality or page performance.
const totalBytes = cssCoverage.reduce(
(sum, entry) => sum + entry.text.length,
0,
);
const usedBytes = cssCoverage.reduce(
(sum, entry) =>
sum + entry.ranges.reduce((entrySum, range) =>
entrySum + range.end - range.start - 1,
0),
0,
);
const usedPercentage = totalBytes === 0
? 0
: (usedBytes / totalBytes) * 100;
console.log({ totalBytes, usedBytes, usedPercentage });Choose the navigation reset behavior deliberately
startCSSCoverage() accepts an optional resetOnNavigation setting, which defaults to true. The documented default is useful to know when a test navigates between pages: do not assume one capture automatically represents accumulated CSS use across multiple navigations. The available references establish the default, but do not establish that setting it to false guarantees retained data across navigations. If you need results for a particular page state, collect and stop around that state explicitly.
Rank #2
Know what CSS coverage can miss
Puppeteer’s Coverage class documentation states: “CSS Coverage doesn’t include dynamically injected style tags without sourceURLs.” A report therefore should not be treated as a complete inventory of every CSS rule present dynamically at runtime. If your application injects styles, interpret the returned ranges with that limitation in mind.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Exporting to Istanbul
If your next step requires Istanbul-compatible output, Puppeteer points to puppeteer-to-istanbul. It is an optional downstream conversion path; it is not required to start or stop CSS coverage.
Rank #3
Troubleshooting common coverage issues
- The report is empty or smaller than expected: confirm
startCSSCoverage()completed before the navigation or interactions under test, and that you stopped only after exercising the relevant states. - Coverage from dynamic styles is missing: Puppeteer’s documented limitation excludes dynamically injected style tags without
sourceURLs. - Results appear to reset after a navigation: the default for
resetOnNavigationistrue. Check the option and capture boundaries rather than assuming coverage accumulates across navigations. - The used percentage looks like a performance score: it is only the documented byte-range calculation; it does not by itself measure stylesheet quality or page performance.
Or skip the browser setup
If you need a screenshot rather than CSS-usage ranges, ScreenshotNeo offers a one-request website screenshot API. It is a different tool: it captures an image or PDF, not Puppeteer CSS coverage. One GET request looks like this:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation. It accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in headers. An MCP server provides screenshot tools for AI agents, and the free plan includes 1,000 shots per month with no card required; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo free to try 1,000 screenshots a month with no card.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
