LOADING

DisCoverage

DisCoverage1.0.1

此扩展有助于同时分析多个资源文件和多个页面的 css 和 javascript 覆盖率报告。 **故事**页面加载速度优化的重要问题之一是减少 css 和 javascript 资源的大小。通常优化工具(如灯塔)为我们提供了“削减”未使用的 css 规则或 javascript 函数的线索。那么如何检测真正未使用

官方版无广告10

更新日期:2021年 8月 29日分类标签:语言:中文平台:

237KB 0 人已下载 手机查看

简介:
此扩展有助于同时分析多个资源文件和多个页面的 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 分析目前可能没有用。

相关资源

RESES
Reddit 增强套件 增强套件--Reddit 增强套件增强套件--不喜欢那些讨厌的? | ?图标?想要返回数字,即使它们没有任何意义?安装此扩展程序以再次查看数字!这些数字不准确,纯属随机。虽然,它们从来都不是准确的,所以这应该能满足你的冲动!注意:我与 RES 或 Reddit 没有任何隶属关系,并将此作为
Clear Site Data
清除当前或所有站点数据(缓存、存储等)。当您单击此扩展图标时,它会显示当前 (https) 站点的存储使用信息。您可以清除当前站点或所有网站的数据,包括以下数据类型:缓存● 浏览器缓存● 缓存存储贮存● 本地存储● 索引数据库● 网页查询● 饼干● 服务工作者● 文件系统其他(仅当为所有网站选择时) ● 下载列表
Allow copy
允许选择,允许复制,允许在某些受限制的页面中单击鼠标右键。取消阻止上下文菜单和选择,允许选择,允许复制,允许右键单击某些受限页面。 Cho phép sao chép,点击 chuột phải ở những 网站 chặn không cho copy nội dung。关键词:允许选择允许复制启用复制
Hue Notifier for Hadoop
当 Hue 完成作业执行时通知当 Hadoop 上的 Hive 查询或 Pig 脚本需要大量时间来执行并且您对收到有关完成过程的通知感兴趣时,这是常见的情况。此扩展有助于在 Hadoop 平台上进行开发,并通过在执行完成时显示桌面通知来节省您的时间。目前支持下一个工具: - Cloudera 上的 Hive/Im
Okta Remote
Okta Remote 为您的租户Okta Remote 是一个 Google 扩展,专为 Okta 的解决方案工程师设计,能够为其演示租户打造品牌。用户可以使用 Okta Remote 中提供的图库中的图像进行品牌宣传,或者他们可以复制背景图像和徽标的图像 URL,以便能够上传自定义图片。最后,Okta Rem
Smartling Context Capture
使用 Smartling 平台为翻译人员提供视觉上下文。 Smartling 上下文捕获扩展帮助用户为上传到 Smartling 系统进行翻译的字符串创建视觉上下文。当您单击添加到工具栏的按钮时,该扩展程序会以您单击时看到的状态从浏览器中捕获 HTML 页面(包括图像和 css)。这允许您捕获仅由用户操作显示的页

暂无评论

暂无评论...