Code-inspector is a development tool that enables clicking on page elements to automatically open your IDE and position the cursor at the corresponding source code location.
The tool solves the friction of mapping rendered UI back to source files during development. It works by instrumenting your build process through plugins for webpack, Vite, rspack, rsbuild, farm, esbuild, turbopack, and mako. When you click an element in the browser, the tool identifies its source location and launches your configured editor with the cursor positioned at that exact line.
The tool supports a broad range of web frameworks including Vue, React, Preact, Solid, Qwik, Svelte, and Astro, as well as meta-frameworks like Next.js, Nuxt, and Umi. It works with multiple editors through a launch mechanism that detects your environment. This breadth makes it suitable for teams using different technology stacks within the same organization. The README does not compare it to alternatives, so no comparative positioning is available.
The project shows consistent maintenance with regular updates to support new framework versions and build tools. The codebase is written in TypeScript and includes comprehensive documentation covering configuration for each supported bundler and framework. Online demos are maintained for multiple framework combinations, indicating active engagement with keeping examples functional.
