我遵循本文档中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
}
字符串
4条答案
按热度按时间euoag5mw1#
我在使用TypeScript + React时遇到了断点未绑定的问题。这是我的launch.json,我添加了这些属性,并使其工作:
字符串
Full launch.json:
型
l7wslrjt2#
如果断点设置在未从应用主页加载的组件上,则在VS Code中启动客户端调试器后,断点将淡出,并在工具提示中显示“未绑定断点”。
但是,在应用中导航以加载组件后,断点将变为红色,调试器将停止在该行。
这是使用默认的Nextjs应用程序布局,并遵循Nextjs debugging documentation。
9udxz4iz3#
对于那些仍然没有找到解决方案,但需要NextJS FE中的调试功能的人,这是解决方案:您可以使用Chrome调试器作为vscode红点标记的替代品。只需在您希望启动调试的任何地方插入“调试器”一词。
ExampleResult的数据库
https://nextjs.org/docs/pages/building-your-application/configuring/debugging#debugging-with-chrome-devtools
jexiocij4#
您可能应该首先标记断点,然后才启动调试器