这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战
本篇介绍 chrome 中的 Coverage 面板。
Coverage 功能使用动态分析（Dynamic Analysis）法来收集代码运行时的覆盖率，让开发者能够窥探他的代码到底有多大比例在发光发热。动态分析是指在应用运行状态下收集代码执行数据的过程，换句话说，覆盖率数据就是在代码执行过程中通过标记收集到的。
打开方式
在 chrome 中打开 devtools 后，按 esc 可唤起另一个面板。若面板中不存在 Rendering，可以按最左侧的「更多」按钮点击展示。
录制数据
在 Coverage 面板中，点击刷新，可以查看该页面的代码「包括 js 和 css」使用率。
Coverage 面板左上角有 3 个按钮，点击录制的时候会开始录制，同时录制按钮变红，再次点击录制按钮会停止录制并把录制到的覆盖率数据展示出来。此外，可以点击中间的快捷按钮，“刷新并开始录制”，待页面加载完之后停止录制。
查看数据
如上图所示，Coverage 录制结果表格展示了录制过程中加载的所有 JS 和 CSS 文件，以及每个文件的大小、运行时覆盖率，汇总数据展示在页面底部的状态栏中。单击单个静态资源能将其在 Sources 面板中打开，代码行号的左边用红绿色的条来标识代码是否在录制过程中被执行到。绿色表示执行到的，红色的表示未执行的。
优化
根据上述的数据中的代码执行率，我们可以采取一些优化措施。
- 将未执行的代码删除。
- 将未执行的代码延后加载。
- 将代码按照执行和未执行的逻辑进行拆分。
最后说一句
如果这篇文章对您有所帮助，或者有所启发的话，帮忙关注一下，您的支持是我坚持写作最大的动力，多谢支持。
