DisCoverage1.0.1

简介:
此扩展有助于同时分析多个资源文件和多个页面的 css 和 javascript 覆盖率报告。 **故事**页面加载速度优化的重要问题之一是减少 css 和 javascript 资源的大小。通常优化工具（如灯塔）为我们提供了“削减”未使用的 css 规则或 javascript 函数的线索。那么如何检测真正未使用的东西呢？最近我发现了 chrome 覆盖工具，我觉得它非常有用（https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage）。这个很棒的工具的主要限制是它只能在单个页面的上下文中工作。现在我听到你说：是的，但是我的网站由多个页面组成，并且所有页面都共享相同的 javascript 和 css 资源......嗯，那也是我的问题。直到我决定编写和扩展能够分析多个网站的覆盖数据。 **用法**收集覆盖率报告： 1.安装Discoverage扩展。 2. 确保扩展管理屏幕上的“允许访问文件 URL”处于启用状态 (https://user-images.githubusercontent.com/3299098/46309757-2f946c80-c572-11e8-91a9-e417a8ab8981.png) 3. 打开开发人员工具选项卡 (F12)。启用“coverage”抽屉（请参阅以下说明：https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage）。 4. 加载您要分析的第一页。 5. 内部覆盖抽屉启用“仪器覆盖”（单击红色二极管）。您应该在抽屉内看到覆盖数据。 6. 在您将存储覆盖率报告（.json 文件）的硬盘驱动器 ppare 文件夹中。 7. 在coverage drawler 中单击“Export...”并将coverage 文件保存到ppared 文件夹。 8. 加载您想要分析的下一个页面（典型场景是单击已加载页面内的链接）。 9. 等待覆盖数据收集和显示。 . 10. 将另一个报告导出到文件夹。 11. 重复步骤 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）的 URL 之一。 (https://i.imgur.com/M6i6WTQ.png) 2.扩展将加载代码pview，其中标记为覆盖的行。注意：分析缩小的文件没有用，因为大多数文本都在单行内。 (https://i.imgur.com/nZy3OK6.png) 3. 悬停行号以显示包含该行的页面信息的弹出窗口。 (https://i.imgur.com/Mlm9P71.png) 4. 单击“仅显示被覆盖的行”以将代码仅减少到被覆盖的行（您可以根据需要复制此代码 - 这非常节省，但仅适用于 css）。 (https://i.imgur.com/jRZS4DH.png -> https://i.imgur.com/gCOn3j9.png) **Chrome 覆盖工具建议**在分析页面覆盖率时，请确保： 1. 您已调整屏幕大小，以便应用媒体查询（否则将无法检测到不同分辨率的 css 规则） 2. 您已经渗透了动态生成的网站部分（加载 html 表单服务器或“即时”生成）。 **关于作者**你好，我是帕维尔。我住在波兰，在 xtech.pl 公司与优秀的人一起工作。我们正在运行多个行业门户（我们的旗舰是 https://www.automatyka.pl）。我喜欢编程。 ** 有限支持**我不保证此扩展程序，但如果您发现任何问题，请将它们发布到 trello 板上：https://trello.com/b/Zh3R07pQ/discoverage-extension **版本信息：** 1.0 – 专为 css 文件设计。 Javascript 分析目前可能没有用。