Salesforce Lightning Inspector

 The Salesforce Lightning Inspector opens up and improves your Lightning Component developement,

giving you access to a wealth of data about your running applications and components.

With the Lightning Inspector you can :

1.Easily inspect and navigate the structure of your components.

2.Identify performance bootlenecks by looking at a graph of comonent creation time.

3.Debug server interactions faster by monitoring and modifying responses.

4.Navigate the component tree, inspect components and their associated DOM elements.

5.Track event firing and handling sequences. 

Use Chrome Developer Tools to debug Lightning Components.

Install the 'Salesforce Lightning Inspect' which is available in Google Chrome extension.

The Lightning Tab includes several sub tabs, which each reveal more detailed information about your component.

1.Component Tree Tab

2.Performance Tab

3.Transactions Tab

4.Event Log Tab

5.Actions Tab

6.Storage Tab

Component Tree Tab :

The Component Tree shows you a detailed tree view of the structure of your components.

The Component tree shows you the actual components themselves and gives you information about the attributes they use.

Performance Tab :

Using the Performance tab in the Salesforce Lightning Inspector, we can isolate inspection to just the component code,

allowing us to identify which components are slower and locate where in the component hierarchy the slowness occurred.

This can be especially useful when you have a slow performing Lightning Page with several components.

You can use the chart to visualize the performance of each component and then spot pretty easily any outliers.

Transaction Tab :

Using the Transactions tab,we can see the recorded state(s) during portions of the application's execution.

The transaction data includes the amount of XHR's(XMLHttpRequest) that were sent,

the actions that were called,the time those actions took.

Event Log Tab :

1.CMP events

2.APP events

3.unhandled events

With the Event Log Tab , we can follow along and inspect the events being triggered either by code or user interaction.

You can easily spot whether the event was a component or an app event by looking for CMP or APP below the event.

And there are buttons that let you filter for either one , as well as unhandled events.

Expanding out the event will reveal very useful information such as the parameters,

caller,source,duration and call stack.

You can also click the Toggle Grid button to toggle on or off a diagram of the event.

This can be very useful when you have a page with multiple components and you are not 

sure which component fired which event.

Action Tab :

This is my favorite tab and one I use the most. Toggling on the recording will show you actions sorted 

according to whether they are pending, running, or completed. The view defaults to show all actions, 

but you can narrow down the list by using the filter buttons at the top. This can be useful for quickly zeroing 

in on an error since most pages will produce a lot of actions.

Storage Tab :

The Storage tab reveals the client-side storage for Lightning applications. Actions marked as storable are cached in the actions store. 

When a storable action is run it will use the value from the actions store if available. This can avoid a server trip altogether 

making your component run much faster. Using the storage tab you can see which actions are cached, the size of each cached action, 

and even where the cache lives.

(or)

The storage tab shows you the client-side storage size of any storable actions your page may use.

It will also show the specific items contained in storage.