Lightning components is built on top of javascript framework (Aura framework) so we won’t be able to use apex debuggers to investigate the issue.

Not to worry though 🙂 we have a couple of good tools available in our browser itself.

Debugging lightning components – Client Side Set Up

There are different tools available in browsers using which we can debug lightning components – Google Chrome – Chrome Developer Tools Mozilla Firefox – Firefox Developer Tools Safari – Web Inspector IE – Developer Tools

How to Debug?

Let’s see how to debug a Hello World lightning component.

There are two ways to debug :

1. Using JavaScript Debugger This debugger can be used to step through your JavaScript code line by line, you just need to set a breakpoint by writing debugger. Once your execution hits the breakpoint the code execution gets freezed and will wait for your instructions to move ahead
2. Using Alerts Alerts can be used to check whether your code is getting executed as expected or not Values of variable can also be printed in alerts

References: Chrome Developer Tools Firefox Developer Tools IE – Developer Tools