2

Is there a way to know who is the caller of a JavaScript function where the caller is not showing in Chrome's call stack? The call stack is filled with Angularjs function calls which are not useful for me. Angular.js is Blackboxed but that seems useful for breakpoints not firing.

I can find the caller by doing a text search for the function name and putting breakpoints on all the callers but that's kludgy.

Also looking for a way to not have angularjs calls show in the call stack. Or is there a way to log all the calls? The actual function caller seems to have scrolled off the call stack pane.

Konrad Dzwinel
  • 36,825
  • 12
  • 98
  • 105
Tony_Henrich
  • 42,411
  • 75
  • 239
  • 374
  • What do you mean by "caller" when it is something that does not appear in the call stack? – Bergi Mar 23 '17 at 01:30
  • A caller is a function or event that calls another function. The call stack pane has a limited space. It can show a limited number of calls between the caller and the called function. – Tony_Henrich Mar 23 '17 at 21:42
  • Unless you are talking about tail calls, the call stack always includes *all* callers. It must remember them to know where to `return` to. – Bergi Mar 23 '17 at 21:44
  • Yeah but if there are 100 calls in between, is it going to show 100? What's in the call stack memory does not necessarily mean it can display all of them in the pane. I have never seen a scroll bar in there. – Tony_Henrich Mar 25 '17 at 02:04
  • Yes, it will. Try for yourself: `(function example(i) { if (i <= 0) debugger; else example(i-1); })(100)` – Bergi Mar 25 '17 at 15:05

2 Answers2

2

If you don't see the caller in the call stack, it can mean that the execution is running in a different context. Tick the Async option on the right-hand side to see the cross-context call stack.

Async

You may see (anonymous) for some of the calls. This is quite typical if you use anonymous callback functions. It's a better debugging experience if you name them. For example: 

function myFunc(cb) {
    setTimeout(cb, 100);
}

myFunc(function myCallback() {
    debugger;
})

Async callback

I don't know Angular, but I've read that stack traces are pretty poor, particular with $http. Some suggest using Bluebird JS promises, which have an option for long stack traces. See discussion here.

Community
  • 1
  • 1
Gideon Pyzer
  • 22,610
  • 7
  • 62
  • 68
0

What I usually do is:

  1. nav your page to where you about to debug
  2. open dev tool
  3. go to Profiles tab
  4. click Start button on Profiles
  5. trigger the event on the page(by clicking or other ways to fire the event)
  6. click Stop button on Profiles
  7. select the profile you just saved
  8. in the profile report, on the top left corner there is a dropdown besides the eye-alike icon, select Tree(Top Down)
  9. expand the tree node to find the event just called and see what's your function was invoked.
  10. you can also search the tree by ctrl+F4(commond+F4 on MAC), and type in keywords, file name accepted
  11. to view the detail or set breakpoint by click the filename link on the right side, you will be redirected to Sources view

Some personal exp is usually I don't know which function the event angular fired, but I do know it's call the .js file with certain name or prefix or suffix. I run the profile and filter out the .js, and click on the filename link and it redirects me to the detail function info in Sources tab

more info for profile: https://developer.chrome.com/devtools/docs/profiles

YoungLearnsToCoding
  • 427
  • 1
  • 3
  • 10