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.