NextJS VSCode Typescript ==> 斷點未綁定

Question

我遵循本文檔中的 Next.js 說明： https://nextjs.org/docs/advanced-features/debugging#using-the-debugger-in-visual-studio-code

嘗試調試我的 Next.js 項目。 該過程開始，調試器正確附加並顯示來自調試的日志消息。 但是，當我設置斷點時，它仍然褪色，當我 hover 時，VSCode 說“未綁定斷點”。 更不用說，調試器不會在斷點處停止。

但是，如果我使用關鍵字“調試器”，那么調試器確實會停在我使用它的地方。

我的系統：

"next": "9.4.4",

tsconfig.json：

{
  "compilerOptions": {
    "downlevelIteration": true,
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "sourceMap": true,
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "allowUnreachableCode": false,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "types/": [
        "src/types/index"
      ],
      "types/*": [
        "src/types/*",
        "src/types/index"
      ],
      "data/*": [
        "src/data/*"
      ],
    },
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "next.config.js"
  ],
  "compileOnSave": true
}

Answer 1

您可能應該先標記斷點，然后才啟動調試器

Answer 2

我遇到了 TypeScript + React 的斷點未綁定問題。 這是我的launch.json，我添加了這些屬性並讓它工作：

  "sourceMaps": true,
  "breakOnLoad": true,
  "sourceMapPathOverrides": {
  "webpack:///./src/*": "${webRoot}/dist/*",
  "webpack:///src/*": "${webRoot}/dist/*"
  }
}

全面啟動。json：

 {

  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug React Run",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
          "webpack:///./src/*": "${webRoot}/dist/*",
          "webpack:///src/*": "${webRoot}/dist/*"
      }
    }
  ]
}