如何在devtools中找到未使用 JavaScript 和 CSS 代码

GitHub中有更加详细的介绍

https://github.com/daLeiStrive/devtools-docs

Chrome DevTools中的Coverage标签可帮助您查找未使用的JavaScript和CSS代码。删除未使用的代码可以加快页面加载速度，

图1。分析代码覆盖率。

总览

运送未使用的JavaScript或CSS是Web开发中的常见问题。例如，假设您要在页面上使用Bootstrap的按钮组件。要使用按钮组件，您需要在HTML中添加指向Bootstrap样式表的链接，如下所示：

...<head>  ...  <link rel="stylesheet"         href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"         integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"         crossorigin="anonymous">  ...</head>...

此样式表不仅仅包含按钮组件的代码。它包含所有 Bootstrap组件的CSS 。但是您没有使用任何其他Bootstrap组件。因此，您的页面正在下载大量不需要的CSS。由于以下原因，此额外的CSS成为问题：

  • 额外的代码会减慢页面加载速度。请参阅渲染阻止CSS。
  • 如果用户访问移动设备上的页面，则多余的代码将耗尽他们的蜂窝数据。

    打开险种标签

    1. 打开命令菜单。
    2. 开始键入coverage，选择“ 显示覆盖率”命令，然后按 Enter运行该命令。该覆盖选项卡中打开抽屉。
      1. 图2。该覆盖标签。

        记录代码覆盖率

        1. 单击“ 覆盖率”选项卡中的以下按钮之一：

          • 如果您想查看加载该页面所需的代码，请单击“ 启动检测范围并重新 加载页面”。
          • 如果您想查看与页面交互后使用的代码，请单击“ 仪器覆盖率” 。
        2. 若要停止记录代码覆盖率，请单击“ 停止检测范围并显示结果” 。

        分析代码覆盖率

        “ 覆盖率”选项卡中的表显示了您分析了哪些资源，以及每个资源中使用了多少代码。单击一行以在“ 源”面板中打开该资源，然后逐行查看已使用的代码和未使用的代码。



      2. 图3。代码覆盖率报告。

        • 在URL栏是进行了分析，资源的URL。
        • “ 类型”列说明资源是否包含CSS，JavaScript或两者。
        • “ 总字节数”列是资源的总大小（以字节为单位）。
        • “ 未使用的字节数”列是未使用的字节数。
        • 最后一个未命名的列是“ 总字节数”和“ 未使用字节数”列的可视化。条形图的红色部分是未使用的字节。绿色部分是已使用的字节。

原文地址：https://www.cnblogs.com/MythLeige/p/11847017.html

时间： 2024-11-07 00:58:36

如何在devtools中找到未使用 JavaScript 和 CSS 代码的相关文章

在 WordPress 指定页面加载指定 JavaScript 或 CSS 代码

如何添加自定义字段到主题 用你常用的代码编辑器打开你的 WordPress 主题的 header.php文件,找到<?php wp_head(); ?>这句代码,在其后面添加上: <?php if (is_single() || is_page()) { $head = get_post_meta($post->ID, 'head', true); if (!empty($head)) { ?> <?php echo $head; ?> <?php } }

div中文字水平和垂直居中的css代码

HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px solid green; /*边框*/ text-align: center; /*文字水平居中对齐*/ line-height: 200px; /*设置文字行距等于div的高度 即实现垂直居中*/ overflow:hidden; } 显示效果

angular 图片加载失败 情况处理？ 如何在ionic中加载本地图片 ?

1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return { link: function(scope, element, attrs){ if(attrs.src == 'undefined'){ attrs.$set('src', attrs.errSrc); } element.bind('error', function() { if (attr

【转载】如何在 C#中访问 JavaScript函数?

如何在 C#中访问 JavaScript函数? 时间:13-10-17 栏目:Unity3D教程 作者:zqcyou 评论:0 如何在 C#中访问 JavaScript函数?答案如下:c#代码中执行 javaScript函数: 方法一:1. 1 Page.RegisterStartupScript("ggg","<script>SetVisible(1);</script>"); 方法二:使用 Literal类,然后 1 2 3 4 5 6

如何在VS2010中更好的编写JavaScript代码

VS2010默认的JavaScript代码编辑器相对简单.对于大家熟悉的代码折叠,代码结构.函数导航,代码高亮等都不支持,使用很不便.下面介绍下我发现的几个VS2010插件,具有哪些功能,如何安装和使用. 工具/原料 VS2010 方法/步骤 1 先看看VS2010自带的JavaScript编辑器界面.代码折叠木有,代码结构.函数导航木有,代码高亮木有. 2 接下来我们要去安装JavaScript的插件了,去哪找呢?在这里,VS菜单选择工具->扩展管理器. 3 打开扩展管理器后,这时我们还未安装

ORACLE中能否找到未提交事务的SQL语句

  在Oracle数据库中,我们能否找到未提交事务(uncommit transactin)的SQL语句或其他相关信息呢?  关于这个问题,我们先来看看实验测试吧.实践出真知. 首先,我们在会话1(SID=63)中构造一个未提交的事务,如下所: SQL> create table test   2  as   3  select * from dba_objects;   Table created. SQL> select userenv('sid') from dual;   USEREN

[译] 如何在React中写出更优秀的代码

目录 我们先来看 Linting 利用组件模块性.复用性和组合性 propTypes 和 defaultProps 知道何时创建新组件 组件 vs 纯组件 vs 无状态函数组件 无状态函数组件 纯组件 使用 React 开发工具 使用内联条件语句 尽可能使用代码片段库 React 本质 - 学习 React 是如何工作的 快速回顾 在React中写出更好代码的9条建议:学习关于 Linting, propTypes, PureComponent 等. Rajat S · 2018 年 4 月 1

MVC之前的那点事儿系列（9）：MVC如何在Pipeline中接管请求的？(转载)

MVC之前的那点事儿系列(9):MVC如何在Pipeline中接管请求的? 文章内容 上个章节我们讲到了,可以在HttpModules初始化之前动态添加Route的方式来自定义自己的HttpHandler,最终接管请求的,那MVC是这么实现的么?本章节我们就来分析一下相关的MVC源码来验证一下我们的这个问题. 先创建一个MVC3的Web Application,选择默认的模板以便创建以后就默认包含HomeController和AccountController.我们知道MVC要先接管请求才能通过

如何在Fragment中使用tabhost

最近在做一个仿电商的APP,由于前面使用了Fragment技术,现在想要在一个Fragment中做出TabHost的界面效果,经过查找资料找到了解决办法,特分享出来!(新人勿喷!) 首先要使用的控件是Support V4里面的控件,XML如图 <android.support.v4.app.FragmentTabHost         xmlns:android="http://schemas.android.com/apk/res/android"         andro