Debugging Lightning ComponentsSalesforce Saturday

Mohith Shrivastava

Salesforce MVP

CodeScience INC

Blog - cloudyworlds.blogspot.com

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

AGENDA1.Lightning Inspector

2.Locker Services

3.Lightning CLI

ENABLING DEBUG MODE

LIGHTNING INSPECTORInstallation Link

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.

PERFORMANCE TAB

TRANSACTION TAB

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

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

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.

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

SALESFORCE LIGHTNING CLIInstall Heroku Toolbelt

Install Lightning CLI

Run the heroku lint command

***Heroku lightning:lint path***

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

THANK YOUOrganiser - Salesforce Bangalore User Group (Madan and Kishore)

Twitter - Mohith - @msrivastav13 Madan - @madankhichi