如何调试@vue/cli 5创建的Vue3应用？Debugger for Chrome已废弃

VS Code 调试步骤 #

1. 安装正确的调试扩展 #

放弃已废弃的Debugger for Chrome，直接使用VS Code自带的JavaScript Debugger（默认已启用），或者安装Debugger for Microsoft Edge（兼容Chrome调试逻辑）。

2. 配置调试文件 #

在项目根目录下创建.vscode/launch.json，填入以下配置（根据常用浏览器选择）：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome 调试本地项目",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true
    },
    {
      "type": "edge",
      "request": "launch",
      "name": "Edge 调试本地项目",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true
    }
  ]
}

注意：如果项目启动端口不是8080，修改url中的端口号即可。

3. 确保生成Source Map #

在vue.config.js中（@vue/cli5默认用defineConfig包裹配置），添加或确认devtool配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 开启source map，保证调试时能映射到原始源码
  devtool: 'cheap-module-source-map'
})

4. 启动调试 #

• 先执行npm run serve启动开发服务器
• 在VS Code左侧打开“运行和调试”面板，选中对应的调试配置，点击启动按钮
• 在Vue组件的.vue文件中设置断点，触发对应页面逻辑即可进入调试状态

Chrome 浏览器调试步骤 #

1. 确认Source Map已开启 #

和VS Code调试要求一致，确保vue.config.js中配置了devtool，@vue/cli5开发环境默认会开启该配置，若被修改过需手动检查恢复。

2. 直接调试源码 #

• 用Chrome访问http://localhost:8080
• 按F12打开开发者工具，切换到Sources面板
• 在左侧文件树中找到webpack:// → . → src，展开后找到目标组件文件，点击进入后设置断点
• 触发页面逻辑，断点会自动命中

3. 修复组件面板调试问题 #

• 安装Vue DevTools 6+版本（专门适配Vue3的扩展，不要安装Vue2版本）
• 进入Chrome扩展设置，开启Vue DevTools的“允许访问文件URL”选项
• 重启Chrome和开发服务器，打开DevTools的Components面板，选中目标组件后右键选择“Inspect in Sources”，即可跳转到组件源码并设置断点
• 若仍无法显示组件，确认当前项目处于开发环境（生产环境代码会被压缩，DevTools无法解析组件结构）

内容的提问来源于stack exchange，提问作者Pipo