Live Event Log
Inspector Events
Waiting for events — hold Alt and hover an element…
Components
Tag Cloud
Hover over individual tags to inspect their computed styles.
inspector
dom
devtools
css
selectors
a11y
zero-deps
Form Elements
Button States
Each button has distinct computed styles — inspect to compare.
Flex & Grid
Flex Container
Inspect the container to see flex properties, or a child to see item props.
flex-start
auto
flex-grow: 1
end
Grid Container
grid-template-columns: 1fr 2fr 1fr
1fr
2fr
1fr
span 2
1fr
span 3
Stacking Context
Three layers with different z-index values. Inspect each for stacking info.
z-index: 1
z-index: 2
z-index: 3
Typography
Type Scale
52px 600
Aa
32px 600
Section heading
15px 400
Body text reads at this size
mono 13px
code.snippet()
label 11px
Section label
Accessibility Targets
img with alt attribute ✓
button with aria-label ✓
positive tabindex ⚠
button no name ✕
Export API
Export Inspection Data
First inspect an element (Alt + hover), then export its data in any format.
Inspect an element first, then click an export button above…
Live DOM Mutations
Mutation Observer
Watching for mutations… inspect this element and switch to the
Mutations tab.
Why DOM Inspector?
Chrome DevTools
Production safe
Accessible to end users
Admin-only activation
Embeds in your app
Custom trigger key
Framework-aware inspection
@armvs/dom-inspector
Production safe
Accessible to end users
Admin-only activation
Embeds in your app
Custom trigger key
Framework-aware inspection
Quick Start
// ESM import DOMInspector, { init, on } from '@armvs/dom-inspector'; import '@armvs/dom-inspector/css'; // Init with options DOMInspector.init({ enabled: true, theme: 'dark', // 'dark' | 'light' | { ... } triggerKey: 'Alt', // 'Alt' | 'Control' | 'Meta' | 'Shift' freezeOnClick: false, headerStyle: 'traffic', // 'traffic' | 'classic' }); // Subscribe to events DOMInspector.on('inspect', ({ element, selector, xpath }) => { console.log('Inspecting:', selector); }); // Export current element data const data = DOMInspector.export('json'); // 'json'|'html'|'markdown'|'yaml' // Run accessibility audit const issues = DOMInspector.audit(document.querySelector('button'));