View Debug Information for Your Wired Properties Spring'23 release

 

Access debug information for wired properties and methods on a component via custom formatters in Chrome DevTools.

Where: This change applies to custom Lightning web components in Lightning Experience, Experience Builder sites, and all versions of the Salesforce mobile app. This change also applies to Lightning web components in Open Source.

Why: Previously, to debug data received with a wired property, you had to use a wired function to return your data and inspect the deconstructed data and error properties.

How: Consider a wired property that looks like this.

import { LightningElement, wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class ApexWireMethodToProperty extends LightningElement {
    @wire(getContactList) contacts;
}

NOTE For a full example, see the apexWireMethodToProperty component in the lwc-recipes repo.

To start debugging your wire adapter:

1. Enable debug mode in your org.
2. Open Chrome DevTools, and then enable custom formatters.
3. Find your code in the Sources panel.

Next, inspect your component using this or inspect the rendered custom element. To inspect the rendered custom element, click the <c-apex-wire-method-to-property> element in the Elements panel of Chrome DevTools.

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

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

• data—The last value returned by the wire adapter.
• config—The last configuration object reported to the wire adapter.
• context—Only for context wire adapters.
• isDataProvisionedForConfig—A boolean that specifies whether the data provisioned by the wire adapter corresponds to the config. Returns true if the adapter emits data after a config was reported.