Skip to content

Instantly share code, notes, and snippets.

@nagapavan

nagapavan/Code coverage.md

Forked from mems/Code coverage.md
Created May 23, 2022 04:46
Show Gist options
  • Save nagapavan/f8235f95a6e381d68fc3fd0c9d546e15 to your computer and use it in GitHub Desktop.
Save nagapavan/f8235f95a6e381d68fc3fd0c9d546e15 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @mems mems revised this gist Sep 28, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -69,7 +69,7 @@ It could also use a tracker image with some properties (CSS background or [conte

    Some tips, tricks, etc.:

    - https://codepen.io/mmems/pen/dwWyxv `TreeWalker` performance vs `getElementsByTagName("*")`: `getElementsByTagName` is ~1-2x faster that `TreeWalker`, but don't get text nodes
    - https://codepen.io/mmems/pen/dwWyxv `TreeWalker` performance vs other methods: `TreeWalker` is better (can select text nodes and faster than other methods)
    - first walk the document (elements) or node iterator
    - https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
    - https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator
  2. @mems mems revised this gist Sep 28, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -117,7 +117,7 @@ Libs and tools:
    - [Finding Dead CSS – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts](https://csswizardry.com/2018/01/finding-dead-css/)
    - [Here's the thing about "unused CSS" tools | CSS-Tricks](https://css-tricks.com/heres-the-thing-about-unused-css-tools/)

    ## Similar tools
    ### Similar tools

    - [leeoniya/dropcss: A simple, thorough and fast unused-CSS cleaner](https://github.com/leeoniya/dropcss) - lib use [Fast HTML Parser](https://github.com/taoqf/node-html-parser), [CSSTree](https://github.com/csstree/csstree) et [css-select](https://github.com/fb55/css-select)
    - [Dust-Me Selectors – Add-ons for Firefox](https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/) - `/chrome/content/dustmeselectors.js`: `DustMeSelectors.evaluateSelectors`
  3. @mems mems revised this gist Sep 28, 2021. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@
    RUM Code coverage, chose a 1h timeframe (per day) where 1% traffic run that the test

    ### JS coverage
    ## JS coverage

    FES javascript instrimentation visualization

    @@ -27,11 +27,11 @@ Other:

    - [mattzeunert/FromJS: See where each character on the screen came from in code.](https://github.com/mattzeunert/fromjs)

    ### CSS coverage
    ## CSS coverage

    Aka unused CSS RUM

    #### Implementation
    ### Implementation

    Can't support easily CSSOM changes

    @@ -117,7 +117,7 @@ Libs and tools:
    - [Finding Dead CSS – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts](https://csswizardry.com/2018/01/finding-dead-css/)
    - [Here's the thing about "unused CSS" tools | CSS-Tricks](https://css-tricks.com/heres-the-thing-about-unused-css-tools/)

    ### Similar tools
    ## Similar tools

    - [leeoniya/dropcss: A simple, thorough and fast unused-CSS cleaner](https://github.com/leeoniya/dropcss) - lib use [Fast HTML Parser](https://github.com/taoqf/node-html-parser), [CSSTree](https://github.com/csstree/csstree) et [css-select](https://github.com/fb55/css-select)
    - [Dust-Me Selectors – Add-ons for Firefox](https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/) - `/chrome/content/dustmeselectors.js`: `DustMeSelectors.evaluateSelectors`
    @@ -128,7 +128,7 @@ Libs and tools:
    - [Browser Link - Web Essentials](http://vswebessentials.com/features/browserlink#unused-css)
    - [WebEssentials2015/UnusedCss.js at master · madskristensen/WebEssentials2015](https://github.com/madskristensen/WebEssentials2015/blob/master/EditorExtensions/BrowserLink/UnusedCss/UnusedCss.js)

    ### Code coverage in IDE
    ## Code coverage in IDE

    In Intellij IDEA/WebStorm/PHPStorm:

    @@ -150,7 +150,7 @@ In Visual Studio:
    - [OpenCppCoverage/OpenCppCoverage: OpenCppCoverage is an open source code coverage tool for C++ under Windows.](https://github.com/OpenCppCoverage/OpenCppCoverage)
    - [Testing a Team Services extension and tracking code coverage – ALM | DevOps Rangers](https://blogs.msdn.microsoft.com/visualstudioalmrangers/2016/12/15/testing-a-team-services-extension-and-tracking-code-coverage/)

    ### LCOV
    ## LCOV

    - [cedx/lcov.js: Parse and format LCOV coverage reports, in JavaScript.](https://github.com/cedx/lcov.js)
    - [json2lcov - npm](https://www.npmjs.com/package/json2lcov)
    @@ -161,7 +161,7 @@ In Visual Studio:
    - [Linux Test Project - Coverage » lcov](http://ltp.sourceforge.net/coverage/lcov.php)
    - [davglass/lcov-parse: Simple LCOV file parser](https://github.com/davglass/lcov-parse#readme)

    ### Other data format
    ## Other data format

    Aka custom data format

  4. @mems mems revised this gist Sep 28, 2021. 1 changed file with 7 additions and 10 deletions.
    17 changes: 7 additions & 10 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -31,9 +31,11 @@ Other:

    Aka unused CSS RUM

    #### Implementation

    Can't support easily CSSOM changes

    Parse + generate result client side (use webworker):
    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
    @@ -61,17 +63,10 @@ Based on Webdev tools code (Firefox / Chrome):
    - [1518615 - (dt-rules) \[meta\] Convert the Rules view into React/Redux](https://bugzilla.mozilla.org/show_bug.cgi?id=1518615)
    - [Dependency tree for Bug 1540753](https://bugzilla.mozilla.org/showdependencytree.cgi?id=1540753)

    An other method to detect ruleset usage is to add 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).
    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](https://developer.mozilla.org/en-US/docs/Web/CSS/content))) to direct tracking element but generate too much traffic (each document elements and pseudo element call a beacon).

    - [leeoniya/dropcss: A simple, thorough and fast unused-CSS cleaner](https://github.com/leeoniya/dropcss) - lib use [Fast HTML Parser](https://github.com/taoqf/node-html-parser), [CSSTree](https://github.com/csstree/csstree) et [css-select](https://github.com/fb55/css-select)

    - [Finding Dead CSS – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts](https://csswizardry.com/2018/01/finding-dead-css/)
    - [Here's the thing about "unused CSS" tools | CSS-Tricks](https://css-tricks.com/heres-the-thing-about-unused-css-tools/)

    ### Implementation

    Some tips, tricks, etc.:

    - https://codepen.io/mmems/pen/dwWyxv `TreeWalker` performance vs `getElementsByTagName("*")`: `getElementsByTagName` is ~1-2x faster that `TreeWalker`, but don't get text nodes
    @@ -119,10 +114,12 @@ Libs and tools:
    - [Chrome DevTools CSS Overview Devtool panel](https://github.com/ChromeDevTools/devtools-frontend/blob/8071e53198a1e34246a53506961f05a39b6a3f65/front_end/panels/css_overview/CSSOverviewPanel.ts#L144-L148) - [CSSOverviewModel.js](https://github.com/ChromeDevTools/devtools-frontend/blob/fbbf981a3401a2b78632f33a302726729b46870f/front_end/css_overview/CSSOverviewModel.js#L248-L331)
    - [GitHub - painty/CSS-Used-ChromeExt: Get all css rules used by the selected DOM and its children.](https://github.com/painty/CSS-Used-ChromeExt)
    - [Firefox DevTool style inspector show unused properties](https://searchfox.org/mozilla-central/diff/3fa5cc437a4937c621ea068ba5dc246f75831633/devtools/client/inspector/rules/models/element-style.js#79-87) - [Why isn't this CSS doing anything? - YouTube](https://www.youtube.com/watch?v=O3DAm82vIvU)
    - [Finding Dead CSS – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts](https://csswizardry.com/2018/01/finding-dead-css/)
    - [Here's the thing about "unused CSS" tools | CSS-Tricks](https://css-tricks.com/heres-the-thing-about-unused-css-tools/)

    ### Similar tools

    - [leeoniya/dropcss: A simple, thorough and fast unused-CSS cleaner](https://github.com/leeoniya/dropcss)
    - [leeoniya/dropcss: A simple, thorough and fast unused-CSS cleaner](https://github.com/leeoniya/dropcss) - lib use [Fast HTML Parser](https://github.com/taoqf/node-html-parser), [CSSTree](https://github.com/csstree/csstree) et [css-select](https://github.com/fb55/css-select)
    - [Dust-Me Selectors – Add-ons for Firefox](https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/) - `/chrome/content/dustmeselectors.js`: `DustMeSelectors.evaluateSelectors`
    - [purifycss/purifycss: Remove unused CSS. Also works with single-page apps.](https://github.com/purifycss/purifycss)
    - [uncss/uncss: Remove unused styles from CSS](https://github.com/uncss/uncss)
  5. @mems mems revised this gist Sep 28, 2021. 1 changed file with 50 additions and 13 deletions.
    63 changes: 50 additions & 13 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -70,6 +70,56 @@ It could also use a tracker image with some properties (CSS background or [conte
    - [Finding Dead CSS – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts](https://csswizardry.com/2018/01/finding-dead-css/)
    - [Here's the thing about "unused CSS" tools | CSS-Tricks](https://css-tricks.com/heres-the-thing-about-unused-css-tools/)

    ### Implementation

    Some tips, tricks, etc.:

    - https://codepen.io/mmems/pen/dwWyxv `TreeWalker` performance vs `getElementsByTagName("*")`: `getElementsByTagName` is ~1-2x faster that `TreeWalker`, but don't get text nodes
    - first walk the document (elements) or node iterator
    - https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
    - https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator
    - shared workers or web worker with sessionStorage
    - https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker
    - https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API
    - https://developer.mozilla.org/en-US/docs/Web/API/MessagePort
    - wait for idle? https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
    - mutation observer support: IE11, fallback to [Mutation event](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events) but with setTimeout
    - support update that impact pseudo classes:
    - [`:empty`](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty)
    - [`:blank`](https://developer.mozilla.org/en-US/docs/Web/CSS/:blank)
    - [`:-moz-only-whitespace`](https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-only-whitespace)
    - and other pseudo classes and elements
    - [Mutation Observer notes - QuirksBlog](https://www.quirksmode.org/blog/archives/2017/11/mutation_observ.html)
    - [javascript - reliabilty of 'isConnected' field in dom node - Stack Overflow](https://stackoverflow.com/questions/37588326/reliabilty-of-isconnected-field-in-dom-node)
    - [jsdom/default-stylesheet.js at master · jsdom/jsdom](https://github.com/jsdom/jsdom/blob/master/lib/jsdom/browser/default-stylesheet.js) - jsdom use symbol-tree to store tree nodes
    - https://github.com/jsdom/jsdom/blob/master/lib/jsdom/utils.js#L58-L67 - mixin class with interface implementation
    - [CSS @namespace](https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace)
    - [WorkerDOM: JavaScript Concurrency and the DOM - Slide 52](https://speakerdeck.com/cramforce/workerdom-javascript-concurrency-and-the-dom?slide=52) - Convert DOM tree to minimal format (use string dictionary and references)

    Libs and tools:

    - [puppeteer/api.md at master · GoogleChrome/puppeteer](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-coverage) - [Chrome DevTools Protocol Viewer - Profiler](https://chromedevtools.github.io/devtools-protocol/tot/Profiler#method-startPreciseCoverage)
    - [DevTools: allow exporting code coverage data. (I0360d0de) · Gerrit Code Review](https://chromium-review.googlesource.com/c/chromium/src/+/1370862) - Chrome devtools can export Coverage data (as JSON)
    - [istanbuljs/puppeteer-to-istanbul: given coverage information output by puppeteer's API output a format consumable by Istanbul reports](https://github.com/istanbuljs/puppeteer-to-istanbul)
    - [istanbuljs/v8-to-istanbul: convert from v8 coverage format to istanbul's format](https://github.com/istanbuljs/v8-to-istanbul#readme)
    - [istanbul/coverage.json.md at master · gotwarlost/istanbul](https://github.com/gotwarlost/istanbul/blob/master/coverage.json.md)
    - [717195 - Ability to export code coverage results for use by analysis tools - chromium - Monorail](https://bugs.chromium.org/p/chromium/issues/detail?id=717195)
    - [coverage/ - Code Search](https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/coverage/?q=Coverage+DevTools+&sq=package:chromium&dr=CSs)
    - [Feature Request: LCOV or Istanbul format code coverage · Issue #1768 · GoogleChrome/puppeteer](https://github.com/GoogleChrome/puppeteer/issues/1768)
    - [ampproject/worker-dom: The same DOM API and Frameworks you know, but in a Web Worker.](https://github.com/ampproject/worker-dom)
    - [csstree/csstree: A tool set for working with CSS including fast detailed parser, walker, generator and lexer based on W3C specs and browser implementations](https://github.com/csstree/csstree)
    - [Parsel: A tiny, permissive CSS selector parser](https://projects.verou.me/parsel/?selector=%23foo+%3E+.bar+%2B+div.k1.k2+%5Bid%3D%27baz%27%5D%3Ahello%282%29%3Anot%28%3Awhere%28%23yolo%29%29%3A%3Abefore)
    - [fgnass/domino: Server-side DOM implementation based on Mozilla's dom.js](https://github.com/fgnass/domino)
    - [jsdom/jsdom: A JavaScript implementation of the WHATWG DOM and HTML standards, for use with node.js](https://github.com/jsdom/jsdom)
    - [domino/select.js at master · fgnass/domino](https://github.com/fgnass/domino/blob/master/lib/select.js) - [chjj/zest: An absurdly fast CSS selector engine.](https://github.com/chjj/zest)
    - [jsakas/CSSStyleDeclaration: A work-a-like for the CSSStyleDeclaration in https://github.com/NV/CSSOM, but with CSS2Properties interface](https://github.com/jsakas/CSSStyleDeclaration)
    - [rafaelw/mutation-summary: A JavaScript library that makes observing changes to the DOM easy](https://github.com/rafaelw/mutation-summary)
    - [LeaVerou/rework-utils: Utilities to explore ASTs generated by the Rework CSS parser. Originally written for the Web Almanac.](https://github.com/leaverou/rework-utils)
    - [reworkcss/css: CSS parser / stringifier for Node.js](https://github.com/reworkcss/css)
    - [Chrome DevTools CSS Overview Devtool panel](https://github.com/ChromeDevTools/devtools-frontend/blob/8071e53198a1e34246a53506961f05a39b6a3f65/front_end/panels/css_overview/CSSOverviewPanel.ts#L144-L148) - [CSSOverviewModel.js](https://github.com/ChromeDevTools/devtools-frontend/blob/fbbf981a3401a2b78632f33a302726729b46870f/front_end/css_overview/CSSOverviewModel.js#L248-L331)
    - [GitHub - painty/CSS-Used-ChromeExt: Get all css rules used by the selected DOM and its children.](https://github.com/painty/CSS-Used-ChromeExt)
    - [Firefox DevTool style inspector show unused properties](https://searchfox.org/mozilla-central/diff/3fa5cc437a4937c621ea068ba5dc246f75831633/devtools/client/inspector/rules/models/element-style.js#79-87) - [Why isn't this CSS doing anything? - YouTube](https://www.youtube.com/watch?v=O3DAm82vIvU)

    ### Similar tools

    - [leeoniya/dropcss: A simple, thorough and fast unused-CSS cleaner](https://github.com/leeoniya/dropcss)
    @@ -103,19 +153,6 @@ In Visual Studio:
    - [OpenCppCoverage/OpenCppCoverage: OpenCppCoverage is an open source code coverage tool for C++ under Windows.](https://github.com/OpenCppCoverage/OpenCppCoverage)
    - [Testing a Team Services extension and tracking code coverage – ALM | DevOps Rangers](https://blogs.msdn.microsoft.com/visualstudioalmrangers/2016/12/15/testing-a-team-services-extension-and-tracking-code-coverage/)

    ### Libs and tools

    - [puppeteer/api.md at master · GoogleChrome/puppeteer](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-coverage) - [Chrome DevTools Protocol Viewer - Profiler](https://chromedevtools.github.io/devtools-protocol/tot/Profiler#method-startPreciseCoverage)
    - [DevTools: allow exporting code coverage data. (I0360d0de) · Gerrit Code Review](https://chromium-review.googlesource.com/c/chromium/src/+/1370862) - Chrome devtools can export Coverage data (as JSON)
    - [istanbuljs/puppeteer-to-istanbul: given coverage information output by puppeteer's API output a format consumable by Istanbul reports](https://github.com/istanbuljs/puppeteer-to-istanbul)
    - [istanbuljs/v8-to-istanbul: convert from v8 coverage format to istanbul's format](https://github.com/istanbuljs/v8-to-istanbul#readme)
    - [istanbul/coverage.json.md at master · gotwarlost/istanbul](https://github.com/gotwarlost/istanbul/blob/master/coverage.json.md)
    - [717195 - Ability to export code coverage results for use by analysis tools - chromium - Monorail](https://bugs.chromium.org/p/chromium/issues/detail?id=717195)
    - [coverage/ - Code Search](https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/coverage/?q=Coverage+DevTools+&sq=package:chromium&dr=CSs)
    - [Feature Request: LCOV or Istanbul format code coverage · Issue #1768 · GoogleChrome/puppeteer](https://github.com/GoogleChrome/puppeteer/issues/1768)

    - [csstree/csstree: A tool set for working with CSS including fast detailed parser, walker, generator and lexer based on W3C specs and browser implementations](https://github.com/csstree/csstree)

    ### LCOV

    - [cedx/lcov.js: Parse and format LCOV coverage reports, in JavaScript.](https://github.com/cedx/lcov.js)
  6. @mems mems revised this gist Sep 28, 2021. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -125,4 +125,10 @@ In Visual Studio:
    - [css-coverage - npm](https://www.npmjs.com/package/css-coverage)
    - [gotwarlost/istanbul: Yet another JS code coverage tool that computes statement, line, function and branch coverage with module loader hooks to transparently add coverage when running tests. Supports all JS coverage use cases including unit tests, server side functional tests and browser tests. Built for scale.](https://github.com/gotwarlost/istanbul)
    - [Linux Test Project - Coverage » lcov](http://ltp.sourceforge.net/coverage/lcov.php)
    - [davglass/lcov-parse: Simple LCOV file parser](https://github.com/davglass/lcov-parse#readme)
    - [davglass/lcov-parse: Simple LCOV file parser](https://github.com/davglass/lcov-parse#readme)

    ### Other data format

    Aka custom data format

    - [kriszyp/msgpackr: Ultra-fast MessagePack implementation with extension for record and structural cloning / msgpack.org\[JavaScript/NodeJS\]](https://github.com/kriszyp/msgpackr)
  7. @mems mems revised this gist Jun 7, 2019. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -59,6 +59,7 @@ Based on Webdev tools code (Firefox / Chrome):
    - https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/elements/ComputedStyleModel.js
    - https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/elements/StylesSidebarPane.js
    - [1518615 - (dt-rules) \[meta\] Convert the Rules view into React/Redux](https://bugzilla.mozilla.org/show_bug.cgi?id=1518615)
    - [Dependency tree for Bug 1540753](https://bugzilla.mozilla.org/showdependencytree.cgi?id=1540753)

    An other method to detect ruleset usage is to add 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")
  8. @mems mems revised this gist Mar 31, 2019. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -64,6 +64,8 @@ An other method to detect ruleset usage is to add a rarely used property with a
    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](https://developer.mozilla.org/en-US/docs/Web/CSS/content))) to direct tracking element but generate too much traffic (each document elements and pseudo element call a beacon).

    - [leeoniya/dropcss: A simple, thorough and fast unused-CSS cleaner](https://github.com/leeoniya/dropcss) - lib use [Fast HTML Parser](https://github.com/taoqf/node-html-parser), [CSSTree](https://github.com/csstree/csstree) et [css-select](https://github.com/fb55/css-select)

    - [Finding Dead CSS – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts](https://csswizardry.com/2018/01/finding-dead-css/)
    - [Here's the thing about "unused CSS" tools | CSS-Tricks](https://css-tricks.com/heres-the-thing-about-unused-css-tools/)

  9. @mems mems revised this gist Mar 30, 2019. No changes.
  10. @mems mems revised this gist Mar 23, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -69,7 +69,7 @@ It could also use a tracker image with some properties (CSS background or [conte

    ### Similar tools

    - [dropcss/README.md at master · leeoniya/dropcss](https://github.com/leeoniya/dropcss/blob/master/README.md)
    - [leeoniya/dropcss: A simple, thorough and fast unused-CSS cleaner](https://github.com/leeoniya/dropcss)
    - [Dust-Me Selectors – Add-ons for Firefox](https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/) - `/chrome/content/dustmeselectors.js`: `DustMeSelectors.evaluateSelectors`
    - [purifycss/purifycss: Remove unused CSS. Also works with single-page apps.](https://github.com/purifycss/purifycss)
    - [uncss/uncss: Remove unused styles from CSS](https://github.com/uncss/uncss)
  11. @mems mems revised this gist Mar 23, 2019. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -69,6 +69,7 @@ It could also use a tracker image with some properties (CSS background or [conte

    ### Similar tools

    - [dropcss/README.md at master · leeoniya/dropcss](https://github.com/leeoniya/dropcss/blob/master/README.md)
    - [Dust-Me Selectors – Add-ons for Firefox](https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/) - `/chrome/content/dustmeselectors.js`: `DustMeSelectors.evaluateSelectors`
    - [purifycss/purifycss: Remove unused CSS. Also works with single-page apps.](https://github.com/purifycss/purifycss)
    - [uncss/uncss: Remove unused styles from CSS](https://github.com/uncss/uncss)
  12. @mems mems revised this gist Feb 18, 2019. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -23,6 +23,10 @@ Or as standalone tool:

    - [substack/node-falafel: transform the ast on a recursive walk](https://github.com/substack/node-falafel)

    Other:

    - [mattzeunert/FromJS: See where each character on the screen came from in code.](https://github.com/mattzeunert/fromjs)

    ### CSS coverage

    Aka unused CSS RUM
  13. @mems mems revised this gist Feb 15, 2019. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -17,6 +17,7 @@ Create babel plugin that inject in code with visitors for functions and [control
    - [babel-handbook/plugin-handbook.md at master · jamiebuilds/babel-handbook](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#inserting-into-a-container)
    - [@babel/types · Babel](https://babeljs.io/docs/en/next/babel-types.html)
    - [babel-plugin-inject/index.js at master · ialpert/babel-plugin-inject](https://github.com/ialpert/babel-plugin-inject/blob/master/src/index.js) - Example of plugin that replace function call
    - [@babel/helper-module-imports](https://github.com/babel/website/blob/e31f63315229b97eb42b996b785c8fa92e823078/website/versioned_docs/version-7.0.0/helper-module-imports.md) - replace function/property by import via Babel

    Or as standalone tool:

  14. @mems mems revised this gist Feb 12, 2019. 1 changed file with 13 additions and 0 deletions.
    13 changes: 13 additions & 0 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -81,6 +81,19 @@ In Intellij IDEA/WebStorm/PHPStorm:
    - [Webstorm (intellij) coverage integration with the angular cli · Issue #3560 · angular/angular-cli](https://github.com/angular/angular-cli/issues/3560)
    - [Testing JavaScript - Help | IntelliJ IDEA](https://www.jetbrains.com/help/idea/unit-testing-javascript.html)

    In Visual Studio Code:

    - [VSCode LCOV - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=alexdima.vscode-lcov)
    - [Code Coverage - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=markis.code-coverage)
    - [Coverage Gutters - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters)
    - [Automatic Unit Testing in .NET Core plus Code Coverage in Visual Studio Code - Scott Hanselman](https://www.hanselman.com/blog/AutomaticUnitTestingInNETCorePlusCodeCoverageInVisualStudioCode.aspx)

    In Visual Studio:

    - [Code coverage testing - Visual Studio | Microsoft Docs](https://docs.microsoft.com/en-us/visualstudio/test/using-code-coverage-to-determine-how-much-code-is-being-tested?view=vs-2017)
    - [OpenCppCoverage/OpenCppCoverage: OpenCppCoverage is an open source code coverage tool for C++ under Windows.](https://github.com/OpenCppCoverage/OpenCppCoverage)
    - [Testing a Team Services extension and tracking code coverage – ALM | DevOps Rangers](https://blogs.msdn.microsoft.com/visualstudioalmrangers/2016/12/15/testing-a-team-services-extension-and-tracking-code-coverage/)

    ### Libs and tools

    - [puppeteer/api.md at master · GoogleChrome/puppeteer](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-coverage) - [Chrome DevTools Protocol Viewer - Profiler](https://chromedevtools.github.io/devtools-protocol/tot/Profiler#method-startPreciseCoverage)
  15. @mems mems revised this gist Feb 3, 2019. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -53,6 +53,7 @@ Based on Webdev tools code (Firefox / Chrome):
    - https://docs.firefox-dev.tools/getting-started/architecture-overview.html
    - https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/elements/ComputedStyleModel.js
    - https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/elements/StylesSidebarPane.js
    - [1518615 - (dt-rules) \[meta\] Convert the Rules view into React/Redux](https://bugzilla.mozilla.org/show_bug.cgi?id=1518615)

    An other method to detect ruleset usage is to add 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")
  16. @mems mems revised this gist Jan 28, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@ FES javascript instrimentation visualization
    - [Instrument JavaScript code – Roman Liutikov – Medium](https://medium.com/@roman01la/instrument-javascript-code-ed9aca423e2a)
    - [Raiders of the Fast Start: Frontend Performance Archaeology - Perform…](https://www.slideshare.net/KatrinaSylorMiller/raiders-of-the-fast-start-frontend-performance-archaeology-performancenow-conference#94)

    Create babel plugin that inject in code with visitors for functions and [control flow](https://en.wikipedia.org/wiki/Control_flow) (loops and switchs): `Function`, `IfStatement`, (`Terminatorless`, `SwitchCase`, `Loop`, `TryStatement`)
    Create babel plugin that inject in code with visitors for functions and [control flow](https://en.wikipedia.org/wiki/Control_flow) (loops and switchs): [`Function`, `IfStatement`, (`Terminatorless`, `SwitchCase`, `Loop`, `TryStatement`)](https://github.com/babel/babel/tree/master/packages/babel-types/src/definitions)

    - [Plugins · Babel](https://babeljs.io/docs/en/plugins#plugin-development)
    - [babel-handbook/plugin-handbook.md at master · jamiebuilds/babel-handbook](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#inserting-into-a-container)
  17. @mems mems revised this gist Jan 28, 2019. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,6 +11,17 @@ FES javascript instrimentation visualization
    - [Instrument JavaScript code – Roman Liutikov – Medium](https://medium.com/@roman01la/instrument-javascript-code-ed9aca423e2a)
    - [Raiders of the Fast Start: Frontend Performance Archaeology - Perform…](https://www.slideshare.net/KatrinaSylorMiller/raiders-of-the-fast-start-frontend-performance-archaeology-performancenow-conference#94)

    Create babel plugin that inject in code with visitors for functions and [control flow](https://en.wikipedia.org/wiki/Control_flow) (loops and switchs): `Function`, `IfStatement`, (`Terminatorless`, `SwitchCase`, `Loop`, `TryStatement`)

    - [Plugins · Babel](https://babeljs.io/docs/en/plugins#plugin-development)
    - [babel-handbook/plugin-handbook.md at master · jamiebuilds/babel-handbook](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#inserting-into-a-container)
    - [@babel/types · Babel](https://babeljs.io/docs/en/next/babel-types.html)
    - [babel-plugin-inject/index.js at master · ialpert/babel-plugin-inject](https://github.com/ialpert/babel-plugin-inject/blob/master/src/index.js) - Example of plugin that replace function call

    Or as standalone tool:

    - [substack/node-falafel: transform the ast on a recursive walk](https://github.com/substack/node-falafel)

    ### CSS coverage

    Aka unused CSS RUM
  18. @mems mems revised this gist Dec 20, 2018. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -55,6 +55,10 @@ It could also use a tracker image with some properties (CSS background or [conte
    - [Dust-Me Selectors – Add-ons for Firefox](https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/) - `/chrome/content/dustmeselectors.js`: `DustMeSelectors.evaluateSelectors`
    - [purifycss/purifycss: Remove unused CSS. Also works with single-page apps.](https://github.com/purifycss/purifycss)
    - [uncss/uncss: Remove unused styles from CSS](https://github.com/uncss/uncss)
    - Web Essentials: Remove unused CSS
    - [Web Essentials: Remove unused CSS - YouTube](https://www.youtube.com/watch?v=bM5oz_2OidI)
    - [Browser Link - Web Essentials](http://vswebessentials.com/features/browserlink#unused-css)
    - [WebEssentials2015/UnusedCss.js at master · madskristensen/WebEssentials2015](https://github.com/madskristensen/WebEssentials2015/blob/master/EditorExtensions/BrowserLink/UnusedCss/UnusedCss.js)

    ### Code coverage in IDE

  19. @mems mems revised this gist Dec 11, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -68,6 +68,7 @@ In Intellij IDEA/WebStorm/PHPStorm:
    ### Libs and tools

    - [puppeteer/api.md at master · GoogleChrome/puppeteer](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-coverage) - [Chrome DevTools Protocol Viewer - Profiler](https://chromedevtools.github.io/devtools-protocol/tot/Profiler#method-startPreciseCoverage)
    - [DevTools: allow exporting code coverage data. (I0360d0de) · Gerrit Code Review](https://chromium-review.googlesource.com/c/chromium/src/+/1370862) - Chrome devtools can export Coverage data (as JSON)
    - [istanbuljs/puppeteer-to-istanbul: given coverage information output by puppeteer's API output a format consumable by Istanbul reports](https://github.com/istanbuljs/puppeteer-to-istanbul)
    - [istanbuljs/v8-to-istanbul: convert from v8 coverage format to istanbul's format](https://github.com/istanbuljs/v8-to-istanbul#readme)
    - [istanbul/coverage.json.md at master · gotwarlost/istanbul](https://github.com/gotwarlost/istanbul/blob/master/coverage.json.md)
  20. @mems mems revised this gist Dec 9, 2018. 1 changed file with 37 additions and 13 deletions.
    50 changes: 37 additions & 13 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,26 +2,50 @@
    > Everything that you write is going to disappears some day
    unused CSS RUM

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

    ### JS coverage

    FES javascript instrimentation visualization

    - [Instrument JavaScript code – Roman Liutikov – Medium](https://medium.com/@roman01la/instrument-javascript-code-ed9aca423e2a)
    - [Raiders of the Fast Start: Frontend Performance Archaeology - Perform…](https://www.slideshare.net/KatrinaSylorMiller/raiders-of-the-fast-start-frontend-performance-archaeology-performancenow-conference#94)

    Easy way (use CSS background or [content property](https://developer.mozilla.org/en-US/docs/Web/CSS/content)):

    element-to-track{
    background: url("tracking_URL");
    }
    element-to-track::before{
    content: url("tracking_URL");
    }
    :root.class element-to-track::before{
    content: url("tracking_URL");
    }
    ### CSS coverage

    Aka unused CSS RUM

    Can't support easily CSSOM changes

    Parse + generate result client side (use webworker):

    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`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) (for added or removed external and inlined style sheets too, see steps 1, 2 and 3)
    4. apply source map
    5. generate LCOV report + send to server ([`navigator.sendBeacon()`](https://developer.mozilla.org/en-US/docs/Web/API/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):

    - https://github.com/mozilla/gecko-dev/blob/master/devtools/client/inspector/rules/rules.js
    - https://github.com/mozilla/gecko-dev/blob/master/devtools/client/inspector/rules/views/rule-editor.js
    - https://github.com/mozilla/gecko-dev/tree/master/devtools/shared/css
    - https://github.com/mozilla/gecko-dev/blob/master/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
    - https://docs.firefox-dev.tools/getting-started/architecture-overview.html
    - https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/elements/ComputedStyleModel.js
    - https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/elements/StylesSidebarPane.js

    An other method to detect ruleset usage is to add 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](https://developer.mozilla.org/en-US/docs/Web/CSS/content))) to direct tracking element but generate too much traffic (each document elements and pseudo element call a beacon).

    - [Finding Dead CSS – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts](https://csswizardry.com/2018/01/finding-dead-css/)
    - [Here's the thing about "unused CSS" tools | CSS-Tricks](https://css-tricks.com/heres-the-thing-about-unused-css-tools/)
  21. @mems mems revised this gist Nov 27, 2018. 2 changed files with 65 additions and 21 deletions.
    65 changes: 65 additions & 0 deletions Code coverage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    > 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
    unused CSS RUM

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

    FES javascript instrimentation visualization

    - [Instrument JavaScript code – Roman Liutikov – Medium](https://medium.com/@roman01la/instrument-javascript-code-ed9aca423e2a)
    - [Raiders of the Fast Start: Frontend Performance Archaeology - Perform…](https://www.slideshare.net/KatrinaSylorMiller/raiders-of-the-fast-start-frontend-performance-archaeology-performancenow-conference#94)

    Easy way (use CSS background or [content property](https://developer.mozilla.org/en-US/docs/Web/CSS/content)):

    element-to-track{
    background: url("tracking_URL");
    }
    element-to-track::before{
    content: url("tracking_URL");
    }
    :root.class element-to-track::before{
    content: url("tracking_URL");
    }

    - [Finding Dead CSS – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts](https://csswizardry.com/2018/01/finding-dead-css/)
    - [Here's the thing about "unused CSS" tools | CSS-Tricks](https://css-tricks.com/heres-the-thing-about-unused-css-tools/)

    ### Similar tools

    - [Dust-Me Selectors – Add-ons for Firefox](https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/) - `/chrome/content/dustmeselectors.js`: `DustMeSelectors.evaluateSelectors`
    - [purifycss/purifycss: Remove unused CSS. Also works with single-page apps.](https://github.com/purifycss/purifycss)
    - [uncss/uncss: Remove unused styles from CSS](https://github.com/uncss/uncss)

    ### Code coverage in IDE

    In Intellij IDEA/WebStorm/PHPStorm:

    - [Finding Unused Code with Coverage - Help | IntelliJ IDEA](https://www.jetbrains.com/help/idea/capturing-unused-javascript-code.html)
    - [Is there a way to load the lcov data inside webstorm? · Issue #6 · StevenLooman/mocha-lcov-reporter](https://github.com/StevenLooman/mocha-lcov-reporter/issues/6)
    - [Webstorm (intellij) coverage integration with the angular cli · Issue #3560 · angular/angular-cli](https://github.com/angular/angular-cli/issues/3560)
    - [Testing JavaScript - Help | IntelliJ IDEA](https://www.jetbrains.com/help/idea/unit-testing-javascript.html)

    ### Libs and tools

    - [puppeteer/api.md at master · GoogleChrome/puppeteer](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-coverage) - [Chrome DevTools Protocol Viewer - Profiler](https://chromedevtools.github.io/devtools-protocol/tot/Profiler#method-startPreciseCoverage)
    - [istanbuljs/puppeteer-to-istanbul: given coverage information output by puppeteer's API output a format consumable by Istanbul reports](https://github.com/istanbuljs/puppeteer-to-istanbul)
    - [istanbuljs/v8-to-istanbul: convert from v8 coverage format to istanbul's format](https://github.com/istanbuljs/v8-to-istanbul#readme)
    - [istanbul/coverage.json.md at master · gotwarlost/istanbul](https://github.com/gotwarlost/istanbul/blob/master/coverage.json.md)
    - [717195 - Ability to export code coverage results for use by analysis tools - chromium - Monorail](https://bugs.chromium.org/p/chromium/issues/detail?id=717195)
    - [coverage/ - Code Search](https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/coverage/?q=Coverage+DevTools+&sq=package:chromium&dr=CSs)
    - [Feature Request: LCOV or Istanbul format code coverage · Issue #1768 · GoogleChrome/puppeteer](https://github.com/GoogleChrome/puppeteer/issues/1768)

    - [csstree/csstree: A tool set for working with CSS including fast detailed parser, walker, generator and lexer based on W3C specs and browser implementations](https://github.com/csstree/csstree)

    ### LCOV

    - [cedx/lcov.js: Parse and format LCOV coverage reports, in JavaScript.](https://github.com/cedx/lcov.js)
    - [json2lcov - npm](https://www.npmjs.com/package/json2lcov)
    - [keywords:lcov - npm search](https://www.npmjs.com/search?q=keywords:lcov)

    - [css-coverage - npm](https://www.npmjs.com/package/css-coverage)
    - [gotwarlost/istanbul: Yet another JS code coverage tool that computes statement, line, function and branch coverage with module loader hooks to transparently add coverage when running tests. Supports all JS coverage use cases including unit tests, server side functional tests and browser tests. Built for scale.](https://github.com/gotwarlost/istanbul)
    - [Linux Test Project - Coverage » lcov](http://ltp.sourceforge.net/coverage/lcov.php)
    - [davglass/lcov-parse: Simple LCOV file parser](https://github.com/davglass/lcov-parse#readme)
    21 changes: 0 additions & 21 deletions Notes.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,21 +0,0 @@
    > 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

    FES javascript instrimentation visualization

    - [Instrument JavaScript code – Roman Liutikov – Medium](https://medium.com/@roman01la/instrument-javascript-code-ed9aca423e2a)
    - [Raiders of the Fast Start: Frontend Performance Archaeology - Perform…](https://www.slideshare.net/KatrinaSylorMiller/raiders-of-the-fast-start-frontend-performance-archaeology-performancenow-conference#94)

    - [uncss/uncss: Remove unused styles from CSS](https://github.com/uncss/uncss)

    ### Code coverage in IDE

    In Intellij IDEA/WebStorm/PHPStorm:

    - [Finding Unused Code with Coverage - Help | IntelliJ IDEA](https://www.jetbrains.com/help/idea/capturing-unused-javascript-code.html)
    - [Is there a way to load the lcov data inside webstorm? · Issue #6 · StevenLooman/mocha-lcov-reporter](https://github.com/StevenLooman/mocha-lcov-reporter/issues/6)
    - [Webstorm (intellij) coverage integration with the angular cli · Issue #3560 · angular/angular-cli](https://github.com/angular/angular-cli/issues/3560)
    - [Testing JavaScript - Help | IntelliJ IDEA](https://www.jetbrains.com/help/idea/unit-testing-javascript.html)
  22. @mems mems revised this gist Nov 26, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions Notes.md
    View file
    Original file line number Diff line number Diff line change
    @@ -15,6 +15,7 @@ FES javascript instrimentation visualization

    In Intellij IDEA/WebStorm/PHPStorm:

    - [Finding Unused Code with Coverage - Help | IntelliJ IDEA](https://www.jetbrains.com/help/idea/capturing-unused-javascript-code.html)
    - [Is there a way to load the lcov data inside webstorm? · Issue #6 · StevenLooman/mocha-lcov-reporter](https://github.com/StevenLooman/mocha-lcov-reporter/issues/6)
    - [Webstorm (intellij) coverage integration with the angular cli · Issue #3560 · angular/angular-cli](https://github.com/angular/angular-cli/issues/3560)
    - [Testing JavaScript - Help | IntelliJ IDEA](https://www.jetbrains.com/help/idea/unit-testing-javascript.html)
  23. @mems mems revised this gist Nov 26, 2018. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion Notes.md
    View file
    Original file line number Diff line number Diff line change
    @@ -16,4 +16,5 @@ FES javascript instrimentation visualization
    In Intellij IDEA/WebStorm/PHPStorm:

    - [Is there a way to load the lcov data inside webstorm? · Issue #6 · StevenLooman/mocha-lcov-reporter](https://github.com/StevenLooman/mocha-lcov-reporter/issues/6)
    - [Webstorm (intellij) coverage integration with the angular cli · Issue #3560 · angular/angular-cli](https://github.com/angular/angular-cli/issues/3560)
    - [Webstorm (intellij) coverage integration with the angular cli · Issue #3560 · angular/angular-cli](https://github.com/angular/angular-cli/issues/3560)
    - [Testing JavaScript - Help | IntelliJ IDEA](https://www.jetbrains.com/help/idea/unit-testing-javascript.html)
  24. @mems mems revised this gist Nov 26, 2018. 1 changed file with 9 additions and 2 deletions.
    11 changes: 9 additions & 2 deletions Notes.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,11 +2,18 @@
    > Everything that you write is going to disappears some day
    RUM Code coverage
    RUM Code coverage, chose a 1h timeframe (per day) where 1% traffic run that the test

    FES javascript instrimentation visualization

    - [Instrument JavaScript code – Roman Liutikov – Medium](https://medium.com/@roman01la/instrument-javascript-code-ed9aca423e2a)
    - [Raiders of the Fast Start: Frontend Performance Archaeology - Perform…](https://www.slideshare.net/KatrinaSylorMiller/raiders-of-the-fast-start-frontend-performance-archaeology-performancenow-conference#94)

    - [uncss/uncss: Remove unused styles from CSS](https://github.com/uncss/uncss)
    - [uncss/uncss: Remove unused styles from CSS](https://github.com/uncss/uncss)

    ### Code coverage in IDE

    In Intellij IDEA/WebStorm/PHPStorm:

    - [Is there a way to load the lcov data inside webstorm? · Issue #6 · StevenLooman/mocha-lcov-reporter](https://github.com/StevenLooman/mocha-lcov-reporter/issues/6)
    - [Webstorm (intellij) coverage integration with the angular cli · Issue #3560 · angular/angular-cli](https://github.com/angular/angular-cli/issues/3560)
  25. @mems mems revised this gist Nov 26, 2018. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions Notes.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,7 @@
    > 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

    FES javascript instrimentation visualization
  26. @mems mems revised this gist Nov 26, 2018. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions Notes.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    > Every line of code we write today will end up as someone’s legacy code.
    RUM Code coverage

    FES javascript instrimentation visualization
  27. @mems mems created this gist Nov 26, 2018.
    8 changes: 8 additions & 0 deletions Notes.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    RUM Code coverage

    FES javascript instrimentation visualization

    - [Instrument JavaScript code – Roman Liutikov – Medium](https://medium.com/@roman01la/instrument-javascript-code-ed9aca423e2a)
    - [Raiders of the Fast Start: Frontend Performance Archaeology - Perform…](https://www.slideshare.net/KatrinaSylorMiller/raiders-of-the-fast-start-frontend-performance-archaeology-performancenow-conference#94)

    - [uncss/uncss: Remove unused styles from CSS](https://github.com/uncss/uncss)