Debug Wire Adapters

Use debug mode to troubleshoot your wire adapters with unminified JavaScript and custom formatting.

The easiest way to debug your wire adapters is via Chrome DevTools.

To debug a wire adapter:

1. Enable debug mode.
2. In Chrome DevTools, enable custom formatters.

When you receive data via an @wire, your data is bound to a function or a property.

If you use a wired function, you can debug based on the deconstructed data and error properties in the Sources panel of Chrome DevTools.

Alternatively, you can debug a wired function using the method described in the next section.

If you use a wired property or method on a component, debug information is available via the custom object formatter.

Each wired property or method returns information with the following shape:

• data—The last value returned by the wire adapter
• config—The last config reported to the wire adapter
• context—Only for context wire adapters
• isDataProvisionedForConfig—A boolean that returns whether or not the data provisioned by the wire adapter corresponds to the config. If a config was reported, it returns true.

Inspect a component instance using this or inspect a rendered LWC custom element. For example, click the <c-apex-wire-method-to-property> element in the Elements panel of Chrome DevTools.

After you click on the element, open the Console panel and enter $0 to return the debug information.