code-inspector-plugin可实现Vue项目点击DOM元素秒开VSCode定位源码，需在Vue CLI中以Webpack插件方式安装配置，确保开发模式运行、VSCode注册vscode:协议且路径映射正确。
Vue 项目里点一下页面元素就跳到对应 .vue 源码行——这事不用靠 F12 + 手动翻文件树猜位置，code-inspector-plugin 能直接做到，前提是构建配置、IDE 协议、运行时环境三者对齐。错一个环节，点击就白点，光标纹丝不动。
code-inspector-plugin 怎么装进 Vue CLI（Webpack）项目
它不是 VSCode 插件，而是构建时注入的 Webpack 插件，必须走打包流程才能生成源码映射信息。
- 用
pnpm add code-inspector-plugin -D或yarn add code-inspector-plugin -D安装 - 在
vue.config.js的configureWebpack或chainWebpack中引入：
const CodeInspectorPlugin = require('code-inspector-plugin')
module.exports = {
configureWebpack: {
plugins: [
new CodeInspectorPlugin({
// 默认已开启，显式写出来更可控
enable: process.env.NODE_ENV === 'development'
})
]
}
}
- 确保项目运行在开发模式（
npm run serve），生产环境默认不启用 - 不重启服务的话，插件不会生效——改完配置必须重新
serve
pwa-chrome launch.json 配置为什么总连不上
VSCode 调试器连不上，90% 是 url、webRoot、sourceMapPathOverrides 这三项没对齐，尤其容易把 Vue CLI 和 Vite 的规则混用。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
url必须带协议且端口一致，比如"http://localhost:8080"，写成localhost:8080或127.0.0.1:8080都会失败 -
webRoot对 Vue CLI 项目必须是"${workspaceFolder}/src"，不是根目录 -
sourceMapPathOverrides要匹配 Webpack 输出的路径前缀："webpack:///src/*": "${webRoot}/*"是标准写法；加一条"webpack:///./*": "${webRoot}/*"可覆盖部分别名路径 - Chrome 启动时必须带
--remote-debugging-port=9222参数，快捷方式或终端命令都要加
点击元素后 VSCode 不打开，或者打开错文件
现象是点击 DOM 后没反应，或打开了 app.js 之类打包产物而不是 xxx.vue ——这说明源码映射断在了运行时通信或路径解析环节。
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器控制台是否报
Failed to execute 'vscode:' URL，说明 VSCode 未注册vscode:协议（macOS 需运行code --install-extension ms-vscode.vscode-js-profile-table并重启；Windows/macOS 都要确认 VSCode 是默认处理该协议的应用） - 确保
code-inspector-plugin版本 ≥ 4.0.0（2026 年起默认使用vscode:协议，旧版用vscode-insiders:或自定义端口） - 如果项目用了
public/目录下的静态 HTML 入口（非index.html在src/下），插件可能无法正确推导组件路径，建议统一用标准入口 - 第三方 UI 库组件（如
<el-button>）能定位到库源码的前提是：该库发布时带了 source map，且你本地node_modules未被删掉dist/*.map文件
最常被忽略的是：插件生成的映射依赖构建时的绝对路径和当前工作目录，一旦你在子目录里启动 npm run serve（比如从 packages/ui 启动 monorepo 子包），webRoot 和插件内部路径推导就会错位——这种场景必须手动指定 inspectorOptions.root 指向真实源码根目录。
