Debugging LWC JavaScript in Chrome DevTools

Sprinkling console.log everywhere and redeploying works – slowly. A few DevTools skills make LWC debugging dramatically faster: readable source code, breakpoints, a handful of console methods most people never use, and knowing what the common error messages actually mean.

Step 1: debug mode

In production mode Salesforce serves minified JavaScript – single-letter variables, one giant line. Enable debug mode for your user (Setup → Debug Mode → select the user → Enable) and you get your original, readable code plus extra framework warnings. Pages load slower in debug mode, so only enable it for developers, and switch it off when you're done.

Step 2: breakpoints

You can also put a debugger; statement in your code: when DevTools is open, execution pauses there. Remove it before committing – the LWC ESLint config flags it.

handleSave() {
    const fields = this.collectFields();
    debugger;                   // pauses here while DevTools is open
    this.save(fields);
}

Useful extras: "Pause on caught exceptions" finds errors that a catch block quietly swallowed, and logpoints (right-click a line number → Add logpoint) log a value without changing or redeploying code.

Console methods worth knowing

const accounts = [
    { Name: 'Acme', Industry: 'Energy', Rating: 'Hot' },
    { Name: 'Globex', Industry: 'Retail', Rating: 'Warm' },
];

console.table(accounts);                           // arrays of records as a table

console.group('Save flow');                        // indent related messages
console.log('validating 2 records');
console.log('calling Apex');
console.groupEnd();

for (const a of accounts) console.count(a.Rating === 'Hot' ? 'hot' : 'other');

console.assert(accounts.length === 3, 'expected 3 accounts, got', accounts.length);   // logs only when false
console.log({ accountCount: accounts.length });    // wrap in {} to print the variable name too

┌─────────┬──────────┬──────────┬────────┐
│ (index) │ Name     │ Industry │ Rating │
├─────────┼──────────┼──────────┼────────┤
│ 0       │ 'Acme'   │ 'Energy' │ 'Hot'  │
│ 1       │ 'Globex' │ 'Retail' │ 'Warm' │
└─────────┴──────────┴──────────┴────────┘
Save flow
  validating 2 records
  calling Apex
hot: 1
other: 1
Assertion failed: expected 3 accounts, got 2
{ accountCount: 2 }

Also handy: console.time('load') / console.timeEnd('load') to measure how long something takes, and console.trace() to see which code called a function.

Reading LWC proxies

Log a wire result or an @api object and the console shows Proxy {}. You have three options:

• console.log(JSON.stringify(this.records, null, 2)) – quick and always works.
• console.log(JSON.parse(JSON.stringify(this.records))) – a plain copy you can expand in the console.
• In DevTools settings, enable Custom formatters. In debug mode LWC uses them to show the real values inside proxies.

Common errors and what they mean

Practice

Summary