如何在 vscode 中调试 typescript&react 文件（.tsx）答案

【问题标题】：How to debug typescript&react files(.tsx) in vscode如何在 vscode 中调试 typescript&react 文件（.tsx）
【发布时间】：2017-02-16 23:58:51
【问题描述】：

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

我搜索了很多但找不到任何合适的解决方案.. 启动.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",

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

和工作目录：

【问题讨论】：

标签： reactjs visual-studio-code

【解决方案1】：

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

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

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

【讨论】：