Skip to content

Instantly share code, notes, and snippets.

@mems

mems/Code coverage.md

Last active September 27, 2022 00:41
Show Gist options
  • Save mems/e0abef5dc3fb65c46253be918424a76f to your computer and use it in GitHub Desktop.
Save mems/e0abef5dc3fb65c46253be918424a76f to your computer and use it in GitHub Desktop.
Download ZIP
Web frontend code coverage
Raw
Code coverage.md

Every line of code we write today will end up as someone’s legacy code.

Everything that you write is going to disappears some day

RUM Code coverage, chose a 1h timeframe (per day) where 1% traffic run that the test

JS coverage

FES javascript instrimentation visualization

Create babel plugin that inject in code with visitors for functions and control flow (loops and switchs): Function, IfStatement, (Terminatorless, SwitchCase, Loop, TryStatement)

Or as standalone tool:

Other:

CSS coverage

Aka unused CSS RUM

Implementation

Can't support easily CSSOM changes

Parse + generate result client side (use web worker):

  1. get CSSOM (for external and inlined stylesheets) from DOM (see step 4)
  2. download CSS + map
  3. parse stylesheet to CSSOM: ruleset, selectors, values, etc. (for results from step 1 and 2)
  4. find which rules/properties has been ignored by the browser (compare results from step 3)
  5. apply it to a virtual DOM
  6. apply document updates to the virtual DOM based on MutationObserver (for added or removed external and inlined style sheets too, see steps 1, 2 and 3)
  7. apply source map
  8. generate LCOV report + send to server (navigator.sendBeacon()) with generated version (git commit hash)

Server side:

  1. merge reports https://github.com/mweibel/lcov-result-merger https://gist.github.com/xseignard/5420661
  2. apply later changes (commits diffs, in that case, the final report should used carefully)

Based on Webdev tools code (Firefox / Chrome):

An other method to detect ruleset usage is to inject a rarely used property with a custom value and get style with void selector (could be enabled and disabled synchronously): voice-family: "my custom value" (could be also font-family, content, quotes but could add layout impact). This method could be hard to implement if the stylesheet use attribute selectors (should detect which element or its parent has attribute change and list which attribute changes to "listen") It could also use a tracker image with some properties (CSS background or content property)) to direct tracking element but generate too much traffic (each document elements and pseudo element call a beacon).

Some tips, tricks, etc.:

Libs and tools:

Similar tools

Code coverage in IDE

In Intellij IDEA/WebStorm/PHPStorm:

In Visual Studio Code:

In Visual Studio:

LCOV

Other data format

Aka custom data format

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment