October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsPC HealthRecommendedCrashes, freezes, slowdowns? Check your PC nowSpot repairable issues before they interrupt work.Check PCOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
World desk5 min

How to Measure JavaScript and CSS Coverage with Puppeteer

A practical Puppeteer guide to measuring JavaScript and CSS coverage across page loads and interactions, calculating used bytes, and understanding what the reports omit.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Start Puppeteer’s JavaScript and CSS coverage collectors before the page load or interaction you want to measure, stop them afterward, then compare the returned used ranges with the reported source text. The resulting percentage describes only the code observed during that particular run—not universal coverage of the whole application.

Measure JavaScript and CSS coverage in Puppeteer

This runnable example follows Puppeteer’s documented combined calculation. It starts both collectors before navigation, stops them after the page load and any actions you choose, then calculates the share of reported source-text bytes covered by the returned ranges. The zero-total check avoids dividing by zero.

const page = await browser.newPage();

await Promise.all([
  page.coverage.startJSCoverage(),
  page.coverage.startCSSCoverage(),
]);

await page.goto('https://example.com');
// Perform the interactions that define the measurement window here.

const [jsCoverage, cssCoverage] = await Promise.all([
  page.coverage.stopJSCoverage(),
  page.coverage.stopCSSCoverage(),
]);

const entries = [...jsCoverage, ...cssCoverage];
let totalBytes = 0;
let usedBytes = 0;

for (const entry of entries) {
  totalBytes += entry.text.length;
  for (const range of entry.ranges) {
    usedBytes += range.end - range.start - 1;
  }
}

const usedPercent = totalBytes === 0 ? 0 : (usedBytes / totalBytes) * 100;
console.log(`Bytes used: ${usedPercent}%`);

Puppeteer describes its Coverage class as gathering information about parts of JavaScript and CSS used by a page. The byte calculation is a derived percentage, not a benchmark or a claim that the application is fully covered. See the Puppeteer Coverage API.

Choose the measurement window

Initial page-load coverage

Start both collectors before page.goto(), as in the example. Stop them after navigation has completed and before closing the page. This measures code observed during that load. Puppeteer’s documentation labels its example result “initially executed code.”

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Coverage during interactions

For interaction coverage, start the collectors before the actions that matter, run the same defined sequence each time, and stop after it finishes. For example, exercise a menu, submit a form, and open a dialog only if those actions reflect the behavior you intend to measure. Record the pages and actions alongside the percentage; changing the sequence changes what code can be observed.

Journeys across multiple pages

Do not rely on resetOnNavigation: false to preserve all JavaScript coverage when navigating. Chrome may discard the previous page’s execution environment and coverage data. For a multi-page journey, stop and collect coverage before leaving each page, start new collectors on the next page, and combine the returned reports for your later calculation. Puppeteer documents this caveat in its JavaScript coverage options.

Configure what Puppeteer reports

Options control the detail and scripts included in the results. Defaults listed below are those in Puppeteer’s API documentation; check the API for the version installed in your project, since documentation can change.

Collector or option Documented default What to change it for
JavaScript resetOnNavigation true Controls reset behavior on navigation; setting it to false does not guarantee data survives a page change.
JavaScript reportAnonymousScripts false Set to true to include anonymous scripts created by eval or new Function. Generated URLs ordinarily begin debugger://VM, unless a sourceURL comment supplies a URL.
JavaScript includeRawScriptCoverage false Set to true when you need raw V8 script coverage in addition to the regular report.
JavaScript useBlockCoverage true Set to false for function-level rather than block-level coverage.
CSS resetOnNavigation true Controls CSS coverage reset behavior on navigation.

For the available JavaScript settings, see startJSCoverage() and the JSCoverageOptions interface. CSS collector options are documented at startCSSCoverage().

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Understand omissions and interpret the percentage

  • Anonymous JavaScript scripts are omitted by default. Enable reportAnonymousScripts if they matter to your measurement.
  • CSS coverage omits dynamically injected style tags without sourceURL comments.
  • The result depends on the pages, actions, settings, and reports included in the run. It does not prove that every runtime-generated script or style was accounted for.

The percentage is calculated as used bytes divided by total reported source-text bytes, multiplied by 100. Puppeteer’s documented range calculation uses range.end - range.start - 1 for each range and entry.text.length for the entry’s total. That is the documented method; do not describe its output as a general application coverage guarantee.

Use coverage output with Istanbul

If your workflow already uses Istanbul tooling, Puppeteer’s Coverage documentation points to puppeteer-to-istanbul for converting reports into an Istanbul-consumable form. Conversion is optional; it is not needed to calculate the basic used-byte percentage above. See the Coverage documentation.

Troubleshoot common coverage problems

  • The report is empty or the percentage is zero: Check that both collectors started before the relevant page activity and stopped afterward. Confirm navigation succeeded and your chosen actions ran before stopping.
  • Coverage disappears between pages: Collect and stop coverage before navigating away, then start a fresh collection on the next page. Merge those reports instead of assuming resetOnNavigation: false retains the previous JavaScript environment.
  • Code created with eval is missing: Start JavaScript coverage with reportAnonymousScripts: true; anonymous scripts are excluded by default.
  • Dynamically added CSS is missing: CSS coverage omits dynamically injected style tags without sourceURL. Treat the result as coverage of returned entries, not a complete inventory of runtime styles.
  • The number changes between runs: Make navigation and interactions repeatable, and keep the same collector options. A changed action sequence can execute different code.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Or skip the browser setup:

For screenshots rather than coverage reports, ScreenshotNeo is a website screenshot API and MCP server. It does not measure JavaScript or CSS coverage; Puppeteer is the method above for that task. ScreenshotNeo offers a one-request screenshot capture:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webp

See the ScreenshotNeo API documentation. It accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; response headers identify the page verdict and billing status. Its MCP server lets AI agents using Claude, Cursor, or any MCP client use screenshot tools. The Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 shots.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.

Best Value
The SQL Programming Language: .
  • Used Book in Good Condition

Frequently Asked Questions

Can I measure coverage for only one interaction?

Yes. Start both collectors immediately before that interaction, run it, then stop them; the returned report reflects the measured window.

Can Puppeteer export coverage for Istanbul?

Puppeteer’s Coverage documentation points to puppeteer-to-istanbul as an optional conversion workflow.

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.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Shenzhen desk3 min
    HONOR Expands Beyond Smartphones With Humanoid Robot RevealHONOR said it unveiled its first humanoid robot at MWC 2026 and named shopping assistance, workplace inspections, and supportive companionship as intended uses. Later Robotics D1 claims and a reported…
Recommended PC Tool
Recommended PC Tool
Windows Errors? Fix Them Before They SpreadFree repair scan
Outdated Drivers Are Slowing You DownFree scan - exact matches

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.