WebStorm 2025.2 Help

通过覆盖率查找未使用的代码

WebStorm 可帮助您在客户端应用程序中查找未使用的 JavaScript、TypeScript 以及 CSS 代码。 当您以专用 Code Coverage 模式运行应用程序时,WebStorm 会生成一个报告,显示每个文件和文件夹中有多少代码被使用。 得益于 source maps ,该报告显示的是源文件的覆盖率,而不是浏览器中实际运行的编译代码的覆盖率。

以代码覆盖率模式运行应用程序

  1. 创建一条 JavaScript Debug 类型的运行/调试配置:

    在主菜单中转到 运行(U) | 编辑配置(E)。 在打开的 编辑配置 对话框中,点击工具栏上的 添加 按钮(添加按钮 ),然后从列表中选择 JavaScript 调试。 在打开的 Run/Debug Configuration: JavaScript Debug 对话框中,指定应用程序正在运行的网址。 该网址可以从浏览器地址栏中复制。

    JavaScript 调试配置
  2. 在工具栏的 选择运行/调试配置 列表中选择新创建的配置,然后点击列表旁边的 使用覆盖率运行(V) 按钮(使用覆盖率运行按钮)。

    使用覆盖率启动应用程序

    运行配置中指定的网址将在浏览器中打开。

  3. 要了解页面加载期间执行了哪些代码,只需加载应用程序,然后点击工具栏上 停止 按钮(停止按钮 ),位于 使用覆盖率运行''(V) 按钮(使用覆盖率运行按钮 )旁边,或在 运行 工具窗口中停止应用程序即可。 如果您需要关于应用程序某些特性的覆盖率报告,请在浏览器中触发这些特性,然后再点击 停止 按钮(停止按钮 )以停止应用程序。

  4. 覆盖率 工具窗口中查看报告。 项目 工具窗口 Alt+1 显示有关文件和文件夹的覆盖率信息。 在编辑器中,标尺显示的是执行过的代码行的绿色标记和未执行代码行的红色标记。 您还可以将鼠标悬停在行标记上,以查看每行代码被执行的次数。

    覆盖率报告
最后修改日期: 2025年 9月 26日