LWC Debugging Tips and Tricks

PrettyPrintLWCProperties.html

<template>
  {lwcPrettyProperty}
</template>

PrettyPrintLWCProperties.js

import { LightningElement } from 'lwc';

export default class PrettyPrintProperty extends LightningElement {
	property;
	
	get lwcPrettyProperty() {
		return JSON.stringify(this.property, null, 4);
	}
}

TestCacheableApexOnDemand.html

<template>
  {prettyContacts}
  <button onclick={handleRefresh}>Refresh</button>
</template>

TestCacheableApexOnDemand.js

import { LightningElement } from 'lwc';
import { refreshApex } from '@salesforce/apex';

import getContacts
    from "@salesforce/apex/ContactController.getContacts";

export default class TestCacheableApexOnDemand extends LightningElement {
  @wire(getcontacts)
  contacts;
  
  handleRefresh() {
    refreshApex(this.contacts);
  }
  
  get prettyContacts() {
    return JSON.stringify(this.contacts, null, 4);
  }
}

The pretty print of wires properties also works great for generating your mock json files for testing!