如何在 JS 源中显示行级分析？

Question

我已阅读这篇关于分析运行时性能的文章。下图是从这篇文章复制的。如果您检查此图像，文件中每一行旁边都会有黄色突出显示的 JS 文件执行时间提示。

我发现这个线路级分析功能非常有用，我也想在我自己的项目中尝试一下。

但是，当我在源选项卡中打开 JS 源文件时，我看不到它。请注意，我已经拍摄了性能分析快照。但我仍然看不到这个执行时间提示。

我怎样才能揭示这个功能？

谢谢。

Answer 1

它似乎已被删除到新选项卡。 你可以试试这个：

1. 打开 javascript 配置文件选项卡（或在 win 上按 ctrl+shift+p 并输入 javascript 配置文件）
2. 开始录制站点并刷新
3. 停止记录

4. 点击其中一个js文件

5. 您得到了您所需要的

Answer 2

我也没有从分析器中看到逐行计时，这让我发疯了好几天。

我的代码是用 TypeScript 编写的，并使用 esbuild 将源映射转换为 JavaScript。

当我在 esbuild 中关闭源映射时，行计时从分析器中重新出现！

JavaScript 与 TypeScript 足够接近，因此行计时仍然有用。

我可以发誓我过去曾见过它与源映射一起工作，但现在我不太确定。如果线路时序确实能够与源映射一起工作，那就太好了，但它们不工作也是有道理的。

还有其他人看到分析器行计时在打开源映射的代码上工作吗？

Answer 3

我有同样的问题，但当我取消选择复选框时它开始工作：

Disable JavaScript samples

。它在启用源映射的情况下也能正常工作。