Inspecting Variables and the Sources Panel

The Sources panel (called Debugger in Firefox) is where you read your code in the browser and debug it.

The layout

• Left: a file tree: pages, scripts, folders and sometimes extension files.
• Centre: the code editor for the selected file.
• Right: the debugging tools: breakpoints, watch, scope, call stack.

Open a file quickly with Ctrl + P (Cmd + P on Mac) and start typing its name.

Reading values

When paused at a breakpoint (Breakpoints and debugger), you can inspect data in several ways:

1. Hover over a variable in the code to see a tooltip with its value, and expand objects.
2. Scope panel: lists Local, Closure and Global variables with current values.
3. Console: type a variable name or any expression. It runs in the paused scope.
4. Watch: add an expression (cart.items.length, total > 100) that is evaluated on every pause. The result updates as you step.

Edit while paused

In the console you can change a variable (total = 0) and continue, to test a fix without editing the file. Some browsers also let you edit the source in the panel and save changes (for local files), then re-run.

Understanding the call stack

The Call Stack panel lists the functions that are currently running, with the most recent at the top. Each entry is where a function was called. Click an entry to see the code and the variables at that moment.

1
2
3

calculateTotal   (cart.js:12)      ← the function that is paused
renderCart       (cart.js:30)      ← called calculateTotal
onClick          (main.js:8)       ← called renderCart

If a value is wrong, trace back through the stack to see who gave it that value.

Async call stacks

Modern DevTools show async stack traces: the chain of awaits and promises, so you can see which function started the async work.

Source maps

Production code is often minified or bundled, and unreadable. A source map (.map file) lets DevTools show your original files and names. If you see readable names in a bundled app, a source map is working. If not, check the settings Enable JavaScript source maps.

Inspecting objects in the console

1
2
3
4
5

const state = { user: { name: "Maya" }, items: [1, 2, 3] };

console.log(state);              // → { user: { name: Maya }, items: [1, 2, 3] }
console.log(Object.keys(state)); // → ["user", "items"]
console.log(typeof state.items, Array.isArray(state.items)); // → object true

In the browser console you can click the arrow to expand each level.

Useful console shortcuts (only in the DevTools console)

Use the right panel