DisCoverage crx插件

此扩展程序有助于同时分析多个资源文件和多个页面CSS和JavaScript覆盖率报告。 **故事**优化页面加载速度的重要问题之一是减小css和javascript资源的大小。 通常,优化工具(如灯塔)为我们提供了“削减”未使用CSS规则或javascript函数的线索。 那么如何检测真正未使用的东西呢? 最近,我发现了我认为非常有用的Chrome覆盖率工具(https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage)。 这种出色工具的主要局限性在于它只能在单个页面的上下文中工作。 现在,我听到您的发言:是的,但是我的网站包含多个页面,并且所有页面共享相同的javascript和CSS资源...嗯,那也是我的问题。 直到我决定编写和扩展内容,才能分析多个网站的覆盖率数据。 **用法**收集覆盖率报告:1.安装DisCoverage扩展程序。 2.打开开发人员工具选项卡(F12)。 启用“覆盖”绘图器(请参见以下说明:https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage)。 3.加载要分析的首页。 4.在内部覆盖范围绘图器中启用“ Instrument coverage”(仪器覆盖范围)(单击红色二极管)。 您应该在绘图仪中看到coverage数据。 5.在硬盘驱动器上,准备要存储覆盖率报告(.json文件)的文件夹。 6.在coverage绘图仪内部,单击“导出...”,然后将coverage文件保存到准备好的文件夹中。 7.加载要分析的下一页(典型情况是单击已加载页面内的链接)。 8.等待收集和显示覆盖率数据。 。 9.将另一个报告导出到文件夹。 10.重复步骤7到9,直到您扫描了要分析的所有页面。 在扩展程序内加载报告:1.单击扩展程序图标(https://i.imgur.com/a8UtXDx.png)。 2.输入保存覆盖率报告(.json文件)的文件夹的路径。 路径应指定为uri:file:/// C:/ My / Folder / Path(https://i.imgur.com/tiIh9jE.png)3.单击“阅读覆盖率报告”(https:// i imgur.com/37UJYEU.png)。 4.最终可能需要一段时间,您才应该看到已加载文件(.css,.js和html)的列表。((https://i.imgur.com/kaMFNBy.png)预览特定文件的范围:1。单击您要分析的资源(css,js)的网址之一(https://i.imgur.com/M6i6WTQ.png)2.扩展程序将加载代码预览并标记为已覆盖的行。文件将不会有用,因为大多数文本都在单行内(https://i.imgur.com/nZy3OK6.png)3.悬停行号以显示弹出式窗口,其中包含覆盖该行的信息 i.imgur.com/Mlm9P71.png)4.单击“仅显示覆盖的行”以仅将代码缩减为覆盖的行(您可以将代码复制到最低限度,这非常节省,但仅适用于CSS)。(https:/ /i.imgur.com/jRZS4DH.png-> https://i.imgur.com/gCOn3j9.png)** Chrome覆盖率工具建议**在分析页面覆盖率时,请确保:1.调整了屏幕大小,以便将应用媒体查询(否则,决议di的css规则 导致无法检测到当前电流)2.您已经渗透了网站的动态生成部分(由html加载表格服务器或“即时”生成)。 **关于作者**您好,我是Paweł。 我住在波兰,并且在xtech.pl公司与伟大的人们一起工作。 我们正在运行多个行业门户(我们的旗帜是https://www.automatyka.pl)。 我喜欢编程。 **有限的支持**对于此扩展,我不提供任何保证,但是如果您发现任何问题,请将其发布在trello板上:https://trello.com/b/Zh3R07pQ/discoverage-extension **版本信息:** 1.0 –专为css文件而设计。 JavaScript分析目前可能没有用。 支持语言:English