web-dev-qa-db-ja.com

React debug Chromeの代わりにVSCodeとFirefoxを使用してデバッグ

VSCodeのデバッグ「機能」を使用してリアクティブアプリケーションをデバッグしようとしていますが、これまでにクイックWeb検索で、VSCodeのCrome用デバッガーを使用してそれを行う方法を主張する多くのリソースが見つかりました。

しかし、私はFirefoxでそれを行う方法を見つけることができません。これまで、VSCodeに「Firefox用デバッガ」をインストールし、次のデバッグオプションを追加しました。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug app",
            "type": "firefox",
            "request": "attach"
        }
    ]
}

そして、私はドキュメントの状態に従って実行します：

firefox -start-debugger-server -no-remote

そして、VSCodeを介してデバッグプロセスを初期化しようとすると、それを行うとエラーが発生します：

eCONNREFUSED 127.0.0.1:6000を接続します

Tha thewエラーは、次のコマンドを実行しているGNU/Linuxマシンで確認できます

netstat -ntlp
(Not all processes could be identified, non-owned process info
 will not be shown, you would have to be root to see it all.)
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 127.0.0.1:37893         0.0.0.0:*               LISTEN      9368/node       
tcp        0      0 0.0.0.0:27017           0.0.0.0:*               LISTEN      -               
tcp        0      0 0.0.0.0:139             0.0.0.0:*               LISTEN      -               
tcp        0      0 127.0.0.1:6379          0.0.0.0:*               LISTEN      -               
tcp        0      0 127.0.0.1:9333          0.0.0.0:*               LISTEN      10924/code      
tcp        0      0 127.0.1.1:53            0.0.0.0:*               LISTEN      -               
tcp        0      0 10.42.0.1:53            0.0.0.0:*               LISTEN      -               
tcp        0      0 127.0.0.1:631           0.0.0.0:*               LISTEN      -               
tcp        0      0 0.0.0.0:3000            0.0.0.0:*               LISTEN      6732/node       
tcp        0      0 127.0.0.1:3001          0.0.0.0:*               LISTEN      6784/mongod     
tcp        0      0 0.0.0.0:3002            0.0.0.0:*               LISTEN      11168/node      
tcp        0      0 0.0.0.0:445             0.0.0.0:*               LISTEN      -               
tcp        0      0 0.0.0.0:20256           0.0.0.0:*               LISTEN      9368/node       
tcp6       0      0 :::9090                 :::*                    LISTEN      11340/node      
tcp6       0      0 :::139                  :::*                    LISTEN      -               
tcp6       0      0 ::1:631                 :::*                    LISTEN      -               
tcp6       0      0 :::445                  :::*                    LISTEN      -

だから私はVSCodeのデバッグ機能をreact-create-appで作成され、Firefoxを使用してnpm startコマンドで実行されるReactアプリで使用する方法は？

編集1

現在実行中のFirefoxインスタンスに対して何らかの理由でエラーが表示されます：

[親13358、Gecko_IOThread]警告：パイプエラー（173）：ύσύνδεσηέκλεισεαπότοταίρι：file /build/firefox-JSAO4L/firefox-57.0.3+build1/ipc/chromium/src/chrome/common/ipc_channel_posix.cc 、行353

Firefgoxがデバッガーを閉じる理由を知っていますか？

reactjsdebuggingfirefoxvisual-studio-code
13
Dimitrios Desyllas

上記のプラグインには、次のgithubリポジトリがあります。 https://github.com/hbenl/vscode-firefox-debug

また、ドキュメントをよく見ると、デバッグを有効にするために、Firefoxに次の設定を適用することが記載されています。

Uploaded image

上記の変更は、ブラウザのアドレスバーにabout:configと入力することで適用できます。

その後、vscodeの構成を使用するだけでデバッグできます。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug app",
            "type": "firefox",
            "request": "attach"
        }
    ]
}

これで、アプリケーションをデバッグするたびに、ターミナル上で実行するだけです：

firefox -start-debugger-server -no-remote

VSCodeで[デバッグ]オプションを選択し、画像が示すようにオプションを選択します。

Selecting Vscode debugger

11
Dimitrios Desyllas