Javascript逐步调试器[关闭]

Question

关闭。 此问题不符合Stack Overflow 准则。 它目前不接受答案。

---

想改善这个问题吗？ 更新问题，使其成为 Stack Overflow的主题。

12 个月前关闭。

改进这个问题

是否有软件或调试器能够突出显示在运行很长的脚本（如 JS 脚本）期间执行的所有功能？

Answer 1

您可以使用 Chrome 开发工具。

打开覆盖选项卡

1. 打开命令菜单：按Control + Shift + P或Command + Shift + P (Mac)。 或者，单击自定义和控制 DevTools 自定义和控制 DevTools，然后选择Run命令。
2. 开始键入coverage ，选择 Show Coverage 命令，然后按 Enter 运行该命令。 Coverage 选项卡在 Drawer 中打开。

记录代码覆盖率

1. 单击 Coverage 选项卡中的以下按钮之一
2. 如果您想查看加载页面所需的代码，请单击开始检测覆盖率并重新加载页面 开始检测覆盖率并重新加载页面。
3. 如果您想查看与页面交互后使用了哪些代码，请单击 Instrument Coverage Instrument Coverage。
4. 当您想要停止记录代码覆盖率时，单击停止检测覆盖率并显示结果停止检测覆盖率并显示结果。

分析代码覆盖率

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

• URL 列是被分析的资源的 URL。
• Type 列说明资源是否包含 CSS、JavaScript 或两者。
• Total Bytes 列是资源的总大小（以字节为单位）。
• Unused Bytes 列是未使用的字节数。
• 最后一个未命名的列是 Total Bytes 和 Unused Bytes 列的可视化。 条形的红色部分是未使用的字节。 绿色部分是使用的字节。

来源： https : //developers.google.com/web/tools/chrome-devtools/coverage