Debug in Lightning

Enable Debug Mode for Lightning Components

Enable debug mode to make it easier to debug JavaScript code in your Lightning components.

There are two modes: production and debug. By default, the Lightning Component framework
runs in production mode. This mode is optimized for performance. It uses the Google Closure
Compiler to optimize and minimize the size of the JavaScript code. The method names and code
are heavily obfuscated.

When you enable debug mode, the framework doesn't use Google Closure Compiler so the JavaScript
code isn't minimized and is easier to read and debug.

To enable debug mode for your org:
1. From Setup, enter Lightning Components in the Quick Find box, then select
    Lightning Components.
2. Select the Enable Debug Mode checkbox.
3. Click Save.

Salesforce Lightning Inspector Chrome Extension

The Salesforce Lightning Inspector is a Google Chrome DevTools extension that enables you to navigate the component tree, inspect component attributes, and profile component performance. The extension also helps you to understand the sequence of event firing and handling.

The extension helps you to:
• Navigate the component tree in your app, inspect components and their associated DOM elements.
• Identify performance bottlenecks by looking at a graph of component creation time.
• Debug server interactions faster by monitoring and modifying responses.
• Test the fault tolerance of your app by simulating error conditions or dropped action responses.
• Track the sequence of event firing and handling for one or more actions.

Install Salesforce Lightning Inspector

Install the Google Chrome DevTools extension to help you debug and profile component performance.

1. In Google Chrome, navigate to the Salesforce Lightning Inspector extension page on the Chrome Web Store.
2. Click the Add to Chrome button.


Get a Reference to a Component in the Console
Click a component reference anywhere in the Inspector to generate a $auraTemp variable that points at that component. You can explore the component further by referring to $auraTemp in the Console tab.

These commands are useful to explore the component contents using the $auraTemp variable.

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