The Lightning Components Inspector allows you to view and navigate the component tree for a component, inspect attributes of components, and investigate the component performance.
This tool is provided "as-is" for early-access use. It carries no warranties, guaranties, or other obligations, written or implied.
- Lightning Components proficiency.
- Experience with debugging web applications, including JavasScript, HTML, and CSS.
- Familiarity with the Chrome DevTools, and the ability to install and use Chrome Extensions.
- From Google Chrome, navigate to the Lightning Components Inspector on the Chrome Web Store.
- Click the Add to Chrome button
Please post any questions or feedback to the Lightning Components Inspector Chatter Group. This software is early access, please do not contact Salesforce support!
- Navigate to a Lightning app. For this doc, we're using the Salesforce1/Lightning Experience app at /one/one.app
- Launch the Chrome Dev Tools (More tools > Developer tools).
You should see a Lightning tab in the dev tools.
There are a number of of sub tabs available to inspect different aspects of your app. Please refer to the sections below for details on each tab.
This tab shows the component markup including the tree of nested components.
You can expand or collapse the markup by clicking on the triangles at the start of each line. By default, the tree shows four levels of nested markup.
The component tree is expensive to serialize, and doesn't respond to component updates. You need to manually update the tree when necessary by scrolling to the top of the panel and clicking the Refresh button.
Double click a node to bring up a sidebar with more details for that selected node.
The sidebar contains the following information:
- HTML Elements The count of HTML elements for the component (including children components).
- body The body of your overall component is complex, but this shows you the body of your component, and the bodies of all the components you extended. The resulting body is the composition of those bodies.
- Supers Shows you all the super components and their value providers. A component shares its attributes among all its supers so each level doesn't have its own set of attributes. There is just one attribute value at the concrete level, but each level of extension has its own body.
Double clicking on a component in the Component Tree or details sidebar generates a reference to that component in the console in the variable $auraTemp.
This tab shows the list of definitions loaded on the page. Each definition describes metadata for an element, such as a component, event, or controller.
This tab shows a flame graph of the creation time for your Lightning components. Longer and deeper portions of the graph are where you should look for potential performance bottlenecks.
The Clear, Record, and Show current collected buttons can be used to gather performance data. Use these buttons to capture specific user actions, or collections of user actions.
- Press the Record button to start gathering performance data.
- Press the Record button again to stop gathering performance data.
- Press the Show current collected button to display the performance data.
Hover over a component in the flame graph to see more detailed information about that component in the bottom-left corner. This information includes the component complexity and timing information, and may be used to diagnose performance issues.
Drag on the timeline to select a period of time to focus on.
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 at this time.
The list of transactions includes counts of actions and XHRs (server-side requests) executed while the transaction was open. The list includes actions/XHRs fired by other events or handlers while the transaction was open. An XHR can include a batch of more than one server-side actions.
Click the ID of a transaction to see more data in the Console.
This tab shows all the events fired.
The Toggle recording and Clear buttons can be used to gather event data. Use these buttons to capture specific user actions, or collections of user actions. The Filter input field can be used to filter out events, and the App Events and Cmp Events toggles can be used to view application or component level events.
- Press the Toggle recording button to start gathering event data.
- Press the Toggle recording button again to stop gathering event data.
By default, both application and component events are shown. You can hide or show both types of events by toggling the App Events and <Comp Events buttons.
Enter a search string in the Filter field to match any substring.
Invert the filter by starting the search string with !. For example, !aura returns all events that are not in the aura namespace.
Show events that are fired but are not handled. Unhandled events aren't listed by default but can be useful to see during development.
Expand an event to see more details. Click the Toggle Grid button to generate a network graph showing the events fired before and after this event, as well as the components handling those events.
The graph is color coded.
- Black: the current event
- Maroon: the controller action
- Blue: the event fired
This tab shows the server-side actions executed. Actions are recorded by default and the list automatically refreshes when the page refreshes.
Toggle the buttons related to the different action states to filter the list.
Enter a search string in the Filter field to match any substring.
Invert the filter by starting the search string with !. For example, !serviceComponent:// returns all actions that are not related to service components.
This tab shows the client-side storage for Lightning Component applications. It is currently not directly accessible in standalone applications, but this tool can be used to analyze Salesforce1 and Lightning Experience.
This tab shows information for the Aura Data Service, aka Lightning Data Service. It is currently not directly accessible in standalone applications, but this tool can be used to analyze Salesforce1 and Lightning Experience.
This tab shows information for the Record Layout Broker. It is currently not directly accessible in standalone applications, but this tool can be used to analyze Salesforce1 and Lightning Experience.
