+ Start a Discussion
Manish Singh BishtManish Singh Bisht 

How to debug Aura Lightning components in browser?

I am looking for a way to make debugging of Aura Lightning components easier. For Apex we already have something called 'Apex Replay Debugger' which allows to see changes in values of variables and stepping through functions line by line.
Is there something similar for Aura components? Which can help see changes in values of <aura:attributes> and stepping through controller and helper methods.
To view changes in attribute values, I am currently console.log( )ing manually to broswer's console. But most of the time this method is unadequate or tiresome.

If anyone is aware of any tool, utility etc. which can act as a proper debugger for Aura Lightning component, then please do share. It will help a lot...
Best Answer chosen by Manish Singh Bisht
AbhishekAbhishek (Salesforce Developers) 
Hi,

General Tools and settings:

use Chrome + built-in Dev Tools + Lightning Component Inspector
be sure debug mode is enabled in your org (Setup: Lightning Components)
be sure caching is disabled in your org (Setup: Session Settings -> uncheck "Enable secure and persistent browser caching to improve performance"


Techniques for most common use cases (be sure that Dev Tools in Chrome are open while testing):

check certain JavaScript code is called at all:
use console.log(), console.debug(), console.warn(), console.error() (different color visualizations) -> can output a variable value as well

check for invalid values only:
rather always log to the console you can do console.assert(myVar != 0) to only show an error when assertion fails

evaluate variables / context on a certain JavaScript code:
use debugger; (this will create a breakpoint in code execution) -> now use the console from Dev Tools while breakpoint is active.
You can write JavaScript to test value of variables, do function calls and check return types, overwrite JavaScript values, and so on. This is super powerful also developing your code

output the value of a more complex Object:
while code execution is paused on a breakpoint (see above) use copy(JSON.stringify(myObjectToEvaluate)); in the Dev Tool console - this will copy the value as JSON to your clipboard and you can process/inspect text based value

measure code execution time between two dedicated "anchors": use console.time("identifier"); 
[code to execute] 
console.timeEnd("identifier");

check why code can not be saved or application is not loading at all: use the Salesforce Lightning CLI to lint your JavaScript code (very useful to check against faulty structure like missing braces)

investigate runtime exceptions origin:
sometimes runtime exceptions show up you don't know exactly where they come from. Use "Pause on Exception"-Button under the "Sources"-Tab in Dev Tools - inside the panel "Call Stack" check if you can identify classes from your code.
As code execution is paused you have the same behavior as a manual breakpoint: on every entry, you are in the right JavaScript context so you can evaluate all values at that certain code execution time. Add some additional breakpoints (by clicking the line number in the Dev Tools) and you will always pause the code on a certain area (like to check what values are before the exception raises or pause on code you can't write a debugger-statement by yourself)

mock data returned from you Apex controller: use the Lightning Components Inspector "Action" Tab and overwrite the result coming back from the server the next time

For sure there are many more useful tools and scenarios, so it is definitely worse checking what Chrome Dev Tools (https://developers.google.com/web/tools/chrome-devtools?utm_source=dcc&utm_medium=redirect&utm_campaign=2018Q2) can do for you. Also what scenarios Lightning Component Inspector (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/inspector_intro.htm?search_text=inspector) is used for.

I hope you find the above information is helpful. If it does, please mark as Best Answer to help others too.

Thanks.

All Answers

AbhishekAbhishek (Salesforce Developers) 
Hi,

General Tools and settings:

use Chrome + built-in Dev Tools + Lightning Component Inspector
be sure debug mode is enabled in your org (Setup: Lightning Components)
be sure caching is disabled in your org (Setup: Session Settings -> uncheck "Enable secure and persistent browser caching to improve performance"


Techniques for most common use cases (be sure that Dev Tools in Chrome are open while testing):

check certain JavaScript code is called at all:
use console.log(), console.debug(), console.warn(), console.error() (different color visualizations) -> can output a variable value as well

check for invalid values only:
rather always log to the console you can do console.assert(myVar != 0) to only show an error when assertion fails

evaluate variables / context on a certain JavaScript code:
use debugger; (this will create a breakpoint in code execution) -> now use the console from Dev Tools while breakpoint is active.
You can write JavaScript to test value of variables, do function calls and check return types, overwrite JavaScript values, and so on. This is super powerful also developing your code

output the value of a more complex Object:
while code execution is paused on a breakpoint (see above) use copy(JSON.stringify(myObjectToEvaluate)); in the Dev Tool console - this will copy the value as JSON to your clipboard and you can process/inspect text based value

measure code execution time between two dedicated "anchors": use console.time("identifier"); 
[code to execute] 
console.timeEnd("identifier");

check why code can not be saved or application is not loading at all: use the Salesforce Lightning CLI to lint your JavaScript code (very useful to check against faulty structure like missing braces)

investigate runtime exceptions origin:
sometimes runtime exceptions show up you don't know exactly where they come from. Use "Pause on Exception"-Button under the "Sources"-Tab in Dev Tools - inside the panel "Call Stack" check if you can identify classes from your code.
As code execution is paused you have the same behavior as a manual breakpoint: on every entry, you are in the right JavaScript context so you can evaluate all values at that certain code execution time. Add some additional breakpoints (by clicking the line number in the Dev Tools) and you will always pause the code on a certain area (like to check what values are before the exception raises or pause on code you can't write a debugger-statement by yourself)

mock data returned from you Apex controller: use the Lightning Components Inspector "Action" Tab and overwrite the result coming back from the server the next time

For sure there are many more useful tools and scenarios, so it is definitely worse checking what Chrome Dev Tools (https://developers.google.com/web/tools/chrome-devtools?utm_source=dcc&utm_medium=redirect&utm_campaign=2018Q2) can do for you. Also what scenarios Lightning Component Inspector (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/inspector_intro.htm?search_text=inspector) is used for.

I hope you find the above information is helpful. If it does, please mark as Best Answer to help others too.

Thanks.
This was selected as the best answer
Ionut Constantin SultanaIonut Constantin Sultana
Thanks Abhishek!
Manish Singh BishtManish Singh Bisht
Thanks Abhishek!
I have applied most of your suggested methods, and can say that they actually helped me a lot, and made debugging easier and faster.

Below I have summarized your suggestions for a quick look:
  • > Extensively use Chrome + built-in Dev Tools + Lightning Component Inspector
  • > Enable Debug Mode in your org.
  • > Disable caching in your org.
  • > Make sure Dev tools in Chrome are open when debugging.
  • > Use various console.*() methods where appropriate. e.g. console.log(), console.debug(), console.warn(), console.error() etc.
  • > Check for invalid values only. Use console.assert(myVar != 0) to only log when an assertion fails.
  • > Use breakpoints in 'Sources' tab to pause execution at any given point and then inspect a variable's value or the call stack.
  • > Additionally, use 'Pause on Exception' button in 'Sources' tab to auto-pause the execution whenever an exception occurs.
  • > When execution is paused at a line, write more code after it for, checking variable values, do function calls, check return types, or even overwrite existing values.
  • > When execution is paused, in 'Console' tab, use copy(JSON.stringify(objectName)) to get an object's value into the clipboard.
  • > Use 'Salesforce Lightning CLI' to lint your code.
  • > Use Salesforce Lightning Inspector Chrome Extension. 
    •   >   'Actions' tab to mock response from Apex server in the next call.
    •   >   'Event Log' tab to inspect an Aura events and its parameters.

Feel free to add more of such suggestions in future. This can certainly help newbie developers like me, who are not much familiar with JS debugging techniques.