code-inspector-plugin是当前最优解，因其在打包阶段通过AST分析将模板标签与源码行号强绑定，运行时点击元素即可通过vscode://协议精准跳转，不侵入业务代码、生产环境自动剥离，且原生支持Vite/Webpack/Rspack及Vue/React/Svelte/Astro等框架。
能直接点页面元素跳转到 VSCode 对应代码行的插件，目前只有 code-inspector-plugin 真正稳定可用，且无需改业务代码、不污染生产环境。
为什么 code-inspector-plugin 是当前最优解
它不是靠 DOM 上加临时属性或注入全局监听器来“猜”位置，而是利用打包阶段的 source map 和 loader 阶段注入行号信息，把 template 或 jsx 中每个标签和原始行号强绑定。浏览器运行时点击元素，插件通过 code-location 属性读取路径+行号，再调用 VSCode 的 vscode://file/ 协议打开文件并定位——整个链路精准、低侵入、可关闭。
- 不依赖 devtools 协议或 WebSocket 调试通道，Vite / Webpack / Rspack 项目开箱即用
- Vue 模板、React JSX、Svelte 标签、Astro 组件均支持，但对
.ts或.js中动态生成的 DOM 无效 - 开发环境启用后，生产构建自动剥离，
process.env.NODE_ENV === 'production'下完全不注入任何逻辑
code-inspector-plugin 在 Vite 项目中怎么配
Vite 用户容易卡在插件注册时机和 bundler 类型识别上。它不接受 vite.config.ts 中的 plugins: [] 数组直传，必须用 build.rollupOptions.plugins 注入，且 bundler 参数必须显式设为 'vite'。
- 安装：
pnpm add code-inspector-plugin -D - 配置（vite.config.ts）：
import { defineConfig } from 'vite'<br>import { codeInspectorPlugin } from 'code-inspector-plugin'<br><br>export default defineConfig({<br> build: {<br> rollupOptions: {<br> plugins: [<br> codeInspectorPlugin({ bundler: 'vite' })<br> ]<br> }<br> }<br>}) - 启动开发服务器后，按住
Alt键再点击页面任意元素，VSCode 就会自动跳转——没反应？检查是否开了多窗口，插件只作用于主 VSCode 窗口
点击没反应？常见断点排查清单
现象是鼠标悬停有高亮但点击无响应，大概率卡在通信环节或环境判断上：
- 确认浏览器控制台没报
Failed to execute 'fetch' on 'Window'：说明插件尝试发请求失败，检查本地是否开了代理或防火墙拦截了localhost:3000/__code_inspector__这类内部端点 - 检查 VSCode 是否启用了
Remote Development扩展：远程连接时vscode://file/协议无法解析路径，需改用vscode-remote://前缀，但该插件目前不支持 - Vue 3 + `
