如何在 Chrome 的性能分析器中调试匿名 JavaScript 函数？答案

【问题标题】：How can I debug anonymous JavaScript functions in Chrome's performance analyzer?如何在 Chrome 的性能分析器中调试匿名 JavaScript 函数？
【发布时间】：2023-03-07 23:14:01
【问题描述】：

我正在使用 Angular 4，并且正在使用许多匿名箭头函数 (() => {})。是否可以在不给它们命名的情况下确定我在 Chrome 的性能分析器中调试了哪些函数？

这是我正在查看的示例；

【问题讨论】：

我不想像这篇文章那样创建一个包含所有匿名函数的变量。我想跟踪匿名函数，我应该更改帖子的标题，
How do I write a named arrow function in ES2015?的可能重复
基于编辑/澄清，我撤回了我的欺骗投票，但我怀疑答案可能仍然是“你不能，你需要命名它们”，the post I originally linked to 向你展示如何。
我认为这是一个完全有效的问题，除非确实存在与此完全相同的问题的重复，否则应删除接近投票。如果有的话，DevTools 需要为这个非常明显的用例提供更直接的 UI。

标签： javascript angular performance google-chrome google-chrome-devtools

【解决方案1】：

点击Main图表中的函数将其选中。 DevTools 将其突出显示为蓝色。在摘要标签中，您可以看到有关该功能的更多信息。

点击Function旁边的链接以在Sources面板中查看该函数的源代码。

我认为性能面板会自动格式化压缩文件，但如果没有，您可以通过单击 Format 手动取消压缩。

【讨论】：