Salesforce Development: Lightning Web Components (LWC)

Salesforce Developer Tutorial – Apex and LWC Debugging Techniques

5 min read

Subscribe on YouTube

Why This Is Useful

Debugging is probably the most important skill you can develop as a developer, on any platform, and it’s the one nobody teaches.

Two reasons it matters enormously in Salesforce specifically.

1. You’re almost never working in an org you built. You’ll inherit code written by four consultancies over eight years, none of whom are reachable. Being able to work out how unfamiliar, ugly, terrifying code actually behaves is most of the job.

2. Almost nobody bothers getting good at it. Which means if you do, you look extraordinary to the business. The faster you find the source of a problem in code that isn’t yours, the more competent you appear, because from the outside that’s indistinguishable from magic.

It’s also one of the hardest skills to acquire, because it’s mostly about how you think rather than which button you press. So let’s start there.


How To Think About It

The single biggest mistake I see is people reading code hoping to spot the bug. That works for tiny problems and fails completely on anything real.

What actually works is narrowing down where the problem can possibly be, over and over, until there’s nowhere left to hide.

1. Reproduce it first. If you can’t make it happen on demand, you cannot know when you’ve fixed it. Get exact steps before touching any code.

2. Find the boundaries. Somewhere the data is right, and somewhere later it’s wrong. Your bug lives between those two points. Everything else is innocent.

3. Halve it. Check the middle. Data still good? The problem is in the second half. Bad already? First half. Repeat. Ten iterations of this narrows a 1,000 line stack to a single line.

4. Question your assumptions. “That method definitely works” is where bugs hide. If you’ve checked everything else, the thing you’re certain about is wrong.

5. Change one thing at a time. Change three, watch it start working, and you have no idea which one fixed it or what the other two broke.

That’s it. Everything below is just tooling to make those steps faster.


Apex: Debug Statements Done Properly

System.debug() is not sophisticated and it is still what you’ll reach for most. Use it well:

Apex
//Useless. What is this? Where did it come from?
System.debug(acct);

//Useful. Searchable, labelled, tells you where you are.
System.debug('AccountService.process ::: acct ::: ' + acct);

That ::: convention is mine and you can pick your own, but pick something distinctive so you can Ctrl+F your own output out of 20,000 lines of platform noise.

Two more worth knowing:

Apex
//Serialize collections. Far more readable than the default output.
System.debug('::: contacts ::: ' + JSON.serializePretty(contacts));

//Find out what's actually consuming your limits
System.debug('::: queries ::: ' + Limits.getQueries());
System.debug('::: CPU ::: ' + Limits.getCpuTime());

Dropping Limits.getCpuTime() at a few points is far better than guessing which section is slow.


Set Your Log Levels

Under Setup → Debug Logs, when you create a trace flag you pick levels per category. Turn everything down to NONE except what you need:

Apex Code: FINEST when you’re chasing logic.
Database: FINEST when you’re chasing SOQL or DML.
Everything else: NONE.

This matters because logs are capped at 20MB and get truncated. Turn Workflow and Validation up to FINEST and your actual Apex output gets cut off right where it mattered.

Also remember from the change event post: some things run as the Automated Process user, so trace that user or you’ll see nothing at all.


Checkpoints And The Replay Debugger

You don’t have to litter your code with debug statements. The Apex Replay Debugger lets you step through a log line by line with real variable values, like a proper debugger in any other language.

I’ve written that up separately in how to use the Apex Replay Debugger in VS Code, and it’s genuinely worth twenty minutes of your life.


LWC: The Browser Is Your Friend

Different world entirely. Your code runs in the browser, so browser tools work.

1. Turn on Debug Mode. Setup → Debug Mode, enable it for yourself. Without this your JavaScript is minified and stack traces are gibberish. Do this before anything else.

2. Use real breakpoints. Open DevTools, go to Sources, find your component (search the filename), click a line number. Now you can inspect every variable, step through, and look at the call stack. This is dramatically better than console.log.

3. Watch the Network tab. Every Apex call from your component shows up as an aura request. You can see exactly what was sent and what came back, which instantly tells you whether a bug is in your JavaScript or your Apex.

4. When you do log, log properly:

Code
// Proxy objects print as unhelpful nonsense
console.log(this.records);

// This shows you the actual data
console.log(JSON.parse(JSON.stringify(this.records)));

That second line is one of the most useful things to know about LWC debugging. Reactive data is wrapped in Proxy objects and the console displays them badly.

5. Handle wire errors. A @wire that fails silently returns an error you never look at:

Code
@wire(getAccounts)
wiredAccounts({ data, error }) {
    if (data)  { this.accounts = data; }
    if (error) { console.error('Wire failed ::: ', error); }
}

The Cross-Boundary Problem

The genuinely hard bugs live between LWC and Apex, because you’re looking at browser console logs in one window and Salesforce debug logs in another and correlating them by hand.

Two things help. First, log the same identifier on both sides so you can match them up. Second, install Nebula Logger, which captures both in one place and correlates them by transaction for you.


One Last Thing

When you fix a bug, write a test that would have caught it.

You’ve just done all the hard work of understanding exactly what goes wrong and why. Ten more minutes captures that permanently, and stops the same bug coming back in eight months when somebody refactors nearby.

Debugging is a skill you build by doing. Be systematic, narrow it down, question your assumptions, and you’ll get quick at it faster than you expect.


Get Coding With The Force Merch!!

We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!


Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram


Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps

Good Non-SF Specific Development Books:

Clean Code
Clean Architecture