重现步骤:
在任何 .tsx 文件中设置断点
运行我的 npm 脚本
"start": "react-scripts start",
使用
F5
或从 vscode 的“运行和调试”窗口中选择配置来开始调试。
下面显示的任一配置都会导致 vscode 中出现“未经验证的断点”。
launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch Firefox",
"request": "launch",
"type": "firefox",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"enableCRAWorkaround": true
},
{
"name": "Launch Firefox",
"request": "launch",
"type": "firefox",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"enableCRAWorkaround": false
}
]
}
我可以在 vscode 中调试正常的 JavaScript 和 TypeScript 项目,没有任何问题。我的猜测是,我必须更改“react-scripts start”正在执行的操作,或者考虑它将在我的 launch.json 中生成 .jsx 文件和源映射。这是我在 vscode 中调试 TypeScript 时遵循的指南。特别是,本节解释了我认为正在发生的事情。
如果原始源不存在源映射,或者源映射已损坏并且无法在源和生成的 JavaScript 之间成功映射,则断点显示为未经验证(灰色空心圆圈)。
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false, // I've tried this with both false and true (default value)
"jsx": "react-jsx",
"sourceMap": true // I've tried with this both true and false (default value)
},
"include": [
"src"
]
}
也许这并不能解决整个问题,但我遇到的一个问题是我错过了在 launch.json 中使用这个参数,我现在编译没有错误,我没有看到源映射未找到,但我的断点仍然存在不工作。
既然你使用 ESM 而不是 CommonJS 那么你需要看看这个:
https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_how-do-i-debug-ecmascript-modules
添加
"runtimeArgs": [
//other args here,
"--experimental-modules"
],
到你的launch.json