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.

Debugger panel's Pause on exceptions button

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.

To learn more about debugging JavaScript on Google Chrome, refer to the Google Chrome DevTools website.

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.

Source code in the lightning/n/modules/c 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 (DevTools Settings icon ) | 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.

As described previously, you can leverage the browser’s functionality to automatically pause JavaScript execution when an error is caught. When you enable Pause on exceptions, the browser halts on exceptions that are caused by Salesforce code and your code.

We recommend that you use the ignore list feature, which is available in Chrome and Firefox. The ignore list enables you to exclude certain JavaScript files from pausing, so you only pause on your own exceptions.

Chrome lets you set regular expressions to add files to the ignore list. Add this pattern to exclude most JavaScript errors that surface from components that aren’t yours.

  1. In DevTool Settings, click Ignore List.
  2. Click Add pattern.
  3. Enter /components/.*.js$ and click Add.

You can add other JavaScript libraries that get in your way. For example, in the Call Stack panel, right-click on a library you want to ignore and select Add script to ignore list.

See Also