Debugging like a pro: DevTools and VS Code

Read the error first

In beginner module 1 you opened the Console and saw red errors. Now read them like a pro. An error has three parts: the type (what kind of problem), the message (what exactly), and the stack trace: the list of function calls that led to it, newest first, each with a file name and line number.

Uncaught TypeError: Cannot read properties of undefined (reading 'price')
    at cartTotal (cart.js:5:31)
    at updateSummary (main.js:22:17)
    at HTMLButtonElement.<anonymous> (main.js:40:5)

const cart = [{ name: 'Rice', price: 60, qty: 2 }, { name: 'Dal', price: 40, qty: 1 }];
console.log({ cart });          // the braces print the name with the value
console.table(cart);            // an array of objects as a neat table
console.warn('Stock is low');   // yellow warning
console.error('Payment failed'); // red error, with a stack trace
console.group('Checkout');      // indent related logs together
console.log('step 1: address');
console.groupEnd();
console.time('load');           // measure how long something takes
// ...work...
console.timeEnd('load');        // load: 123 ms

Breakpoints: pause and look inside

A breakpoint pauses your code at one line, so you can see every variable at that moment. Open DevTools > Sources, open your file (Ctrl+P finds it by name), and click a line number. Reload or click the button, and the code stops there. You can also write the statement debugger; in your code: it pauses there whenever DevTools is open.

• Scope pane: every local variable and its value right now. Hover over a variable in the code to see it too.
• Watch: add expressions such as total or items.length; they update after every step.
• Call Stack: how you got here, like the stack trace.
• Conditional breakpoint: right-click a line number and pause only when, say, i === 3.
• Logpoint: right-click a line number to log a value without editing your file.

The Network panel

• Filter by Fetch/XHR to see only API calls. Click one to see its headers, the payload you sent and the response.
• Status column: spot 404s and 500s in red at a glance.
• Time and Waterfall columns: find the slow request.
• Throttling: choose "Slow 4G" to feel the page as a user on a weak mobile network does.
• Disable cache (works while DevTools is open): make sure you see your newest files.
• Preserve log: keep requests when the page reloads or moves to another page.

The Application panel shows what the page stored: Local storage, Session storage and Cookies. You can read, edit and delete values here. "Clear site data" resets everything, which is a quick way to test what a brand-new visitor sees.

Set up VS Code to catch bugs early

• Prettier extension: formats your code the same way every time.
• ESLint extension: underlines likely bugs, such as unused variables or using a variable before it is defined.
• Format on save: turn it on once and never fix spacing by hand again.
• Ctrl+P: open any file by name. Ctrl+Shift+F: search the whole project.
• Multi-cursor: Alt+Click adds cursors; Ctrl+D selects the next match of the word, so you can rename several at once. F2 renames a variable everywhere it is used.
• Integrated terminal: Ctrl+` opens a terminal inside VS Code for npm and git commands.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

A debugging checklist

1. Reproduce it: find exact steps that make the bug happen every time.
2. Read the full error and click the first line of your own code in the stack trace.
3. Check your guess with values: console.log, or better, a breakpoint.
4. Shrink the problem: comment out parts until the bug disappears, then look at the last part removed.
5. Check the Network panel for failed requests and the Application panel for old stored data.
6. Fix one thing at a time, then test again, including on a phone-sized screen.