The Vibeary — tag
devtools
11 resources in The Vibeary tagged "devtools" — tools, libraries and references pulled from across the library's shelves, each one checked by hand before it was added.
Gems in this collection
Dev Tips
Long-running series of animated browser DevTools tips, delivered as GIFs with a searchable archive.
Scroll-Driven Animations Debugger
DevTools extension that lists scroll and view timelines on a page and visualizes their ranges and current progress.
New Moon
Dark syntax theme tuned for HTML, CSS, JavaScript and PHP, ported to VS Code, Sublime, Vim, iTerm and Chrome DevTools.
playwright-devtools-mcp
MCP server pairing Playwright with full Chrome DevTools access for autonomous debugging, performance and security inspection.
React Scan
Overlay that highlights which React components re-render and how expensive each render is, with no code changes or babel plugin.
vite-plugin-inspect
Dev-server panel that shows each module's source after every Vite plugin transform, letting you step through the transform pipeline.
PinPoint
Click an element on your local dev site, type what should change, and your coding agent receives the selector, computed styles, component chain, source hint and a cropped screenshot.
medula
Dev-server MCP bridge so agents can inspect and edit live Vue, React, Svelte, or Solid app state from inside the running page.
DesignGui
Browser extension for inspecting and editing a live site's CSS custom properties and design tokens.
VisBug
Browser extension giving design-tool style handles on any live page for spacing, typography, alignment and element inspection.
vite-plugin-vue-inspector
Adds a click-to-source overlay so option-clicking an element in the browser opens the exact component line in your editor.