Agenda: 1. Lightning Inspector Chrome Extension 2. Using Actions,Storage and Events Tab 3. Salesforce Lightning CLI 4. Building Secure Lightning Components 5. References

1. Debugging Lightning
Components
Salesforce Saturday
Mohith Shrivastava
Salesforce MVP
CodeScience INC
Blog - cloudyworlds.blogspot.com

2. Prerequisites
1. You have worked with lightning components and familiar with basics
2. You have basic Understanding of Javascript
3. Visit Trailhead to explore Lightning Components Projects and modules

3. AGENDA
1. Lightning Inspector
2. Locker Services
3. Lightning CLI

4. ENABLING DEBUG MODE

5. LIGHTNING INSPECTOR
Installation Link

6. CONSOLE SHORTCUT COMMANDS
$auraTemp+""
Returns the component descriptor.
$auraTemp.get("v.attributeName")
Returns the value for the attributeName attribute.
$auraTemp.getElement()
Returns the corresponding DOM element.
inspect($auraTemp.getElement())
Opens the Elements tab and inspects the DOM element for the component.

7. PERFORMANCE TAB

8. TRANSACTION TAB

9. EVENTS LOGGING
1. This tab shows all the events fired. The event graph helps you to understand
the sequence of events and handlers for one or more actions.
2. You can inspect standard and custom application events , component events
3. Use this to inspect the Tree and debug event variables
4. The graph is color coded.
Black—The current event
Maroon—A controller action

10. ACTION LOGGING
1. Actions are various types like storable,cached,Success,Error,Aborted
2. Actions logging help to see the action responses and override the behaviour to
build more robust error handling
3. You can override the server actions

11. STORAGE TAB
This tab shows the client-side storage for Lightning applications.
Actions marked as storable are stored in the actions store. Use this tab to analyze
storage in Salesforce1 and Lightning Experience.

12. LOCKER SERVICE
Prevents
Components from causing XSS and similar security issues
Components from reading other component’s rendered data without any restrictions
Components from calling undocumented/private APIs
Further Reading here
Managed Package Apps going through the security review process has to adhere to security best practices .
Read more about the security best practices for lightning components here

13. SALESFORCE LIGHTNING CLI
Install Heroku Toolbelt
Install Lightning CLI
Run the heroku lint command
***Heroku lightning:lint path***

14. REFERENCES
Lightning Components Developer Guide
Repo of all code used for demo
https://github.com/msrivastav13/SalesforceSaturday-22
Register for below webinar coming week for more info around winter 17 lightning
features
https://developer.salesforce.com/events/webinars/BuildAppsFaster

15. THANK YOU
Organiser - Salesforce Bangalore User
Group (Madan and Kishore)
Twitter - Mohith - @msrivastav13
Madan - @madankhichi