DevTools coverage

Each Lit concept below has a row: where the panel shows it, and what it leaves out. Use it to check whether the panel can answer your question before you go looking; for how to use each view, read the DevTools guides.

Status is one of shown, partly shown or not shown. The element tree, element details and update records are also open to agents over MCP; see Agents.

Elements and state

Concept	Status	Where	Not shown
Element tree	shown	Components tree, through shadow roots and light DOM; a tag nothing has defined sits in its place with a not defined chip, and a custom element another library defined with a not Lit chip	Plain HTML elements, which the tree flattens away
Custom element registry	not shown	—	The list of defined tags, and scoped registries
Reactive properties	shown	Properties table, with the attribute name, a reflects badge and badges for the hasChanged, converter, noAccessor, useDefault and attribute: false options	Values are read-only. Badges show an option is set, not what a custom function does
@state	shown	State table	Values are read-only
Attributes	shown	Attributes table, live	When a reflected property wrote its attribute
Shadow DOM	shown	shadow root, light DOM, closed and delegatesFocus flags in the details pane	—
Slots	shown	Anatomy overlay and Slots table: assigned elements, fallback, forwarding, children no slot takes	—
Reactive controllers	shown	Instance table, named by the field that holds them	Calls to hostConnected, hostUpdate and the other host hooks
@query and its siblings	not shown	A queried element can appear as a plain field in the Instance table	The selector and what it matched
Form-associated elements	not shown	—	ElementInternals, form value and validity
Source location	shown	Source link and Rendered at link in the details pane, which open in the editor or, in Chrome’s extension, the Sources panel; Reveal in Elements in the extension; source overlay	—

Updates and rendering

Concept	Status	Where	Not shown
Update lifecycle	shown	Lit Lifecycle layer: connectedCallback, performUpdate, willUpdate, update, updated, firstUpdated, disconnectedCallback; an update skipped event when shouldUpdate returns false, counted in the Updates table	render on its own, and updateComplete
Changed properties	shown	Updates tab, with old and new values when the Changed values layer is on	—
Update cause	shown	Recorded at requestUpdate, as the updating component, the mouse, keyboard or custom event being handled, or the @lit/task run that settled; the Timeline list draws the chain to its cause and the Updates tab names it	Which line of code called requestUpdate or set the property
Errors in an update	shown	Updates tab, threw in update rows	Errors from timers or listeners the component set up
Render timing	shown	Lit Render layer; Chrome Performance tracks	A flamechart inside the panel
Re-render frequency	shown	Updates table; flash on update	Updates whose output did not change
Template parts and commits	partly shown	Lit Render (verbose) layer, one event per binding	A view of a template’s parts, and template cache hits
Directives	not shown	Their commits appear in the verbose layer, unlabelled	Which directive produced a commit
Event listeners	partly shown	Custom events layer records each event a component dispatches, with its flags and detail; verbose layer records each @event listener commit; Mouse and Keyboard layers record input	@eventOptions, and which listeners ran for an event
Styles	partly shown	::part exports, including ones forwarded with exportparts, in the Anatomy overlay and Parts table; custom properties a Custom Elements Manifest documents, in CSS properties	static styles, adopted stylesheets, and custom properties no manifest documents. Use the browser’s Elements panel
Dev-mode warnings	shown	warning events on their own Lit warnings layer, a chip on the component’s tree row and a count on the Components tab, and a chip and Warnings section in the details pane; the multiple-Lit-versions check also sits in the About block	Which instance caused a warning when the message names only a tag, and warnings an app silenced by code. A production build of Lit issues none
Hot patches	shown	HMR banner and tab badge; see HMR	—

Lit libraries

Library	Status	Where	Not shown
@lit/task	shown	Instance table with status and value or error; failures in Updates; each run as a task row on the Timeline, from the update that started it to when it settled	Runs started before its element’s first recorded update
@lit-labs/signals	partly shown	Instance table shows a signal’s value	Computed values, which are never evaluated; the SignalWatcher mixin; which signals an element reads
@lit/context	partly shown	Instance table lists each provider and consumer with its key and value; a consumer links to its provider and a provider to its consumers	Consumers that did not ask for updates, which a provider does not record; a context root that buffers requests
@lit-labs/virtualizer	not shown	—	—
@lit/localize	not shown	—	—
@lit-labs/ssr	not shown	—	Hydration and defer-hydration
@lit-labs/router, @lit-labs/motion	not shown	—	—

All of these libraries keep their state across a hot patch; see Ecosystem.

Related

Inspect live componentsThe tree, the details pane and the element picker.

LimitationsThe component shapes a hot patch cannot update in place.