Printing Stack Traces to the Console
Greetings, friends! Sometimes, it's useful to analyze the stack trace of a program, so you can figure out how functions are nested in your code and the order of execution of those functions.
Let's look at an example. We'll start with an index.html file with the following contents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stack Traces in the Console</title>
</head>
<body>
<h1>Stack Traces in the Console</h1>
<script src="main.js"></script>
</body>
</html>
Then, we'll create a JavaScript file called main.js with the following contents:
function first() {
second();
}
function second() {
third();
}
function third() {
console.trace();
}
first();
Open up the index.html file in the browser. In this tutorial, I am using Google Chrome. If you're using Google Chrome, then you can open up the Chrome DevTools console using the keyboard shortcut Option + Command + J on a Mac or Ctrl + Shift + J on Windows. You should see the following code appear in the console.
console.trace
third @ main.js:10
second @ main.js:6
first @ main.js:2
(anonymous) @ main.js:13
The console.trace method will get invoked, and the path of the function execution will be logged to the console. The first function is invoked, which then invokes the second function, followed by the third function. The text you see in the console is the stack trace showing the function execution in the reverse order if you read it from top to bottom.
Notice that number after the colon in @ main.js:13 refers to the line number of your program. In this case, our program is called main.js. If you ran console.trace directly in Google Chrome's console, then you'd end up with program names such as VM286:13. The VM stands for "Virtual Machine" for those who are curious. It's related to the concept of the V8 engine's virtual machine contexts.
Anyways, I digress. We see that (anonymous) is called on line 13 of our code according to the stack trace. This is actually referring to the first() function call. Next, We enter line 2 of main.js. At this line, we call the second() function. We then go to line 6, which is where we call the third() function. Finally, we reach line 10, where the console.trace() method is called. Behold! The stack trace! 🙌
Using console.trace can be a helpful utility when debugging code. Maybe you want to use it with a third party library to see how it works, or maybe you want to see if there's a function being called that's adding an unnecessary layer to your call stack.
There's something else we can do with console.trace. According to MDN, this method can accept one or more parameters.
trace()
trace(object1, /* ..., */ objectN)
We can pass in a label, so that the browser's console will group the stack traces according to the label. If you pass in more than one parameter to the console.trace function, then they will appear on the same line and under the same label. If you change the contents of main.js to be the following, we should see two groups of stack traces.
function first() {
second();
}
function second() {
third();
console.trace('Trace#', 2);
}
function third() {
console.trace('Trace#', 1);
}
first();
After running this code, you should see the following in your browser's console:
Trace# 1
third @ main.js:11
second @ main.js:6
first @ main.js:2
(anonymous) @ main.js:14
Trace# 2
second @ main.js:7
first @ main.js:2
(anonymous) @ main.js:14
Notice how we passed in Trace# as a separate parameter from 1 yet they appeared on the same line. This helps you add extra information to the group label of your stack trace.
You won't see many developers utilize stack traces, but they can come in handy in certain situations. It's up to you to decide how useful they are towards your development workflow.