如何在 Chrome DevTools 中快速找到 CSS 和 JS 代码中未使用的部分？答案

【问题标题】：How to Quickly Find Unused Part of the CSS and JS Codes in Chrome DevTools?如何在 Chrome DevTools 中快速找到 CSS 和 JS 代码中未使用的部分？
【发布时间】：2021-10-12 21:20:47
【问题描述】：

我正在使用 Chrome DevTools 分析页面https://www.datanumen.com/blogs/5-methods-remove-highlighting-shading-word-document/的代码覆盖率

我得到以下结果：

我注意到有一些 CSS 文件的未使用率分别为 98.1% 和 99.7%，所以我想弄清楚实际使用了哪些部分。但是这些文件比较大，比如ssba.css就是4000+行，我只能看到旁边的红色竖线，找不到绿色的表示使用过的部分。而且对于一个 4000+ 行的文件，一个一个向下滚动是相当耗时的。那么，有没有一种简单的方法可以跳转到第一个使用的部分，然后转到下一个使用的部分，等等？或者换句话说，快速轻松找到使用过的零件？

【问题讨论】：

标签： javascript css google-chrome google-chrome-devtools

【解决方案1】：

Chrome DevTools 无法真正为您编辑代码，因为它位于 Chrome 无权访问的服务器（或在本例中为您的计算机）上。您能做的最好的事情就是使用扩展程序、脚本或其他工具将其自动化。

【讨论】：

谢谢。我不想通过 DevTools 编辑代码，我只想在面对数千行时轻松找到未使用的代码部分。