How To Debug Lightning Framework In Chrome Browser

Installation :

First of all, download and install the Salesforce Lightning  Extension from  here.

Navigation :

1. After adding this extension to your  chrome browser open developer console, you will see the Lightning tab as shown below.

   

   Note: If page is not containing any lightning framework such as lightning component or lightning application, on clicking this tab this will show error message like : Lightning was not detected on this page.
2. After clicking lightning tab you will see the  following subtab:
   • Component Tree
   • Performance
   • Transaction
   • Event Log
   • Actions
   • Storage
3. Component Tree : Shows component markup in nested tree format

   

4. Performance : Shows graph of the creation time for your components.

   

5. Transaction : Some apps delivered by Salesforce include transaction markers that enable you to see fine-grained metrics for actions within those transactions. You can’t create your own transactions.

   

6. Event Log: Shows all event fired. It help you to manage sequence of your event.
7. Actions: Shows sever side action executed.

   

8. Storage : This tab shows storage in salesforce1 and lightning experience.

   

For more information please visit 
Salesforce Documentation