debugging lightning components
TRANSCRIPT
![Page 1: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/1.jpg)
Debugging Lightning ComponentsSalesforce Saturday
Mohith Shrivastava
Salesforce MVP
CodeScience INC
Blog - cloudyworlds.blogspot.com
![Page 2: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/2.jpg)
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
![Page 3: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/3.jpg)
AGENDA1.Lightning Inspector
2.Locker Services
3.Lightning CLI
![Page 4: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/4.jpg)
ENABLING DEBUG MODE
![Page 5: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/5.jpg)
LIGHTNING INSPECTORInstallation Link
![Page 6: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/6.jpg)
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.
![Page 7: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/7.jpg)
PERFORMANCE TAB
![Page 8: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/8.jpg)
TRANSACTION TAB
![Page 9: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/9.jpg)
EVENTS LOGGING1.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
Blue—Another event fired before or after the current event
![Page 10: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/10.jpg)
ACTION LOGGING1.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
![Page 11: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/11.jpg)
STORAGE TABThis 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.
![Page 12: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/12.jpg)
LOCKER SERVICEPrevents
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
![Page 13: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/13.jpg)
SALESFORCE LIGHTNING CLIInstall Heroku Toolbelt
Install Lightning CLI
Run the heroku lint command
***Heroku lightning:lint path***
![Page 14: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/14.jpg)
REFERENCESLightning 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
![Page 15: Debugging lightning components](https://reader031.vdocuments.us/reader031/viewer/2022030307/58ea2e0f1a28ab61358b47a3/html5/thumbnails/15.jpg)
THANK YOUOrganiser - Salesforce Bangalore User Group (Madan and Kishore)
Twitter - Mohith - @msrivastav13 Madan - @madankhichi