Debugging LWC with Chrome DevTools

Learn how to debug Lightning Web Components (LWC) using console.log() for basic debugging and Chrome DevTools breakpoints for advanced debugging.

1. Basic Debugging — console.log()

Debugging JavaScript code using the console.log(..) method is a common practice. By using this method, we can print variables and error messages in our code, and view these messages in the browser console (Inspector > Console tab).

This is a straightforward way to display values. However, to see objects and array data in a more readable format, we often need to use methods like JSON.parse and JSON.stringify.

⚠️ Important: Excessive use of console.log can slow down the browser. We have to remove all debug statements in code before moving to PROD.

2. console.log() with JSON.stringify

When logging objects or arrays, use JSON.stringify() to print the data in a readable format. Without it, the console shows [object Object] which is not useful.

handleRemove(event){ // JS method, will be called from CMD
    const contactId = event.target.dataset.contactId;
    console.log('Contact id' + contactId);
    console.log('Records Data' + this.records);
    console.log('Records data with parsing ' + JSON.stringify(this.records));
}

• console.log('Records Data' + this.records) → prints [object Object],[object Object] — not useful.
• JSON.stringify(this.records) → prints the full object data in a readable JSON format.
• These debugs don't provide advanced features like breakpoints, call stack inspection, or step-through debugging.

3. Advanced Debugging — Chrome DevTools Breakpoints

We can set up breakpoints in our JS code to see how it executes and what the variable values are line by line. This is the most clean approach.

Let's open the Chrome DevTools and go to the Sources tab. On the left panel, we see the modules/c sub folder that contains our component JS files.

Steps to use breakpoints in Chrome DevTools:
• Open Chrome DevTools → go to the Sources tab.
• On the left panel, look for the modules/c sub folder — this contains your component JS files.
• Click on your component JS file (e.g., debugComponents.js).
• Click on the line number where you want to set a breakpoint — a blue marker will appear.
• Reload or trigger the action in the UI — execution will pause at the breakpoint.
• Inspect variable values, call stack, and step through the code line by line.

4. Enable Debug Mode for Source Files

If the source files are not found in the modules/c folder for any user, update the UserPreferencesUserDebugModePref field to TRUE in the user object. Setting this field to true enables detailed logging during execution.

// Enable Debug Mode via Salesforce Setup:
// Setup → Debug Mode → Enable for your user
// OR update via Anonymous Apex:

User u = [SELECT Id FROM User WHERE Username = 'your@email.com' LIMIT 1];
u.UserPreferencesUserDebugModePref = true;
update u;

• Debug mode makes LWC source files visible and readable in Chrome DevTools Sources tab.
• Without debug mode, code is minified and difficult to read or set breakpoints in.
• ⚠️ Do NOT enable debug mode in Production — it increases file size 2x and slows performance 4x.

5. CSS Hacks for Debugging UI

Chrome DevTools also provides useful CSS hacks for inspecting and testing UI changes in real time.

• element.style rule — Apply different CSS styles for elements in real time directly from the Elements panel.
• document.designMode = 'on' — Run this in the Console tab. It allows you to click and edit the inner text of any element directly on the page.

// Run in Chrome DevTools Console tab:
document.designMode = 'on'

⚠️ These changes will be lost once the page is refreshed. They are useful for experimenting and testing designs on the page before applying them permanently in your code.

6. Debugging Quick Reference

Basic Debugging:
• Use console.log() to print simple values.
• Use JSON.stringify() for objects and arrays.
• Remove all console.log() statements before deploying to PROD.

Advanced Debugging:
• Open Chrome DevTools → Sources tab → modules/c folder.
• Set breakpoints by clicking line numbers in your JS file.
• Enable UserPreferencesUserDebugModePref = true if source files are not visible.
• Step through code line by line to inspect variable values and call stack.

CSS Debugging:
• Use element.style in Elements panel to test styles in real time.
• Use document.designMode = 'on' in Console to edit page text directly.