# zh-lx/code-inspector

🚀 Click the dom to open your IDE and position the cursor at dom's source code location! 点击页面 dom 来打开 IDE 并将光标自动定位到源代码位置!

Repository: https://github.com/zh-lx/code-inspector
Canonical: https://ross.abutalabs.com/products/code-inspector
Homepage: https://inspector.fe-dev.cn
Language: TypeScript
License: MIT
License Family: permissive
Topics: vue, vscode, webpack-plugin, code, devtools, inspector, react, vite-plugin
Last push: 2026-08-24T11:23:22+00:00

## Health v2 (maintenance only)
Score: 77/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 99, release rhythm 35, longevity 100
- inputs: {"age_days": 1654, "days_push": 9, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 3012, forks 240 (observed 2026-08-28T04:07:37.830756+00:00)

## What it is
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
- artifact type: plugin
- maturity: active
- function: developer-tools, plugin-system, build-tool
- domain: developer-tools, frontend, web-development
- platform: browser
- tags: webpack-plugin, vite-plugin, vue, react, devtools, ide-integration, dom-inspector, nodejs, web-server

## Member repositories
- zh-lx/code-inspector (main) score 77

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:07:37.830756+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T18:47:02.498394+00:00, confidence not recorded.
  - readme: https://github.com/zh-lx/code-inspector (fetched 2026-08-28T04:07:37.830756+00:00, sha ed2375bfe93c)
  - homepage: https://inspector.fe-dev.cn (fetched 2026-08-29T09:45:48.610958+00:00, sha b6baef79b568)
- Data as of 2026-08-30T08:39:29.467469+00:00.