how to use console.dir and console.table to debug in javascript file lwc component - Salesforce Globe For You

 how to use console.dir and console.table to debug in javascript file lwc component  - Salesforce Globe For You 

Solution: console.log is used to display all properties of the javascript object.

Console.table is used to display in the form of table.

Example:

callApexMethodFromLWC.html

<template>

    <lightning-Card title="Display Console">

        <lightning-button variant="brand" label="Call Apex method" title="Call Apex method to display 5 Leads" onclick={callApexMethod} class="slds-m-left_x-small"></lightning-button>

        <div style="height: 300px;">

            <lightning-datatable

                    key-field="id"

                    data={lstLeads}

                    show-row-number-column="true"

                    columns={columns}>

            </lightning-datatable>

        </div>    

    </lightning-Card>

</template>

CallApexMethodFromLWC.js

import { LightningElement,track } from 'lwc';

import getLeads from '@salesforce/apex/LeadController.getLeads';

const columns = [

    { label: 'Id', fieldName: 'Id' },

    { label: 'Name', fieldName: 'Name'}

 ];

export default class CallApexMethodFromLWC extends LightningElement {

    @track lstLeads;

    columns = columns;

    callApexMethod() {

        getLeads()

            .then(result => {

                this.lstLeads = result;

                console.dir(result);

                console.table(result);

                console.log(result);

            })

            .catch(error => {

                this.error = error;

            });

    }

}

callApexMethodFromLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>51.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output:When you do inspect element and see the output will be