# Debug LWC

LWC is built using standard HTML and JavaScript, and on the desktop they run in a variety of supported browsers. You can use standard browser and JavaScript debugging tools, like Chrome DevTools, to debug your components during development. To review mobile-specific features, use a mobile device or virtual device build.

The simplest way to run and debug a component during development is to run your project in debug mode. For example, if you use LWC via the LWR on Node.js, set the LWR server mode to dev mode. Then load the page in your preferred browser and use your favorite inspection and debugging tools. LWC debugging is optimized for Chrome DevTools.

# Debug Using Chrome DevTools

To debug your LWC 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 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 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 framework code, other library code, and your component code.

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

# Find Your Code in the Sources Panel

In the Sources panel of Chrome DevTools, find your LWC code in the Page pane in the dist folder. Here you see the JavaScript file that imports your components.

Add a breakpoint to your JavaScript code. DevTools pauses before this line of code is executed. Alternatively, you can call debugger; from your code instead.

To learn more about working with breakpoints, see Pause your code with breakpoints.

# Enable Custom Formatters

More debugging features are available when you enable custom formatters.

In Chrome DevTools, select Settings | Preferences | Console | Enable custom formatters.

LWC uses JavaScript proxies to enforce that certain types of data are read-only, like data that is provisioned via @api and @wire decorated properties. To simplify readability, these proxies are available via the custom formatters. You'll see the real value instead of the proxy object in Chrome. We use proxies to observe data mutation for @track decorated properties.

# Console Warnings from the LWC Engine

In debug mode, the LWC 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 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.

# Debug Wire Adapters

When you receive data via an @wire, your data is either bound to a function or a property. If you use a wired function, you can debug based on the deconstructed data and error property in the Sources panel of Chrome DevTools. Alternatively, you can debug a wired function using the following method for debugging a wired property or method.

If you use a wired property or method on a component, debug information is available via the custom object formatter in Chrome DevTools. Each wired property or method has the following shape:

• data—The last value returned by the wire adapter
• config—The last config reported to the wire adapter
• context—For context wire adapters only
• isDataProvisionedForConfig—A boolean that returns whether or not the data provisioned by the wire adapter correspond to the config. Returns true if the adapter emits data after a config was reported.

Inspect a component instance using this or inspect a rendered LWC custom element. For example, you can click the <x-event-with-data> element in the Elements panel of Chrome DevTools.

After you click on the element, go to the Console panel and enter $0. The debug information is returned.