首页 开发者工具 Coverage Recorder

Coverage Recorder

用户数 : 168 分类 : 开发者工具 扩展大小 : 213KiB 最后更新时间 : 2019-03-16 版本 : 1.0.03 public beta
                            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.
                        
查看更多
下载 如何离线安装? Chrome store

分享

close
qr-code

为打击盗链困扰,本站已启用公众号验证
微信扫码关注上方公众号,回复“插件”二字获得验证码,验证码5分钟内全站有效。

正在验证
验证成功
下载遇到问题?请添加QQ群:398095333
close
qr-code

为打击盗链困扰,本站已启用公众号验证
微信扫码关注上方公众号,回复“脚本”二字获得验证码,验证码5分钟内全站有效。

正在验证
验证成功