zh-lx/code-inspector

Health v2 · maintenance only

Flags: no_releases

Adoption not part of the score

3012 stars · 240 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-29, confidence not recorded

A build-tool plugin that lets developers click any DOM element in the browser to automatically open their IDE with the cursor positioned at the element's source code location. It works via webpack, vite, rspack, and other bundler plugins with support for Vue, React, Preact, Solid, Qwik, Svelte, and Astro.

Use cases

• jump from a rendered DOM element to its source code in the IDE
• speed up locating components in large frontend codebases
• debug which file renders a UI element in Vue or React apps
• integrate click-to-source into webpack or vite builds
• improve developer experience when onboarding to unfamiliar codebases

When to choose

• you develop web frontends with Vue, React, or similar frameworks
• you want zero-intrusion source-code navigation from the browser
• your project uses webpack, vite, rspack, Next.js, Nuxt, or UmiJS

When to avoid

• you need production debugging or runtime monitoring rather than dev-time navigation
• your stack is not JavaScript-based or unsupported by the plugin
• you only need browser DevTools inspection without IDE integration

Facets

plugin · maturity active

developer-tools plugin-system build-tool developer-tools frontend web-development browser webpack-plugin vite-plugin vue react devtools ide-integration dom-inspector nodejs web-server

Member repositories

For agents

markdown · JSON · MCP: product_card(name="zh-lx/code-inspector")