Как отлаживать машинописные файлы и файлы ответов (.tsx) в vscode

Question

Я использую шаблон проекта this. И я установил точку останова в класс App в файле App.tsx. Общие конфигурации ниже. ничего не выглядело неправильно, но оно не работает даже «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).

Вы можете отладить свое приложение, установив расширение Debugger for Chrome и следуя их рекомендациям.

Или как альтернатива - отлаживать его внутри хрома, используя свои инструменты dev.