We're not doing this alone

So... browser developer tools eh?

OK, shall we make a bet?

The console tab

Our LWC

import getContactList from 
  '@salesforce/apex/ContactController.getContactList';

...

async handleLoad() {
	try {

		this.contacts = await getContactList();

	}
}
					

console.time()

import getContactList from 
  '@salesforce/apex/ContactController.getContactList';

...

async handleLoad() {
	try {
		console.time('getContactList');
		this.contacts = await getContactList();
		console.timeEnd('getContactList');
	}
}
					

console.count()

import getContactList from 
  '@salesforce/apex/ContactController.getContactList';

...

async handleLoad() {
	try {
		console.time('getContactList');
		console.count('getContactList calls');
		this.contacts = await getContactList();
		console.timeEnd('getContactList');
	}
}
					

console.trace()

import getContactList from 
  '@salesforce/apex/ContactController.getContactList';

...

async handleLoad() {
	try {
		console.time('getContactList');
		console.count('getContactList calls');
		console.trace();
		this.contacts = await getContactList();
		console.timeEnd('getContactList');
	}
}
					

console.table()

import getContactList from 
  '@salesforce/apex/ContactController.getContactList';

...

async handleLoad() {
	try {
		console.time('getContactList');
    ...
		this.contacts = await getContactList();
		console.table(this.contacts);
		console.timeEnd('getContactList');
	}
}
					

console.assert()

async handleLoad() {
	try {
    ...
		this.contacts = await getContactList();
		console.assert(
			this.contacts.length > 0,
			'No contacts received'
		);
	}
}
					

Time for a little experiment

console.log('Cheer if you see this');

console.log() - with styling

console.log(
	'%c Cheer if you see me!',
	  'color: black;
	   font-weight: bold;
		 background : lightblue;
		 font-size: 2em;
		 padding: 1em 1em 1em 120px;
		 background-image: url(data:image/...'
);
					

console.group()/groupCollapsed()

async handleLoad() {
	console.groupCollapsed('Apex Imperative Method');
	try {
		console.time('getContactList');
    ...
		this.contacts = await getContactList();
		console.timeEnd('getContactList');
	} ...
	console.groupEnd()
	console.table(this.contacts);
}
					

Interacting with our output

Network Requests,

and a dip into Sources

Breakpoints & Logpoints... d'uh!

sf deploy start

sf deploy start

Let's have a look at the Elements tab

We can increase accesibility too