Coverage Recorder

Description

Coverage Recorder extension helps you to record data about what pieces of code in external stylesheets and scripts are used and what are not. Also extension is connected to server-based Purifier which downloads stylesheets and scripts from your web-page and cleans them up from of unused code basing on the data from Coverage Recorder.

How to use?

1. First of all, install Coverage Recorder extension.

2. Then you need to write an interaction scenario for a certain page you want to instrument. This means that you should understand the presence of hidden blocks, popups, popovers, blocks of messages and other functionality on the page and how to trigger them by some user interaction. Why you’d better do that? You need to know the core principle here – Coverage Recorder will not see css and js code related to some hidden popup if this popup is not forced to be shown by user interaction. That means that if you do not interact with page totally, you have some risk to obtain not precise data and to remove that part of css and js code that is really necessary for particular page. The same story is about media queries. You need to evoke them to make them visible for recorder. However, in most of cases it’s enough to change browser window width from the widest to the narrowest to force Coverage Recorder to grab media-queries information. And one more thing. Unfortunately, Coverage Recorder marks @-rules as unused in css (@font-face, @keyframes, @supports and so on). The same is about @media, but for them we built some workaround and they are handled not in the same way like others. So, when you have @-rules in your stylesheets they will not be removed by Purifier, regardless of whether they are really used on the page or not.

3. In order to automate at least minimal part of interaction scenario we built some functionality within the extension that allows you to force :hover, :focus, :focus-within, :active and :visited states on all the elements by one click. You enable this feature, after that Coverage Recorder records used css rules and then you can turn it off.

4. When you finish your interaction by clicking “Stop Recording” button you will see 2 options. The first one is to send the recorded data directly to Purifier and the second option is to download the raw recorded data. In the first case the processing of coverage data starts immediately when data are delivered to the Purifier. In the second case you can save coverage data locally on your computer and then upload to Purifier manually whenever you want to start processing. In both of cases after the processing of coverage data Purifier will generate new cleaned files and pack them into zip which you can download.

5. It is strongly recommended to validate downloaded files using some online js or css syntax validator to make sure that there are no syntax violations.