Debug Using Chrome DevTools
To debug Lightning web components code, use Chrome DevTools.
Google Chrome includes a comprehensive suite of excellent web development tools, Chrome DevTools. These tools are great for debugging your Lightning web components.
To get started, load the simplest page possible that can run your Lightning component. Then open DevTools.
- On Windows and Linux, press Control-Shift-I in your Google Chrome browser.
- On Mac, press Option-Command-I.
- On any platform, press F12 or right-click in the page and select Inspect.
To quickly find which line of code is failing, in the Sources panel, enable the Pause on all exceptions option in the DevTools debugger panel before running your code.
When you enable Pause on exceptions, the browser halts on exceptions that are caused by Salesforce code, other library code, and your component code. For information about filtering out exceptions, see Ignore Errors From Framework Code.
Check out Troubleshooting Lightning Web Components on Trailhead for step-by-step instructions using Chrome DevTools with Lightning web components.
In the Sources panel of Chrome DevTools, find your Lightning web component code in the Page pane in the
lightning/n/modules folder. Here you see components in the default
c namespace folder.
If you’re debugging with Lightning Web Security enabled in the org, your component code is in the
lws folder. For more info about debugging with LWS enabled, see Debug Components in an Org With LWS Enabled.
More debugging features are available when you enable custom formatters.
In Chrome DevTools, select Settings () | Preferences | Console | Enable custom formatters.
The custom formatter for Lightning Web Components lets you see the real values contained in proxy objects. While you don’t see proxy objects while debugging, they’re still present and preventing modifications. The custom formatter enables visibility into the proxies without removing them.
If Lightning Web Security is enabled in the org, custom formatters also let you see additional messages and a filtered call stack in the DevTools console. See Debug Components in an Org With LWS Enabled.
In debug mode, the Lightning Web Components engine identifies bad patterns that are only detectable during runtime, and prints them as console warnings.
It’s a best practice to develop your Lightning web components in an org using debug mode. You can improve your code while you develop by using feedback from the LWC engine.
One way to filter for only your own components is to remove the “info” log level to hide the stack traces.
- In DevTool Settings, click Ignore List.
- Click Add pattern.
/components/.*.js$and click Add.
- Trailhead: Troubleshoot Lightning Web Components
- lwc-recipes repository
- Debug Components in an Org With LWS Enabled