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.

Lightning App

 

Lightning Component – demoDebug

 

demoDebugController.js

 

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

1. 1. Alerts can be used to check whether your code is getting executed as expected or not
   2. Values of variable can also be printed in alerts

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