You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Way to Debug Salesforce Lightning Components


By: Radha

The Lightning Component framework is a UI framework for developing dynamic web apps for mobile and desktop devices. The framework is built on the open source Aura framework. It is used mostly for single page application(SPA).

After developing an application, if the developer needs to debug the lightning components we must follow the below steps.

Step 1: To enable debug mode for your organization (From Setup > Lightning components > Enable lightning debug mode). After enabling this option, it is easier to debug JavaScript code in your lightning components.

Image

Step 2: To install Salesforce Lightning Inspector in your google chrome navigate to the https://chrome.google.com/webstore/detail/salesforce-lightning-insp/pcpmcffcomlcjgpcheokdfcjipanjdpc and click the ADD TO CHROME button.

Image

Step 3: Now, browse to a lightning application in google chrome. You can see the Salesforce Lightning inspector adds a tab in your Chrome developer tools(F12). Also, you could see different subtabs to inspect different aspects.

Image

Step 4: There are some tabs available, and it is listed below

  1. Component Tree Tab
  2. Performance Tab
  3. Transactions Tab
  4. Event Log Tab
  5. Actions Tab
  6. Storage Tab

Step 5: To debug your JavaScript code, for example while clicking the button, we want to check the functionality inside your method by using use “debugger” keyword. Simply add it wherever you want in your code.

Step 6: After placing the debugger inside your method, the inspector will stop running your code when it reaches to the “debugger” keyword.

Image

Step 7: Then, we have an option to print log messages using JavaScript, and console.log (). In console tab, we will check the log messages of the Lightning components.

Image

Reference Links:  

  1. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/inspector_intro.htm
  2. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_framework.htm