Chrome DevTools for Node.js in Node.js - Step-by-Step Execution

Concept Flow - Chrome DevTools for Node.js

Start Node.js with --inspect

↓

Node.js listens on debug port

↓

Open Chrome DevTools

↓

Connect to Node.js debug port

↓

Set breakpoints, watch variables

↓

Run code step-by-step

↓

Inspect call stack and variables

↓

Fix bugs or understand code

↓

Stop debugging or continue running

This flow shows how to start Node.js with debugging enabled, connect Chrome DevTools, and use it to inspect and control Node.js code execution.

Execution Sample

Node.js

node --inspect-brk app.js
// In Chrome, open chrome://inspect
// Click 'Open dedicated DevTools for Node'
// Set breakpoints and step through code

This code starts Node.js with debugging enabled and shows how to connect Chrome DevTools to debug the Node.js app.

Execution Table

Step	Action	Node.js State	DevTools State	Result
1	Run 'node --inspect-brk app.js'	Node.js waits for debugger connection	Waiting to connect	Node.js paused before first line
2	Open chrome://inspect in Chrome	Still waiting	Detects Node.js debug target	DevTools shows Node.js process
3	Click 'Open dedicated DevTools for Node'	Waiting	DevTools connects to Node.js	Debugger attached, paused at start
4	Set breakpoint in source code	Paused	Breakpoint set	Execution will pause at breakpoint
5	Resume execution	Running	Running	Code runs until breakpoint or end
6	Hit breakpoint	Paused at breakpoint	Paused	Inspect variables and call stack
7	Step over code line	Paused next line	Paused next line	Move through code line by line
8	Inspect variable values	Paused	Shows current variable values	Understand program state
9	Continue running	Running	Running	Program runs until next breakpoint or end
10	Program ends	Exited	Disconnected	Debug session ends

💡 Program ends and debug session disconnects

Variable Tracker

Variable	Start	After Step 6	After Step 8	Final
debuggerAttached	false	true	true	false
executionState	paused at start	paused at breakpoint	paused stepping	exited
currentLine	none	line with breakpoint	next line	none

Key Moments - 3 Insights

Why does Node.js pause immediately after starting with --inspect-brk?

Because the --inspect-brk flag tells Node.js to wait for the debugger to connect before running any code, as shown in execution_table step 1.

How do you know DevTools is connected to Node.js?

In execution_table step 3, DevTools connects and the debugger attaches, pausing Node.js, indicating a successful connection.

What happens when you set a breakpoint in DevTools?

As in step 4, the breakpoint is registered so Node.js will pause execution when it reaches that code line.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does DevTools first connect to Node.js?

A Step 3

B Step 4

C Step 2

D Step 1

💡 Hint

Check the 'DevTools State' column for when it says 'DevTools connects to Node.js'

According to variable_tracker, what is the value of 'debuggerAttached' after step 8?

A undefined

B false

C true

D null

💡 Hint

Look at the 'After Step 8' column for 'debuggerAttached'

If you remove the --inspect-brk flag, what would change in the execution_table?

A Node.js would pause immediately at start

B Node.js would start running immediately without waiting

C DevTools would not detect Node.js process

D Debug session would never end

💡 Hint

Refer to step 1 where --inspect-brk causes Node.js to wait before running

Concept Snapshot

Chrome DevTools for Node.js debugging:
- Start Node.js with --inspect or --inspect-brk
- Open chrome://inspect in Chrome
- Connect DevTools to Node.js debug port
- Set breakpoints and step through code
- Inspect variables and call stack
- Resume or pause execution anytime

Full Transcript

To debug Node.js code using Chrome DevTools, start your Node.js app with the --inspect or --inspect-brk flag. The --inspect-brk flag pauses execution on the first line until the debugger connects. Then, open Chrome and go to chrome://inspect. You will see your Node.js process listed. Click 'Open dedicated DevTools for Node' to connect. Once connected, you can set breakpoints in your code, step through lines, and inspect variables and the call stack. This helps you understand what your code is doing and find bugs. When done, you can continue running the program or stop debugging. This process makes debugging Node.js code visual and interactive.

Practice

1. What is the main purpose of using Chrome DevTools with Node.js?

easy

A. To convert Node.js code to browser JavaScript

B. To write Node.js code faster

C. To deploy Node.js apps to the cloud

D. To pause and inspect Node.js code while it runs

Solution

1. Step 1: Understand Chrome DevTools role

   Chrome DevTools is a tool to debug and inspect running code visually.

2. Step 2: Connect to Node.js debugging

   Using DevTools with Node.js lets you pause and inspect your code during execution.

3. Final Answer:

   To pause and inspect Node.js code while it runs -> Option D

4. Quick Check:

   Debugging = Pause and inspect code [OK]

Hint: DevTools helps you pause and check code live [OK]

Common Mistakes:

• Thinking DevTools is for writing code
• Confusing debugging with deployment
• Assuming DevTools converts code formats

2. Which command correctly starts a Node.js app with debugging enabled for Chrome DevTools?

easy

A. node --inspect app.js

B. node app.js --inspect

C. node app.js --debug

D. node debug app.js

Solution

1. Step 1: Recall correct flag usage

   The debugging flag must come before the script name in the command.

2. Step 2: Check each option

   node --inspect app.js uses 'node --inspect app.js' which is the correct syntax to enable debugging.

3. Final Answer:

   node --inspect app.js -> Option A

4. Quick Check:

   Flag before script = correct syntax [OK]

Hint: Put --inspect before your script name [OK]

Common Mistakes:

• Placing --inspect after the script name
• Using deprecated --debug flag
• Typing 'node debug' which is not a valid command

3. Given this command: node --inspect-brk app.js, what happens when you run it?

medium

A. The app crashes immediately

B. The app runs normally without pausing

C. The app pauses on the first line waiting for debugger

D. The app runs but debugging is disabled

Solution

1. Step 1: Understand --inspect-brk flag

   This flag tells Node.js to start debugging and pause before executing any code.

2. Step 2: Predict behavior on running

   The app will wait for a debugger to connect before running the first line.

3. Final Answer:

   The app pauses on the first line waiting for debugger -> Option C

4. Quick Check:

   --inspect-brk = pause at start [OK]

Hint: --inspect-brk pauses app before first line [OK]

Common Mistakes:

• Thinking app runs immediately
• Confusing --inspect with --inspect-brk
• Assuming app crashes on this flag

4. You run node --inspect app.js but Chrome DevTools does not connect. What is a likely cause?

medium

A. You forgot to open chrome://inspect in Chrome

B. You used --inspect-brk instead of --inspect

C. Your Node.js version is too new

D. You ran the command without node

Solution

1. Step 1: Check connection setup

   To debug, you must open Chrome's chrome://inspect page to connect to Node.js.

2. Step 2: Analyze other options

   Using --inspect-brk is valid and pauses app; Node.js version too new is unlikely cause; running without node would cause error.

3. Final Answer:

   You forgot to open chrome://inspect in Chrome -> Option A

4. Quick Check:

   Open chrome://inspect to connect debugger [OK]

Hint: Always open chrome://inspect to connect debugger [OK]

Common Mistakes:

• Assuming --inspect-brk is required
• Ignoring the need to open Chrome inspect page
• Not running with 'node' command

5. You want to debug a Node.js app that crashes immediately on start. You run node --inspect app.js and connect Chrome DevTools but can't find where it crashes. What should you do to catch the crash at the start?

hard

A. Add debugger; inside app.js after the crash line

B. Run with node --inspect-brk app.js to pause before code runs

C. Run node --inspect app.js with extra logging

D. Use node debug app.js instead

Solution

1. Step 1: Understand crash timing

   If the app crashes immediately, you need to pause before any code runs to inspect it.

2. Step 2: Use correct flag to pause early

   The --inspect-brk flag pauses execution on the first line, letting you catch early crashes.

3. Step 3: Evaluate other options

   Adding debugger; after crash won't help if crash happens before it; extra logging may miss early crash; node debug is outdated.

4. Final Answer:

   Run with node --inspect-brk app.js to pause before code runs -> Option B

5. Quick Check:

   --inspect-brk pauses early to catch crashes [OK]

Hint: Use --inspect-brk to pause before app starts [OK]

Common Mistakes:

• Placing debugger after crash point
• Relying only on logs for early crashes
• Using deprecated debug command