Coverage Recorder

Coverage Recorder插件简介

Coverage Recorder插件描述

Coverage Recder extension helps you to recd data about what pieces of code in external stylesheets  scripts are used  what are not. Also extension is connected to serverbased Purifier which downloads stylesheets  scripts from your webpage  cleans them up from of unused code basing on the data from Coverage Recder.
 
How to use?
   
1. First of all, install Coverage Recder extension.

2. Then you need to write an interaction scenario f a certain page you want to instrument. This means that you should underst the presence of hidden blocks, popups, popovers, blocks of messages  other functionality on the page  how to trigger them by some user interaction. Why you’d better do that? You need to know the ce principle here – Coverage Recder will not see css  js code related to some hidden popup if this popup is not fced 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  to remove that part of css  js code that is really necessary f particular page. The same sty is about media queries. You need to evoke them to make them visible f recder. However, in most of s it’s enough to change browser window width from the widest to the narrowest to fce Coverage Recder to grab mediaqueries infmation. And one me thing. Unftunately, Coverage Recder marks @rules as unused in css (@fontface, @keyframes, @suppts  so on). The same is about @media, but f them we built some wkaround  they are hled 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  not. 

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

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

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

Coverage Recorder插件离线安装方法

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.下载 Coverage RecorderChrome插件v1.0.03 public beta版本到本地。

5.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

注意：最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照这篇文章即可解决