如何在 JS 源代码中显示行级分析？答案

【问题标题】：How to reveal line level profiling in JS sources?如何在 JS 源代码中显示行级分析？
【发布时间】：2018-08-09 20:10:34
【问题描述】：

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

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

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

如何显示此功能？

谢谢。

【问题讨论】：

我刚刚在我的 Mac 上的 Chrome 68 上尝试过它，它按预期工作。你在什么操作系统上？什么 Chrome 版本？您可以通过chrome://version查看。
你有没有JavaScript samples disabled？
我也遇到了同样的问题，非常令人沮丧！我试过重置 DevTools 设置，重置所有 Chrome 的设置，但没有任何效果。 @KayceBasques，我看了很多次，发现我没有选中“禁用 JavaScript 示例”框。一种解决方法是转到右侧的 3 个点，更多工具，JavaScript 分析器。但是，这以前是内置在“性能”面板中的。出于工作流程的原因，我真的需要将其内置到 Performance 中。
我看到了同样的问题。刚刚升级到 v72，它仍然无法正常工作，每行计时列只是没有出现。 @KayceBasques ？

【解决方案1】：

它似乎已被删除到新标签。你可以试试这个：

【讨论】：

【解决方案2】：

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

我的代码是用 typescript 编写的，并使用 esbuild 转换为带有源映射的 JScript。

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

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

我可以发誓过去我已经看到它与源地图一起工作，但现在我不太确定。如果线路时序确实适用于源地图，那就太好了，但它们不适用是有道理的。

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

【讨论】：