View Debug Information for Wired Properties in Browser Console

 

To simplify the process of debugging data received with a wired property in Lightning Web Components, Chrome DevTools now provides custom formatters that allow you to access debug information directly from the console. Before this feature, you had to use a wired function to return your data and then inspect the deconstructed data and error properties to debug wired properties and methods.

With custom formatters, you can simply log your wired property or method to the console, and the debug information will automatically be formatted and displayed for you. This saves you the trouble of manually inspecting the deconstructed data and error properties.

Here is a step-by-step guide for viewing debug information for wired properties in the Browser Console, starting with enabling debug mode for a selected user.

Enable Debug Mode for a Particular User in OrgEnable Debug Mode for a Particular User in Org

Enter “Debug” in the Quick Find Box. Click on Debug Mode under Lightning Components. Then enable debug mode for users.

Enable Custom Formatters Under Chrome DevToolsEnable Custom Formatters Under Chrome DevTools

After this, enable custom formatters by going to Preferences, and selecting Enable Custom Formatters under the Console section.

Debug Properties and What They Look LikeDebug Properties and What They Look Like

Below is an example that demonstrates how to debug wired properties in LWC.

salesforceDebug.html

<template>

    <lightning-card title="Account" icon-name="standard:lead_list">

        <div class="slds-m-around_medium">

            <template if:true={contact.data}>

                <template for:each={contact.data} for:item="cc">

                    <p key={cc.Id}>{cc.Name}</p>

                </template>

            </template>

        </div>

    </lightning-card>

</template>

salesforceDebug.js

import { LightningElement, wire } from 'lwc';

import Contact from '@salesforce/apex/Contact.fetchContact';

export default class SalesforceDebug extends LightningElement {

    @wire(Contact)

    contact;

}

Final Steps

When a custom component is rendered on UI, to inspect, click on the element in the Elements panel available in Chrome DevTools.

Once the element is clicked, open the Console next to Elements then enter “$0” to return the debug information as you can see below.

😎😎😎😎

DEMO:-