如何用 VS Code 调试项目代码

[yanyue404]

基本步骤

1. VS Code 安装 Debugger for Chrome 插件
2. 配置 launch.json 与 source-map 映射关系
3. 命令行启动项目
4. 为项目添加断点
5. Start Debuggging（F5 快捷键）

用 VS Code 调试 Nuxt

Vue 项目的路径 source-map 需要单独映射一下，才能对应到源码的位置，因为默认的源码映射会在文件后添加 hash 值（类似 [resource-path]?[hash]）。

也就是调试配置里多了个 sourceMapPathOverrides：

.vscode/launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "userDataDir": "C:/Users/Administrator/AppData/Local/Google/Chrome/User Data",
      "url": "http://localhost:3335/base/project-name",
      "sourceMapPathOverrides": {
        "yanyue404://*": "${workspaceFolder}/*"
      }
    }
  ]
}

url 设置为项目对应的 baseUrl，如： http://localhost:7711/tkproperty/nprd/N20210033

了解 outputdevtoolmodulefilenametemplate 配置，通过修改配置 自定义每个 source map 的 sources 数组中使用的名称，修改默认的文件名映射。

nuxt.config.js

const build = () => {
    extend(config, { isClient }) {
        if(isClient) {
        // 非生产环境开启 source-map
        if (process.env.PATH_TYPE !== "production") {
           config.devtool  = "eval-source-map"
           Object.assign(config.output, {
             devtoolModuleFilenameTemplate: 'yanyue404://[resource-path]'
          })
        }
      }
    }
};

用 VS Code 调试 Vite 项目

使用 npm scripts 命令启动 vite 后，需要修改 vite.config.js 配置，开启 source-map，同时修改 sourcemapPathTransform，将相对路径替换为绝对路径。

// vite.config.js
export default defineConfig(({ mode }) => {
  return {
    base: '/',
    build: {
      sourcemap: mode === 'development',
      minify: true,
      rollupOptions: {
        output: {
          sourcemapPathTransform: (relativeSourcePath, sourcemapPath) => {
            // 将会把相对路径替换为绝对路径
            return path.resolve(path.dirname(sourcemapPath), relativeSourcePath)
          }
        }
      }
    }
  }
})

配置 vscode 调试配置，点击播放按钮开始调试

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "调试 vite 项目",
      "runtimeArgs": ["--auto-open-devtools-for-tabs"],
      "userDataDir": "C:/Users/Administrator/AppData/Local/Google/Chrome/User Data",
      "url": "http://localhost:3000"
    }
  ]
}

参考链接

• 如何让 Vue、React 代码的调试变得更爽