DOM X-Ray
Tree, box model, nesting and layout issues: overflow, clipping, overlap.
Turn inspiration into clean components.
Five frontend tools in Chrome’s side panel that share one selected element. Understand how a layout is built, then export a tidy component you can make your own.
The toolkit
Select once, inspect everywhere.
Hover to preview, click to lock a selection. Switch tools freely; the selection carries over, so every tool answers questions about the same element.
CSS Detective
Computed styles with the full cascade: which rule won, which lost, and why. Try edits live.
Component Extractor
Export a selection as HTML, HTML + CSS, JSX, Tailwind or an assets manifest.
Breakpoint Hunter
Render the page at six widths in a sandbox and see where the layout breaks.
StyleMap
Declared CSS variables and the colours, type, spacing, radii and shadows actually in use.
How it works
Three steps, no setup.
- Open the page you want to study.Any normal website. Chrome blocks every extension on its own pages and the Web Store.
- Click the myDev Kit button, or press Alt Shift D.That click is what grants access to the tab. The side panel opens and connects.
- Hover to preview, click to lock a selection.Inspect, trace the cascade, test breakpoints, then export when you are ready.
Privacy
Your tabs stay yours.
- Runs only on tabs you connect. There are no install-time host permissions. Access to a tab comes from your click, and ends when you leave.
- Page content never leaves your browser. Inspection, cascade tracing, exports and scans all run locally. There is no analytics and no telemetry.
- Paid AI features send only the selected component’s HTML and CSS to our API. Nothing else from the page, and never without you asking for it. Inputs are not stored.
Details in the privacy policy.