Debugging lightning components-SEDreamin17

DEBUGGING LIGHTNING COMPONENTSMohith ShrivastavaSalesforce Engineer @ CodeScienceSalesforce MVP @Salesforce

THANK YOU TO OUR PLATINUM SPONSORS!

SIX STAGES OF DEBUGGING1.That can’t Happen2.That does not happen on my Instance or Developer org3.That shouldn’t happen4.Why does that happen ?5.Oh I see6.How did that ever work ??

INTRODUCTION TO LIGHTNING COMPONENTS

INTRODUCTION TO LIGHTNING COMPONENTS1. JavaScript Framework that lets you build Single page Applications

2. On Backend uses salesforce apex (Object Oriented Language like Java )

3. On Frontend uses ES5 JavaScript (Functional Programming ) for DOM manipulation and client side business logic and uses two way data binding via attributes

4. Components use Event Driven pattern (pub-sub) model to communicate with each other

ENABLING LOGS

1. Enabling Salesforce Debug Logs For Apex Logging

2. Enabling Debug Mode For Lightning Component Debugging for un minifying JavaScript

LIGHTNING CHROME INSPECTOR USEFUL COMMANDS

Installation Link

$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 PROFILING

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

The graph is color coded.

Black—The current eventMaroon—A controller actionBlue—Another event fired before or after the current event

ACTIONS 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

1. Using console.log to inspect objects2. Setting Breakpoints3. Using debugger keyword (debugger)

JAVASCRIPT DEBUGS

➢ Prevents Components from causing XSS and similar security issues

➢ Prevents Components from reading other component’s rendered data without any restrictions

➢ Prevents Components from calling undocumented/private APIs

➢ Managed Package Apps going through the security review process has to adhere to security best practices .

➢ Use lightning CLI to discover potential issues .

➢ Read this blogpost for more info

LOCKER SERVICE

https://github.com/msrivastav13/SEDreamin17

References

Thank you!