Javascript debug in Firefox: how to show the stack of calls with error

Question

I am doing a web application. In Firefox, I am able to use Web Developer's Debugger tool.

In my Javascript code, I got the error in Firefox

TypeError: a is undefined

The above error happened in jQuery.

I know that the data I pass to jQuery is not right. However, there are many jQuery calls in my code and I don't know which call leads to this error.

Anyway to show the stack of calls that lead to an error via Debugger? The way Java shows error stack trace?

Thanks!

Answer 1

Here is what I did.

Use development version of jQuery (not the file with min in it).

Find the error line in jQuery. Before it, insert the following:

console.trace();

console.trace() shows the trace.

I am not sure whether there is any easier way.

Hope this helps someone else.

Cheers.

Answer 2

July 2018 UPDATE

Context: I bumped into this question because I couldn't find the stacktrace in the Debugger tool of the FF console anymore (FF 61).

In the many versions that followed, at the epoch of the original question, the stack trace was obvious to see in the console (F12). But despite what is being said today in the official documentation for FF42+ (see https://developer.mozilla.org/en-US/docs/Tools/Debugger), I am not able to see the Call Stack tab anymore in the console of Firefox 61. The trick is to revert to the old debugging front-end, by following their hint:

set "devtools.debugger.new-debugger-frontend" preference to false in the about:config section of the browser.

Restart, and the Call Stack tab should then appear on the left of the Debugging console (see image attached).