如何在 Visual Studio 代码中调试打字稿 create-react-app

Question

重现步骤：

1. 在任何 .tsx 文件中设置断点

2. 运行我的 npm 脚本

   "start": "react-scripts start",

3. 使用

   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"
      ]
    }

Answer 1

也许这并不能解决整个问题，但我遇到的一个问题是我错过了在 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