Media
5 items
Description
Inspect Lit web components on any page, production builds included: component tree, properties, updates and a timeline. Lit Inspector adds a Lit tab to Chrome DevTools for inspecting the Lit web components on a page: sites you don't serve, production builds, and pages whose Content Security Policy blocks injected script tags. What it shows - Components: the tree of Lit elements on the page. Select one to see its reactive properties, state, attributes and controllers. Pick selects an element by clicking it in the page. - Updates: which components updated during a recording, how often, which properties changed, and how long each update took. - Timeline: recorded lifecycle events (performUpdate, willUpdate, update, updated) with their timings, filterable by element and layer, as a list or as tracks. - Settings: appearance, and an option that mirrors Lit updates into Chrome's Performance panel as their own track. How to use it 1. Open DevTools on the page and go to the Lit tab. 2. Click "Enable on this site". Chrome asks for access to that one site; allow it and the page reloads. 3. The Lit tab now shows the page's components. Click "Disable on this site" at the bottom of the tab to turn it off again. The extension asks for no site access at install and does nothing on a site until you enable it there. On production builds Lit's production build is supported: the component tree, the inspector and the lifecycle timeline work. Some features need Lit's development build or a dev server and are not available from the extension: render events (Lit emits them only in development), source locations and open-in-editor, HMR history, and exporting a snapshot. For those, use the Vite plugin @oddsquad/vite-plugin-lit in development. Limits Top-level frames only (components inside iframes are not shown), http and https pages only, Chrome 114 or later. Privacy Lit Inspector collects no data and makes no network requests. It stores the sites you enabled and your panel settings in your browser. Privacy policy: https://oddcelot.github.io/vite-plugin-lit/reference/extension-privacy/ Lit Inspector is an independent, unofficial tool. It is not affiliated with, endorsed by, or produced by Google or the Lit project. Source code and issues: https://github.com/oddcelot/vite-plugin-lit