How to Troubleshoot Lightning Web Components Using Chrome DevTools

There are unique JavaScript challenges associated with LWC development. To help LWC component developers overcome these challenges, this blog will focus on setting up the Chrome DevTools environment.

This step makes troubleshoot code much easier.

1. From Setup enter Debug Mode in the Quick Find box, and then select Debug Mode.
2. Check the box next to your user.
3. Click Enable.

As a temporary workaround to work with breakpoints, turn off Lightning Web Security.

1. From Setup enter Session in the Quick Find box, and then select Session Settings.
2. Under Lightning Web Security, uncheck the box for Use Lightning Web Security for Lightning web components.
3. Click Save.

Note: To ensure turning off Lightning web security takes effect, the browser cache needs to be cleared along with select Empty Cache and Hard Reset in your browser.

We assume you already have a LWC components in Salesforce, right click the browser window & select inspect & then click source tab, you can view Devtools menu, source tabs, source panel etc..

The DevTools menu has several options that allow you to view different parts of the browser. we work mostly with Sources and Console.

1. Use the Elements panel to view and change the DOM and CSS.
2. Use the Console panel to read messages such as those created with console.log(), interact with variables, and run JavaScript.
3. Use the Sources panel to view and debug JavaScript files.

Lightning web components use JavaScript proxies to enforce that certain types of data are read-only, primarily data that’s provisioned via decorators (@api, @track, @wire). In Debug Mode, custom formatters manipulate the proxies into readable parts. Then in Chrome DevTools, you see the real value instead of the proxy. Let’s enable the custom formatters.

1. In DevTools, click Settings. 
2. The Preferences page opens.
3. Under Console, select Enable custom formatters.

Ignore List lets you ignore selected JavaScript files when using DevTools, so that you only pause on your own exceptions. This allows you to ignore framework code that you don’t want to troubleshoot.

1.  In Settings, click Ignore List.
2.  Click Add pattern.
3.  Enter /aura_prod.*.js$ and then click Add.
4.  Click Add pattern.
5.  Enter /components/.*.js$ then click Add, then Close Settings.

All of the custom Lightning web components for the current page are in the modules/c folder.

1.  In DevTools, click the Sources tab.
2.  In the File Navigator, under Page, expand lightning/n and then modules/c..
3.  Click any js file. The file opens in the Code Editor.
4.  Here in our example we use Display.js file – In display.js find class Display.

Note: You can notice the code in devtools is compiled, but not minified, so the variable names are not changed. Ignore List Prevent pausing on Exceptions in code that you don’t want to troubleshoot.

Although there are times when the debugger command is necessary, there is a better way to get your code to pause. Add breakpoints in DevTools while you’re viewing the page in the browser. Breakpoints are easier to set and they don’t require code cleanup after using them.

1. Line-of-Code Breakpoints: Locate the Lightning Web Components section, here in this example we used handleIncrement(event) function in the DevTools Code editor, blue pointer highlights the line number that a breakpoint is set. The breakpoint is also shown under Breakpoints in the JavaScript Debugging pane on the right.

2. Event Listener Breakpoints: JavaScript Debugging pane to find Event Listener Breakpoints. Here you can set breakpoints to pause on the event listener code that runs after an event is fired. There are many different options to select from. You can pause on a whole category of events, or pause on only a specific type of event.

With the console.log() command we will know what’s happening while the JavaScript is running. It shows what variables are doing at different states in the script.

DevTools also have another feature called Watch in Debugging pane.

In the JavaScript Debugging pane expand Watch and click Add watch expression (+), Enter event.target.value and press Enter you can Watch the the js file, set the breakpoint & fire the event.

Here in our example we’re paused in the handleAugmentorChange event handler, the event.target.value is active and Watch shows its value. In the JavaScript Debugging pane, we have added this.augmentor to Watch. We can click next step to the next line. Event.target.value changes & this.argument also changes.

Similarly we can add different watch commands to see what happens. Image below will give an overview of Control Option and See What That Does to the Value.

Similarly we can also do Performance & Network Troubleshooting in Lightning Web Components! stay tuned we will come back on these Technical Blog shortly.