代码覆盖率针对实时页面测试每个可读样式表中的每个选择器,以便您可以查看哪些 CSS 规则当前不匹配、每个文件浪费了多少字节以及哪些脚本阻碍了首次绘制。
样式表只会增长。一个主题带有针对您没有的页面的规则,一个框架提供了您从未使用过的组件,并且经过三次重新设计后,没有人确定文件的哪一半是承重的。结果是 CSS 花费了每个访问者的带宽和渲染时间来传递页面无法使用的规则。
代码覆盖率直接衡量这一点。它会遍历浏览器允许其读取的每个样式表中的每个规则(包括嵌套在媒体查询、@supports 和 @layer 块中的规则),并根据实时 DOM 测试每个选择器。现在不匹配任何内容的规则将按文件报告为未使用,并带有百分比、浪费的字节以及可以扩展和复制的选择器的完整列表。
它对明显的陷阱很小心。伪元素和状态伪类在匹配之前会被剥离,因此 :hover 或 ::before 规则会根据其基选择器是否存在来判断,而不是被错误地注销。任何脚本都无法读取没有 CORS 标头的跨域服务样式表,因此它们被标记为不可读,而不是默默地被视为完美。而且由于扫描反映了当时的页面,因此尚未打开的菜单、选项卡和模式的规则将看起来未使用 - 因此在删除任何内容之前打开它们并按重新扫描。
JavaScript 选项卡回答了一个不同的问题:权重和阻塞。它会清点页面加载的每个脚本的传输大小、下载时间,以及是否是异步、延迟、模块、动态加载或阻止第一次绘制,然后总计有多少字节被阻塞。它故意不作为执行覆盖率出售——了解哪些 JavaScript 行运行需要 Chrome 的调试器 API,而 DevSuite Pro 不要求该 API,因此这里没有任何内容假装是行级报告。
每个可读样式表中的每个规则都针对实时 DOM 进行测试,包括媒体查询、@supports 和 @layer 块内的规则 - 不是根据文件名或大小来估计的。
每个样式表都会获得未使用的百分比、已使用与未使用的规则计数以及浪费的字节数,并进行排序,以便最严重的违规者位于顶部。
展开任何文件以读取不匹配的选择器,然后将它们复制为 CSS 块以在编辑器中进行处理或交给队友。
伪元素和状态伪类(例如 :hover 和 :focus-within)在匹配之前会被剥离,因此交互规则会得到公平的判断,而不是被注销。
列出的每个脚本都包含其大小、下载时间以及是否是异步、延迟、模块、动态加载或阻塞首次绘制 - 以及总阻塞字节数。
不可读的跨源样式表会被标记而不是评分,并且 JS 选项卡明确表示它测量的是权重,而不是执行了哪些行。没有发明数字。
购买的主题附带了数十个演示布局的 CSS。查看您的网站有多少内容从未使用过,并通过证据而不是猜测来减少文件。
检查有多少 CSS 框架在真实模板上幸存下来,以及您的清除或树摇动配置是否按照您的想法进行。
列出阻碍渲染的脚本及其大小,并决定推迟、拆分或删除哪些内容,以便更快地将内容显示在屏幕上。
用数字来了解:哪些文件浪费了最多的字节,JavaScript 阻塞了多少,以及第一个小时的工作回报最多的地方。
接管一个不是您构建的网站,快速了解其 CSS 和 JavaScript 的多少仍然占据一席之地。
单击 DevSuite Pro 坞站中的代码覆盖率图标。扫描会立即运行,并报告检查了多少条规则以及其中哪些规则未使用。
最上面一行显示样式表计数、总规则、未使用的百分比和浪费的字节。下面的文件按照浪费的程度排序。
单击“在任何文件上显示未使用的选择器”以准确读取哪些规则与此页面上的任何内容都不匹配。
打开菜单、选项卡、手风琴和模式,然后按重新扫描。其元素仅存在于这些状态中的规则将从未使用移动到已使用 - 始终在删除之前执行此操作。
复制未使用的选择器为您提供了一个可以使用的 CSS 块;导出 JSON 复制票证或审核文档的完整报告,包括 JavaScript 库存。