如何在 vscode 中调试 typescript&react 文件(.tsx)

Question

我正在使用这个项目模板。我在 App.tsx 文件中的 App 类中设置了一个断点。下面共享配置。看起来没有什么问题，但即使“F5”也没有触发任何东西，它也不起作用。

我搜索了很多但找不到任何合适的解决方案.. launch.json：

"version": "0.2.0",
    "configurations": 
    [

        {
            "args": [],
            "cwd": "${workspaceRoot}",
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "name": "DEBUG",
            "outDir": "${workspaceRoot}/build/dist",
            "preLaunchTask": "compile",
            "program": "${workspaceRoot}/src/App.tsx",
            "request": "launch",
            "runtimeArgs": [
                "--nolazy"
            ],
            "runtimeExecutable": null,
            "sourceMaps": true,
            "stopOnEntry": false,
            "type": "node"
        }
    ]

ts配置：

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",

这是调试配置名称和断点：

和工作目录：

Answer 1

您无法调试它，因为您运行的应用程序是客户端（在浏览器中执行），而开箱即用的 VSCode 支持服务器端（例如 Nodejs）打字稿应用程序的调试。

您可以通过安装Chrome 调试器扩展程序并遵循其指南来调试您的应用程序。

或者作为替代方案 - 使用其开发工具在 Chrome 中对其进行调试。