typescript - NextJS VSCode Typescript ==> 断点未绑定

Question

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

尝试调试我的 Next.js 项目。该过程开始，调试器正确附加并显示来自调试的日志消息。但是，当我设置断点时，它仍然会褪色，当我将其悬停时，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
}

标签： typescriptvisual-studio-codenext.js

Answer 1

我遇到了 TypeScript + React 的断点未绑定问题。这是我的launch.json，我添加了这些属性并让它工作：

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

完整的launch.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/*"
      }
    }
  ]
}