Chrome开发者工具的“代码覆盖率”功能可识别未执行的JS和未应用的CSS：打开Coverage面板→刷新页面录制→交互操作扩大检测→导出报告并跳转定位未使用代码→结合搜索与断点验证动态调用→禁用缓存确保数据准确。
如果您在Chrome浏览器中希望识别网页中未被实际执行的JavaScript代码或未被应用的CSS规则，可以利用开发者工具内置的“代码覆盖率”功能进行分析。以下是使用该功能的具体步骤：
一、打开开发者工具并启动代码覆盖率
代码覆盖率工具通过监控页面加载与交互过程中JS和CSS的实际执行/应用情况，以可视化方式标出未使用的部分。启用前需确保处于常规页面浏览状态，而非调试中断点中。
1、在目标网页上右键选择“检查”，或按 Ctrl+Shift+I（Windows/Linux） / Cmd+Option+I（macOS） 打开开发者工具。
2、按下 Ctrl+Shift+P（Windows/Linux） / Cmd+Shift+P（macOS） 调出命令菜单。
立即学习“前端免费学习笔记（深入）”；
3、在命令菜单中输入 Show Coverage，点击匹配项，Coverage 面板将出现在底部边栏。
4、点击 Coverage 面板右上角的 刷新图标（↻），重新加载页面并开始录制覆盖率数据。
二、触发用户交互以扩大检测范围
静态加载仅覆盖初始渲染路径，大量JS逻辑和CSS状态类依赖用户操作（如点击、悬停、滚动）才被激活。若不模拟真实行为，覆盖率结果将严重低估已使用代码量。
1、在页面加载完成后，手动执行典型操作：点击导航菜单、展开下拉列表、切换标签页、滚动至页面底部。
2、若页面含表单，尝试输入内容、提交、触发验证逻辑。
3、保持Coverage面板开启，在每次关键交互后观察条形图中绿色（已使用）与红色（未使用）比例的变化。
三、导出并定位未使用资源
Coverage面板以文件粒度展示各JS/CSS资源的使用率，支持直接跳转至源码中未执行行。导出报告可辅助团队协作分析或存档比对。
1、在Coverage面板中，找到使用率低于 30% 的 .js 或 .css 文件条目。
2、双击该文件名，自动在“Sources”面板中打开对应源码，并将未执行行以 红色高亮背景 标注。
3、右键点击Coverage面板空白处，选择 Export coverage data，保存为 .json 文件供后续离线分析。
四、结合代码搜索验证可疑未使用片段
覆盖率工具无法识别动态字符串拼接的CSS类名或 eval 构建的JS执行路径，可能将实际调用的代码误判为“未使用”。需人工交叉验证关键逻辑是否真被弃用。
1、在Sources面板中，按 Ctrl+F（Windows/Linux） / Cmd+F（macOS） 搜索疑似未使用函数名或CSS类名。
2、检查搜索结果中是否存在 字符串字面量调用（如 document.querySelector('.old-modal')）、模板字符串嵌入 或 webpack require.context 动态引入 等模式。
3、对搜索命中但覆盖率显示为红色的行，添加断点并复现对应交互，确认其是否真实执行。
五、禁用缓存并重测排除干扰
浏览器缓存可能导致资源未重新加载，Coverage统计基于当前加载的资源版本。若此前已修改过JS/CSS但未硬性刷新，覆盖率数据将反映旧版本而非当前代码。
1、在开发者工具的 Network 面板中，勾选 Disable cache 复选框。
2、关闭所有相关标签页，重新打开目标URL（勿使用前进/后退按钮）。
3、再次执行“打开Coverage→刷新页面→交互操作”全流程，确保数据采集基于最新资源。
