NextJS VSCode Typescript ==>未绑定断点

mec1mxoz 于 4个月前发布在 Vscode

关注(0)|答案(4)|浏览(58)

我遵循本文档中Next.js的说明：https://nextjs.org/docs/advanced-features/debugging#using-the-debugger-in-visual-studio-code
尝试调试我的Next.js项目。进程启动，调试器正确连接并显示调试的日志消息。然而，当我设置断点时，它保持褪色，当我悬停它时，VSCode说“未绑定断点”。更不用说，调试器不会在断点处停止。
但是，如果我使用关键字“debugger”，那么调试器会在我使用它的地方停止。
我的系统：

的数据
第一个月
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
}

字符串

next.js

来源：https://stackoverflow.com/questions/62690455/nextjs-vscode-typescript-breakpoints-unbound

4条答案

按热度按时间

euoag5mw1#

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

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

字符串
Full 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/*"
      }
    }
  ]
}

型

赞(0）回复(0）举报 4个月前

l7wslrjt2#

如果断点设置在未从应用主页加载的组件上，则在VS Code中启动客户端调试器后，断点将淡出，并在工具提示中显示“未绑定断点”。
但是，在应用中导航以加载组件后，断点将变为红色，调试器将停止在该行。
这是使用默认的Nextjs应用程序布局，并遵循Nextjs debugging documentation。

赞(0）回复(0）举报 4个月前

9udxz4iz3#

对于那些仍然没有找到解决方案，但需要NextJS FE中的调试功能的人，这是解决方案：您可以使用Chrome调试器作为vscode红点标记的替代品。只需在您希望启动调试的任何地方插入“调试器”一词。
Example Result的数据库
https://nextjs.org/docs/pages/building-your-application/configuring/debugging#debugging-with-chrome-devtools

赞(0）回复(0）举报 4个月前

jexiocij4#

您可能应该首先标记断点，然后才启动调试器

赞(0）回复(0）举报 4个月前