4

I'm working with Angular 4 and I'm using a lot of anonymous arrow functions (() => {}). Is it possible to determine which of these functions I'm debugging in Chrome's performance analyzer without giving them names?

Here's an example of what I'm looking at;

Screenshot

Jo Sprague
  • 16,523
  • 10
  • 42
  • 62
J-R Choiniere
  • 634
  • 5
  • 19
  • 1
    I don't want to create a variable containing all anonymous functions like in this post. I want to track anonymous functions, I should change the title of my post, – J-R Choiniere Nov 02 '17 at 14:15
  • Possible duplicate of [How do I write a named arrow function in ES2015?](https://stackoverflow.com/questions/27977525/how-do-i-write-a-named-arrow-function-in-es2015) – Anya Shenanigans Nov 02 '17 at 17:09
  • 2
    Based on the edits/clarifications, I've retracted my dupe vote, but I suspect the answer is probably still "You can't, you need to name them", which [the post I originally linked to](https://stackoverflow.com/questions/27977525/how-do-i-write-a-named-arrow-function-in-es2015) shows you how to. – James Thorpe Nov 02 '17 at 17:09
  • I think this is a totally valid question and the close votes should be removed unless there really is a duplicate of this exact same question. If anything, DevTools needs to provide a more straightforward UI for this pretty obvious use case. – Kayce Basques Nov 02 '17 at 18:22

1 Answers1

1

Click on the function in the Main chart to select it. DevTools highlights it blue. In the Summary tab you can see more info about that function.

Summary tab

Click the link next to Function in order to view that function's source code in the Sources panel.

Sources panel

I think the Performance panel automatically formats minified files, but if not, you can manually unminfiy by clicking Format.

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120