Lightning Web Component

Best Ways to Debug LWCs

In this article, you will learn how to Debug Lightning Web Components to find the error that you're looking for.

We will explore the best ways to debug LWCs and provide tips and tricks to make the process easier and more efficient

How to Debug a Lightning Web Component

Console Logging the Variables

The console.log() method that Javascript provides us will be your best answer debug your components since you will be able to know the actual value of a variable once the console.log() is executed on the code.

import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountsDetail.getAccounts';

export default class MyComponent extends LightningElement {

    // CALL APEX CLASS TO GET ACCOUNTS
    retrieveAccounts() {
        getAccounts({name: "John"})
            .then(result => {
                console.log(JSON.stringify(result));
            })
            .catch(err => {
                console.error(err);
            });
    }
}

Sometimes in Javascript, you have variables that are not primitive types like String, Number, Boolean, etc. so I recommend you to use JSON.stringify()(which converts the variable into a string) on your console logs since it will help you to debug the variable value and not the event.

Also, you can use console.error() which will print the variable on the browser console with a red color, indicating to the developer an error on the code.

To see the variables value you just need to go to your browser and press F12 > Console or Right Click > Inspect > Console to open the Browser Developer Tools.

Browser developer tools to see the variable value on a Lightning Web Component

Enable Debug Mode

Salesforce provides you with a feature to activate the debug mode for Lightning Web Components. This Debug Mode can be activated for certain users which you can specify on Setup > Debug Mode.

As you can see in the message above the users select: "Salesforce is slower for users who have debug mode enabled." so do not forget to deactivate it after you debug your components.

Once you have the Debug Mode activated you can add the keyword debugger on your component to pause the code execution and see the behavior of it.

import { LightningElement } from 'lwc';

export default class DebuggerExampleLWC extends LightningElement {
    message = 'Variable Declaration';
    
    // CALL THIS FUNCTION WHEN A BUTTON IS CLICKED
    handleClick() {
        debugger;
        this.message = 'Variable Modified!'
    }
}

Same as above, go to the Browser Developer Tools and refresh the page in which your component is at. When the function with the debugger is executed, the code will be paused and it will take you to the Source tab of the Browser Developer Tools, where you can see your code and when was stopped.

If you want to proceed just click on Resume, otherwise, you can use the Console tab to interact with the value of your variables at the current code execution.

Browser developer tools to see the variable value on a Lightning Web Component

As you can see there, the code was stopped before the value of message was changed to Variable Modified!

Also, using this method you can pause the code execution on exceptions that could be caught or uncaught. To do that just activate these options from the Source tab:

Browser developer tools to pause the code on a Lighting web component exceptions

In some scenarios, if you're using an Apex Class to get the data, the issue could be there. To make sure of that check the response of the Apex Method and if it's not what you're expecting probably the error will be there. Here is a documentation on How to Debug an Apex Class that you can check if you do not know how to do it.