Lit Inspector oddcelot توسط

Lit Inspector adds a Lit tab to Firefox 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 tracks on a time axis or as a list.
- Settings: appearance, and an option that writes Lit's updates as User Timing markers, so they show in the Firefox Profiler next to the browser's own work.

How to use it
1. Open the page, then Lit Inspector from the Extensions button in the toolbar.
2. Click "Enable on this site". Firefox asks for access to that site; allow it and the page reloads.
3. Open DevTools and go to the Lit tab. Click "Disable on this site" in the popup or 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. Firefox can't name a port in site access, so enabling a site covers every port on that host: enabling localhost:5173 enables localhost.

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, Firefox 140 or later.

Privacy
Lit Inspector collects no data. Its only network requests fetch an enabled site's own scripts, sourcemaps and Custom Elements Manifests, from that site, to show where components are defined and what their documentation says. 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, Mozilla or the Lit project.

Source code and issues: https://github.com/oddcelot/vite-plugin-lit