Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sandesh D GanjareSandesh D Ganjare 

Debug LWC component in Dev Tool

Does anyone know, why I am not able to debug the lwc component in dev tool like we do previously? everything is coming under the aura_proddebug file and this is very hard to debug the actual component. Does anyone know about this? please help me.
Suraj Tripathi 47Suraj Tripathi 47

Hey Sandesh D Ganjare,

There is no other way the LWC component will always come in /aura . You have to see that which /aura is your according to debug time. Some time due to using cachable= true or cachable = false you will have a problem in Showing the debug value .

Kindly go through the given below code example to show the debug value.


Examplecode.Html

<template>
  <lightning-card title="List of Contacts - Lightning Web Component" icon-name="custom:custom63">
    <lightning-combobox
        name="Account"
        label="Account"
        placeholder="Choose Account"
        value={value}
        onchange={handleChange}
        options={options}>
    </lightning-combobox>

    <lightning-combobox
        name="contacts"
        label="Contacts"
        placeholder="Choose Contact"
        value={value}
        options={options2}>
    </lightning-combobox>

    <lightning-combobox
        name="Opportunity"
        label="Opportunity"
        placeholder="Choose Opportunity"
        value={value}
        options={options3}>
    </lightning-combobox>
</lightning-card>
</template>

Examplecode.js 
import { LightningElement } from 'lwc';
import getAccount from '@salesforce/apex/AccountController1.getAccount';
import getOpportunity from '@salesforce/apex/AccountController1.getOpportunity';
import getContact from '@salesforce/apex/AccountController1.getContact';
let i=0;
export default class ExampleCode extends LightningElement {
  options;
  value;
  options2;
  options3;
  connectedCallback(){
   getAccount().then(result => {
      var value1 =[];
      for(var name in result){
          value1.push({ label:result[name].Name ,value:result[name].Id })
          console.log(result[name].Name);
      }
      this.options= value1;
      console.log(JSON.stringify(result));
  })
  }
  handleChange(event)
  {
    this.value=event.target.value;
    console.log("value--->"+this.value);
    console.log("inside fun1");
  getContact({ AccId: this.value }).then(result => {
    var value2 =[];
    for(var name in result){
      value2.push({ label:result[name].Name ,value:result[name].Id })
      console.log(result[name].Name);
    }
      this.options2= value2;
      console.log(JSON.stringify(result));
  })

  getOpportunity({ AccId: this.value }).then(result => {
   var value3 =[];
   for(var name in result){

    value3.push({ label:result[name].Name ,value:result[name].Id })
    console.log(result[name].Name);
   }
   this.options3= value3;
   console.log(JSON.stringify(result));
})
}
}
AccountController1.class 
public class AccountController1 {
  @AuraEnabled (cacheable=true)
    public static List<Account> getAccount(){
        System.debug('print any debug you want');
        return [SELECT Id, Name FROM Account];        
    }

    @AuraEnabled (cacheable=true)
    public static List<Contact> getContact(String AccId){
        return [SELECT Id, Name FROM Contact where AccountId=:AccId];        
    }

    @AuraEnabled (cacheable=true)
    public static List<Opportunity> getOpportunity(String AccId){
        return [SELECT Id, Name FROM Opportunity where AccountId=:AccId];        
    }
}

Thanks