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
- 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