Media
5 items
Description
Inspect Lit or Polymer webcomponents 'through a prism'. View and modify component properties on the fly through Chrome DevTools. Lit Prism — Web Component Property Inspector for DevTools A Chrome DevTools extension that adds a dedicated sidebar panel to the Elements tab for live inspection and editing of Lit and Polymer web component properties. ──────────────────────────────────────── FEATURES ──────────────────────────────────────── LIVE PROPERTY PANEL View all reactive properties of the selected custom element, updated automatically every second. A pulsing refresh indicator in the toolbar turns green when values are unchanged and red when a change is detected — so you always know when your component's state is moving. INLINE EDITING Click any primitive value to edit it in place. The new value is committed back to the element immediately, so you can test state changes without touching your source code. CHANGE FLASH Rows whose value changed since the last refresh briefly highlight in blue, making live state changes easy to spot at a glance. PROPERTY FILTER A live search input hides properties whose key does not match the typed term — useful for components with many reactive properties. PROPERTY PINNING Pin individual properties to a persistent section at the top of the panel. Pinned rows are always visible regardless of the active filter and update on every refresh tick. CONTEXT MENU Right-click any property row for quick actions: • Copy value • Copy path • Pin to top • Expand all / Collapse all • Copy all as JSON COPY ALL AS JSON The {} toolbar button copies the full property snapshot to the clipboard in one click. CONSTRUCTOR HEADER The component's class name and custom-element tag name are displayed at the top of the panel so you always know what you are inspecting. JUMP TO SOURCE The → src button attempts to open the component's source file directly in the DevTools Sources panel using a three-tier strategy: 1. //# sourceURL annotation on the script 2. URL naming convention (tag name or kebab class name in the resource URL) 3. Parallel content scan across all loaded JS files — covering both unminified (class ClassName {) and minified Lit output EXPAND-STATE PRESERVATION Open tree nodes are remembered across auto-refresh ticks, so the property tree stays stable while values update underneath. SMART SORT ORDER Properties are sorted $-prefixed → plain keys → _-prefixed → __-prefixed, keeping public reactive state at the top and internal/private fields at the bottom. METHODS GROUPING Component methods are collected under a _FUNCTIONS key so they do not pollute the property list. CIRCULAR REFERENCE HANDLING A WeakSet-based cycle detector marks only the exact back-reference as [Circular], preserving full depth on all non-circular branches. A [Too deep] cap at 20 levels guards against out-of-memory errors from DOM node references or deeply nested trees. LOADING INDICATOR A pulsing "Loading…" message appears immediately when a different element is selected, so the panel never silently shows stale data. ──────────────────────────────────────── SUPPORTED FRAMEWORKS ──────────────────────────────────────── • Lit v1, v2, v3 • Polymer v2, v3 • Other custom elements — own and prototype enumerable properties are listed ──────────────────────────────────────── HOW TO USE ──────────────────────────────────────── 1. Open DevTools and switch to the Elements panel. 2. Select the Lit Prism sidebar tab. 3. Click any custom element in the Elements tree — its properties appear immediately. 4. Use the filter input to narrow down properties by name. 5. Click any primitive value to edit it inline. 6. Right-click a row for additional actions (copy, pin, expand). 7. Use the extension popup to toggle auto-refresh on or off. ──────────────────────────────────────── PERMISSIONS ──────────────────────────────────────── storage — Persists your auto-refresh toggle preference via chrome.storage.sync. Host permissions (<all_urls>) — Required for the jump-to-source content scan, which fetches loaded JS resources to locate the component class definition. ──────────────────────────────────────── PRIVACY ──────────────────────────────────────── Lit Prism does not collect, transmit, or store any user data. All inspection happens locally inside your browser's DevTools session. No telemetry, analytics, or network requests are made to any external server — by this extension or any future version of it. ──────────────────────────────────────── CHANGELOG HIGHLIGHTS ──────────────────────────────────────── v1.3 — Major UI rewrite: custom rendering engine with per-row DOM updates (no full re-renders), inline editing, context menu, property pinning, change-flash animation, jump-to-source, property filter, constructor header, expand-state preservation, custom sort order, refresh indicator, loading indicator, improved circular reference handling. v1.2 — Added Lit v2/v3 support via elementProperties; methods now grouped under _FUNCTIONS; auto-refresh interval set to 1 second. v1.1 — Improved stringification strategy: full depth for non-circular properties, per-property fallback only when a circular reference is detected; fixed high CPU usage from unconditional depth-limited stringify; undefined values now shown explicitly. v1.0 — Initial release: Elements-panel sidebar, auto-refresh with toggle, Lit v1 support, Polymer static properties support. ──────────────────────────────────────── OPEN SOURCE & LICENSE ──────────────────────────────────────── MIT licensed. Contributions welcome.