どのようにVSCODEで反応アプリをデバッグする

VSCodeでの反応アプリケーションをデバッグするために、vscodeがデバッグに必要なすべての機能を含んでいるので、もはや拡張モジュールをインストールする必要はありません.
以下に、自分の反応アプリケーションをデバッグするための手順を示します.

反応プロジェクトはcreate-react-appで作成され、デフォルトでポート3000で動作していました.

最初にViewを実行してデバッグして、launch.jsonの設定ファイルを作成します.

今、あなたのアプリケーションはポート3000で実行されているので、8080の代わりにURLパラメータのポートを3000に変更します.

いくつかのブレークポイントを設定し、[実行]をクリックし、アプリケーションのデバッグインスタンスを開始します.

最終打ち上げ.設定ファイルはこのようになります.私は私のケースのタイプが異なっているようにエッジを使用しています.

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}