CodeBlanks Logo Icon CodeBlanks
Login Register

Call traces with console.trace

JavaScript course · Beginner · Lesson 124/133

Learn to see a function's call stack with console.trace.

Call traces with console.trace

console.trace() prints the call stack from the point where it is called. The call stack shows which function called which up to that point: the innermost call appears at the top and the outermost call at the bottom.

This answers the question "which chain of functions reached this line?". It is very useful when tracing a bug or an unexpected call.

How to read the call stack

The call stack is listed from the innermost call to the outermost. For example, if function a calls b, b calls c, and c contains console.trace(), the stack appears in the order c → b → a.

The top line is the function that contains console.trace. As you go down you see the calling functions. This order shows the path the bug took to appear.

Exercise See the call trace with console.trace

Define a function called greet. Inside it, call console.trace("greet called"). Then call the greet() function. This way you see the call stack in the console.

Show example solution 
function greet() {
  console.trace("greet called");
}

greet();

Test yourself

  1. What does console.trace() print?

    • Only the word 'trace'
    • The call stack
    • The value of every variable
    • The running time of the code
    Show answer

    The call stack — Correct. console.trace shows the call stack.

  2. Complete the console.trace call

    function helper() {
  console.____();
}
    Show answer 
    function helper() {
  console.trace();
}

  3. Match the call stack

    Innermost call
    Top line of the stack
    Outermost call
    Bottom line of the stack
    console.trace()
    Prints the call chain
    Call stack
    Which function called which

All lessons in Beginner

1 Variables and data types

  1. Declaring variables
  2. Difference between const and let
  3. First data types
  4. Difference between null and undefined
  5. The typeof operator
  6. Summary - Variables and types

2 Operators

  1. Arithmetic operators
  2. Assignment operators
  3. Comparison operators
  4. Logical operators
  5. Operator precedence
  6. Summary - Operators

3 Conditionals

  1. The if statement
  2. else and else if
  3. The switch statement
  4. The ternary operator
  5. Comparison pitfalls
  6. Summary - Conditionals

4 Numbers and Math

  1. Integers and decimals
  2. The Math object
  3. Math.random and Math.min/max
  4. NaN and Infinity
  5. Converting to numbers
  6. Summary - Numbers and Math

5 Project: Calculator

  1. Project: Calculator
  2. Number input and operator selection
  3. Computing the operation
  4. Handling error cases
  5. Project final - Calculator

6 String basics

  1. Creating strings
  2. length and character access
  3. String concatenation
  4. Template literals
  5. Escape sequences
  6. Summary - String basics

7 Loops

  1. The for loop
  2. The while loop
  3. The do...while loop
  4. break and continue
  5. Nested loops
  6. Summary - Loops

8 Array basics

  1. Creating and accessing arrays
  2. Adding elements to arrays
  3. Removing elements from arrays
  4. length and index relationship
  5. Multidimensional arrays
  6. Summary - Array basics

9 Functions

  1. Defining and calling functions
  2. The return statement
  3. Parameters and arguments
  4. Function expressions
  5. Scope basics
  6. Summary - Functions

10 Project: Shopping cart

  1. Project: Shopping cart
  2. Defining the product list
  3. Adding products to the cart
  4. Computing the total
  5. Project final - Shopping cart

11 Array iteration

  1. Looping with forEach
  2. The for...of loop
  3. Searching with indexOf
  4. Checking with includes
  5. findIndex and some
  6. Summary - Array iteration

12 Array transformations

  1. Transforming with map
  2. Filtering with filter
  3. Finding with find
  4. some and every
  5. Reducing with reduce
  6. Summary - Array transformations

13 Objects

  1. Creating objects
  2. Property access
  3. Adding and changing properties
  4. Defining methods
  5. The this keyword
  6. Summary - Objects

14 Project: Quiz app

  1. Project: Quiz app
  2. Defining question objects
  3. Showing questions and getting answers
  4. Computing the score
  5. Project final - Quiz

15 Parameters

  1. Default parameters
  2. The rest parameter
  3. The arguments object
  4. Return value types
  5. Helper functions
  6. Summary - Parameters

16 Boolean logic

  1. Boolean values
  2. Short-circuit evaluation
  3. Nullish coalescing
  4. Optional chaining
  5. Logical assignment
  6. Summary - Boolean logic

17 Type conversion

  1. Explicit type conversion
  2. Implicit type coercion
  3. Difference between == and ===
  4. Truthy and falsy values
  5. Common conversion pitfalls
  6. Summary - Type conversion

18 Project: To-do list

  1. Project: To-do list
  2. Designing the task object
  3. Adding and listing tasks
  4. Completing and deleting tasks
  5. Project final - To-do list

19 Advanced string methods

  1. slice and substring
  2. replace and replaceAll
  3. split and join
  4. trim, padStart, padEnd
  5. Case and includes
  6. Summary - Advanced string methods

20 Console methods

  1. console.log basics
  2. console.warn and console.error
  3. Tables with console.table
  4. console.group and groupEnd
  5. Timing with console.time
  6. Summary - Console methods

21 Errors

  1. try...catch basics
  2. Throwing errors with throw
  3. The Error object
  4. The finally block
  5. Common error types
  6. Summary - Errors

22 Debugging

  1. What is debugging?
  2. Call traces with console.trace
  3. The debugger statement
  4. Checking with console.assert
  5. Common bug patterns
  6. Summary - Debugging

23 Beginner final

  1. Challenge - Calculator
  2. Challenge - Array operations
  3. Challenge - Object management
  4. Challenge - String operations
  5. Challenge - Error handling