[SalesForce] How to debug HTML file in Lightning Web Components

I am new to Lightning Web Components. I created a LWC that will search for accounts and display the account name. Initially, I was not able to display data in html file because I was using {acc.name} instead of {acc.Name}. I was not able to debug and check value of this variable as it was in HTML file. In such cases, how can I debug HTML file and check value of variables? Is it even possible?

I tried to use <script> console.log(acc.name) </script> inside HTML file but it gives me the error Forbidden tag found in template: '<script>' tag is not allowed. I cannot use <script> outside of <template> tag as it gives me error Multiple roots found lwc.

Screenshot of component

HTML

<template>
    <lightning-card title="Account-list" icon-name="standard:account">
        <div class="slds-m-around_medium">
            <lightning-input  label="Find Account" value={searchKeyAcc} onchange={handleChangeAcc} class="slds-m-bottom_small">
            </lightning-input>
            <template for:each={accounts} for:item="acc">                   
                <lightning-layout-item key={acc.id}>
                    <p>{acc.Name}</p></br><!--Error Here-->
                </lightning-layout-item>
            </template>
            <lightning-button label="Find Account" variant="Brand" onclick={findAccounts}></lightning-button>
        </div>
    </lightning-card>
</template>

JavaScript

import { LightningElement, track } from 'lwc';
import getAccList from '@salesforce/apex/AccountController1.getAccountList';


export default class AccountSearch extends LightningElement {
    @track searchKeyAcc;
    @track accounts;
    @track errorAccount;

    handleChangeAcc(event){
        
        this.searchKeyAcc = event.target.value;
    }
    findAccounts(){
        getAccList({
            name:this.searchKeyAcc
        }).then(result=>{
            this.accounts=result;
        })
        .catch(error=>{
            this.errorAccount=error;
        })
    }
}

Best Answer

HTML and Javascript are cAsE sEnSiTivE.

The only way to debug is through javascript (you cannot really do anything in HTML). 

    getAccList({
        name: this.searchKeyAcc
    }).then(result => {
        this.accounts = result;
        console.log('accounts => ', JSON.stringify(this.accounts));
    })
        .catch(error => {
            this.errorAccount = error;
        })

Here you will get the exact data structure (array []) and the API names. And you need to use the exact API names in HTML also to render correctly.

Even for any other use cases you need to put debuggers and console statements in strategic lines to understand what is being passed to HTML.

Related Topic