Way to Debug Salesforce Lightning Components

Share on facebook
Share on twitter
Share on linkedin
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).

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.

salesforce lightning components

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.

salesforce lightning components

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.

salesforce lightning components

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.

salesforce lightning components

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 

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Mobile Responsive Testing

Mobile Responsive Testing is simply a Testing Process performed to make sure that your website or an app is working appropriately on all types of devices.
Whether it an app or website, they need to ensure that they are accessible from any device, anytime, anywhere.

Read Article »

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.