Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

While debugging javascript, is there a way to alert current call stack?

For simple javascript debugging I'll use alerts to show variable values and the like. Is there a way to get the current call stack in javascript to be able to display it in an alert?

Thanks.

like image 982
rosscj2533 Avatar asked Jan 13 '10 21:01

rosscj2533


People also ask

How do you Debug a call stack?

While debugging, in the Debug menu, select Windows > Call Stack or press ctrl + alt + C . A yellow arrow identifies the stack frame where the execution pointer is currently located. By default, this stack frame's information appears in the source, Locals, Autos, Watch, and Disassembly windows.

Does JavaScript have a call stack?

JavaScript is the single-threaded programming language. This means that the JavaScript engine has only one call stack. Therefore, it only can do one thing at a time. When executing a script, the JavaScript engine executes code from top to bottom, line by line.

Why is JavaScript so hard to Debug?

What makes JavaScript great is also what makes it frustrating to debug. Its asynchronous nature makes it easy to manipulate the DOM in response to user events, but it also makes it difficult to locate problems.


1 Answers

Quick and dirty in Gecko-based browsers:

new Error().stack 

You can also manually trawl some of the stack using Function.prototype.caller:

var thisFunction = arguments.callee; var caller = thisFunction.caller; var callerCaller = caller.caller; // ...and eventually, assuming no recursion: var bottomCaller = ...; assert(bottomCaller.caller === null); 

One (possibly large) caveat of the .caller trick is that it doesn't handle recursion -- .caller looks from the top of the stack downward to find the first instance of the function in the stack and then returns its immediate caller, so without being careful you can loop infinitely looking up callers.

Another caveat to caller is that, going forward, if any of your code uses ECMAScript 5's strict mode, the caller property of strict mode functions (or of functions which have themselves been called from strict mode functions) is a so-called "poison pill" which throws a TypeError when accessed. The caller property of "bound" functions (those created by ES5's Function.prototype.bind method) is also a poison pill. These restrictions break the generic stack-walking algorithm, although one could imagine use-specific ways to work around this (entry and exit annotating functions, perhaps).

Do note that stack-walking like this isn't a great idea in production code (as a quick hack for debugging it's fine, tho); at the moment walking up the stack as in the latter example is somewhat expensive in Mozilla's JS engine, and it'll probably throw you out of machine code and back into interpreted code. Also, the stack-walk is O(n2), which might matter if you tend to have complex, deep stacks.

like image 95
Jeff Walden Avatar answered Oct 06 '22 09:10

Jeff Walden