LOADING

DisCoverage

DisCoverage1.0.1

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

官方版无广告11

更新日期: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 分析目前可能没有用。

相关资源

WhatTheFont
识别网页中的字体和字样。一个简单的扩展,显示特定页面上使用的所有字体系列。这是一个 Alpha 版本,所以请报告任何问题。未来功能:在弹出窗口中悬停字体名称,并查看页面上突出显示的相应文本。如果可能,链接到字体下载/查看页面。在弹出窗口中预览字体。谢谢!想我应该包括这个:我与可能出现在屏幕截图、宣传图块等中的网站
WordPress Theme Detector and Plugins Detector
此工具检测 WordPress 网站上使用的主题和插件并显示有关它们的信息。插件检测在远程服务器上完成,然后将结果发送到您的浏览器。
JSON-YAML Toggle
在浏览器中切换 JSON 和 YAML一些开发环境说您可以同时使用 JSON 和 YAML 文件进行配置,但在大多数情况下,示例仅以其中一种格式提供。此扩展支持它们之间的即时转换,以便您可以轻松地复制和粘贴到您的代码中!您只需右键单击以打开上下文菜单并选择“切换 JSON-YAML”。然后 JSON 会被翻译成
HCL OneTest™ UI – Web UI
启用对 Web 应用程序的 HCL OneTest™ UI - Web UI 支持Enables HCL OneTest™ UI - Web UI support for web applications
Chrome Robot
为机器人框架编写 Selenium 自动化测试Chrome Robot 将通过帮助您以高效的方式创建高级自定义关键字来提高您的测试自动化生产力。以下是一些功能: - 批量选择元素并以自适应方式创建测试步骤。 - 根据当前状态填写和验证表格。 - 页面元素定位器的简单偏好定义。 - 基于元素自身的文本或附近元素的文
Web Design Pirate
复制 Web 组件、HTML 小部件和网站设计部分的快速简便方法。 Web Design Pirate 是一个 Chrome DevTools 扩展,它允许你选择一个 HTML 节点,然后只给你呈现完整组件(子树)所需的 CSS 样式。或者,对于复制包装器样式的组件,它还允许您指定可以丢弃的内部 HTML 内容的

暂无评论

暂无评论...