Coverage Recorder扩展程序可帮助您记录有关使用外部样式表和脚本中的哪些代码段以及不使用哪些代码的数据。扩展程序还连接到基于服务器的Purifier,该Purifier从您的网页下载样式表和脚本,并基于Coverage Recorder的数据清除未使用的代码。
如何使用?
1.首先,安装Coverage Recorder扩展程序。
2.然后,您需要为要检测的特定页面编写一个交互方案。这意味着您应该了解页面上是否存在隐藏的块,弹出窗口,弹出窗口,消息块和其他功能,以及如何通过某些用户交互来触发它们。为什么您最好这样做?您需要在此处了解核心原理-如果用户交互未强制显示此弹出窗口,那么Coverage Recorder将不会看到与某些隐藏弹出窗口相关的css和js代码。这意味着,如果您不完全与页面进行交互,则可能会有风险获取不精确的数据,并删除特定页面确实需要的那部分CSS和JS代码。同样的故事是关于媒体查询的。您需要唤起它们以使其对记录器可见。但是,在大多数情况下,只需将浏览器窗口的宽度从最宽更改为最窄即可,以迫使Coverage Recorder捕获媒体查询信息。还有一件事情。不幸的是,Coverage Recorder在CSS中将@ -rules标记为未使用(@ font-face,@ keyframes,@ supports等)。 @media也是如此,但是对于他们,我们建立了一些解决方法,并且它们的处理方式与其他方法不同。因此,当样式表中有@ -rules时,无论它们是否真正在页面上使用,Purifier都不会删除它们。
3.为了使交互方案的至少最小部分自动化,我们在扩展程序内构建了一些功能,使您可以通过单击一下在所有元素上强制:hover,:focus,:focus-within,:active和:visited状态。在Coverage Recorder记录使用过的CSS规则之后,您可以启用此功能,然后将其关闭。
4.单击停止录制”按钮完成交互后,您将看到2个选项。第一个是将记录的数据直接发送到Purifier,第二个选项是下载原始记录的数据。在第一种情况下,覆盖范围数据的处理会在将数据传送到Purifier时立即开始。在第二种情况下,您可以将覆盖范围数据保存在本地计算机上,然后在您要开始处理时手动将其手动上传到Purifier。在这两种情况下,处理覆盖率数据后,Purifier都会生成新的清理文件并将其打包为zip文件,您可以下载该文件。
5.强烈建议使用一些在线js或css语法验证器来验证下载的文件,以确保没有语法冲突。