如何在vscode中调试打字稿和反应文件（.tsx）

Question

我正在使用this项目模板。我在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"
        }
    ]

tsconfig：

{
  "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）typescript应用程序。

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

或者作为替代方案 - 使用其开发工具在chrome中调试它。