How do I debug my lightning component?

Question

I have seen and read many posts in regards lightning component errors and realized there are no questions actually asking how to debug them. I recently stumbled upon:

• How do I start to debug my own Apex code?
• How do I start to debug my own Visualforce/JavaScript?
• What is the best way to debug Lightning Components (used in the Community Builder)?

and decided to post this question in order to get a detailed step by step guide on doing so for lightning components hoping this will help others in the community (and myself as well).

I am aware there is excellent documentation in the developer docs and blogs:

• Lightning Components Developer Guide > Debugging
• Debugging Lightning Components by Peter Knolle

Additionally, if you would like to include any tools you use for doing so, such as:

• Salesforce Lightning Inspector Chrome Extension

By all means do so

Answer 1

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 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 much more useful tools and scenarios, so it is definitely worse checking what Chrome Dev Tools can do for you. Also what scenarios Lightning Component Inspector is used for.

Answer 2

Christian's answer is fantastic. Lots of great info there.

Remember that Lightning Framework and components are JavaScript. You can use standard browser development tools to debug and code. You should master these tools. Chrome DevTools is incredibly powerful and usable. Check out the documentation at https://developer.chrome.com/devtools.

Answer 3

Create Lightning components using the UI in Enterprise, Performance, Unlimited, Developer Editions or a sandbox.

There are two modes: production and debug. By default, the Lightning Component framework runs in production mode. This mode is optimized for performance. It uses the Google Closure Compiler to optimize and minimize the size of the JavaScript code. The method names and code are heavily obfuscated.

When you enable debug mode, the JavaScript code isn’t minimized and is easier to read and debug. Debug mode also adds more detailed output for some warnings and errors.

To enable debug mode for your org:

From Setup, enter Lightning Components in the Quick Find box, then select Lightning Components. Select the Enable Debug Mode checkbox. Click Save.