寻求仅基于浏览器的JavaScript mocha/chai/sinon代码覆盖率工具

Great question—totally get needing a solution that works entirely in the browser without relying on Node.js. I’ve dug into this before, so here are practical options you can use right away:

1. Chrome DevTools Coverage Panel (Built-In, No Extra Tools) #

This is the easiest option if you’re using Chrome or Edge. It’s fully browser-native and requires zero setup:

• Open DevTools with F12 or Ctrl+Shift+I (Windows/Linux) / Cmd+Opt+I (Mac)
• If you don’t see the Coverage tab, click the three-dot menu in the top-right → More tools → Coverage
• Click the red record button to start tracking coverage
• Interact with your web app or run your test cases
• Stop recording, and you’ll see a breakdown of executed vs. unexecuted JS (and CSS) code. Click any file to view exactly which lines/blocks were hit.

2. Browser-Friendly Coverage Libraries #

If you need to integrate coverage tracking into a browser-only test suite (like using QUnit or Jasmine without Node), you can use instrument libraries that work directly in the browser:

• Istanbul Browser Builds: You can include the istanbul-lib-instrument browser bundle in your page. It lets you instrument your JS code dynamically in the browser, then exposes coverage data via the global __coverage__ variable. You can log this variable or export it as JSON to analyze later.
• Simple Custom Instrumentation: For basic needs, you can write a lightweight wrapper. Use a browser-based AST parser like acorn to parse your code, inject counter variables into functions/blocks, then tally those counters after running your code to calculate coverage percentages.

3. Browser-Only Test Frameworks with Coverage Plugins #

Some pure-browser test tools have built-in or plugin-based coverage support:

• QUnit: There are community plugins that add coverage tracking using browser-side instrumentation, no Node needed.
• Mocha (Browser Build): Combine the browser version of Mocha with a coverage library like the Istanbul browser bundle to track coverage during test runs.

Each option has tradeoffs: DevTools is best for quick debugging, while library-based approaches give you more control if you need to automate or customize coverage reporting.

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