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
