无法在 VSCode 中设置断点来调试 NuxtJS 应用程序答案

【问题标题】：Unable to set a breakpoints to debug a NuxtJS app in VSCode无法在 VSCode 中设置断点来调试 NuxtJS 应用程序
【发布时间】：2020-11-12 15:50:16
【问题描述】：

我正在尝试在 VSCode 中调试 Nuxt.JS 应用程序，按照here 提供的说明，launch.json 文件如下：

{   "version": "0.2.0",   "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///*": "${workspaceRoot}/*"
      }
    },
    {
      "type": "node",
      "request": "launch",
      "name": "server: nuxt",
      "args": ["dev"],
      "osx": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt"
      },
      "linux": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt"
      },
      "windows": {
        "program": "${workspaceFolder}/node_modules/nuxt/bin/nuxt.js"
      }
    }   ],   "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": ["server: nuxt", "client: chrome"]
    }   ] }

但尝试设置断点时，我收到了以下消息： “断点被忽略，因为找不到生成的代码（源映射问题？）”

我不知道如何进一步修改 launch.json 文件或将哪个选项添加到 nuxt.config.js。

【问题讨论】：

尝试在nuxt.config.js中设置devtool

标签： nuxt.js vscode-debugger

【解决方案1】：

试试这个（仅限客户端）：

launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

nuxt.config.js:

export default {
  build: {
    // Enable breakpoints
    extend (config, ctx) {
      if (ctx.isDev) {
        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      }
    }
  }
}

【讨论】：