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

问题描述：

我正在使用this项目模板。我在App.tsx文件中设置了一个断点到App类。下面的共享配置。没有什么看起来错误，但它不工作，即使“F5”不触发任何东西。如何在vscode中调试打字稿和反应文件（.tsx）

我搜索了很多，但无法找到任何妥善的解决办法.. 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",

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

和工作目录：

答

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

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

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

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

相关推荐