デバッグVSCODEで反応アプリ

反応アプリ(または任意のJavaScriptアプリ)を開発するとき、私は大いに使用するconsole.log() 何かが予想通りに走らないならば、デバッグ目的のために.それが本当にトリッキーであるならば、私はVSCodeデバッガを使用します.デバッガが好きではないのですが、JSをデバッグするのは他のプログラミング言語と同じくらい便利ではありません.

問題
通常、反応アプリはnpm run start/yarn start (反応スクリプトの起動)とlocalhost : 3000で実行され、ファイルの変更時にホットリロードされます.新しいクロムタブは反応によって開かれます、そして、私はちょうどこのタブを永遠に開いておきます.ある変数の値をチェックする必要がある場合は、コンソールにログ出力して、Chrome Devツールの出力をチェックします.
一方、VSCodeは、JSアプリの2つのデバッグオプションを提供しています:新しいブラウザウィンドウでデバッガを起動するか、または特定のブラウザウィンドウ/タブで既に実行中のアプリケーションにデバッガーをアタッチします.これまで、私は2番目のオプションの作業を得ることができなかったので、私は新しいウィンドウを起動する最初のオプションを使用していた.残念ながら、新しいブラウザを起動すると、実際にデバッグしたいページに移動しなければならず、すべての状態(たとえばフォーム入力)を失うことになります.だから効果的に同じアプリの2つのインスタンスで終了します.そして、それは私が最初にデバッガを使わなかった理由です.

しかしながら、私はもはやその問題を受け入れたくありませんでした.これが私の発見です!

リモートデバッグとアプリケーションを起動反応
JSアプリをデバッグするには、ブラウザをリモートデバッグを有効にして起動する必要があります.例えば、クロムで旗を始めなければなりません--remote-debugging-port=9222 . VSSコードのデバッグをクリックすると、このコマンドライン引数を使用して新しいブラウザウィンドウが起動します.残念なことに、デフォルトの反応スタートスクリプトはリモートデバッグなしでブラウザを起動します.
しかし、advanced configuration 2つの環境変数を設定することでブラウザを変更し、どのように起動するのかBROWSER and BROWSER_ARGS :

"scripts": {
    "start": "BROWSER='google chrome' BROWSER_ARGS='--remote-debugging-port=9222' react-scripts start",
    ...
}

The name of the browser オペレーティングシステムに依存します.例えば、クロムはgoogle chrome MacOSについてgoogle-chrome Linuxとchrome Windowsで.
このスクリプトを実行する前に、Chromeを完全に閉じる必要があります.Chromeが既にシステム上で動作している場合、この反応スタートスクリプトは新しいウィンドウを作成しませんが、既存のchromeウィンドウに新しいタブを作成します.私の想定では、プロセスレベルでリモートデバッグを有効にし、既にアイコンをクリックしてChromeを起動した場合は、既定ではリモートデバッグは有効になっていません.それから、反応が新しいウインドウを起動したいとき、Chromeはそれが既存の窓を使うことができるか、新しい窓を作成しなければならないかどうか内部的にチェックします.私の場合、既存のchromeウィンドウを再利用し、リモートデバッグを有効にしませんでした.私はVSCODEデバッガを私のランニング反応アプリに付けることができなかった理由でもあると思います.

リモートデバッグを常に起動
もう一つのより便利なオプションは、常にリモートデバッグを有効にするとChromeを起動することです.On Windows Chromeのショートカットを右クリックして、プロパティに移動し、上記のコマンドライン引数をターゲットフィールドに追加します.C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --remote-debugging-port=9222 -- "%1"
MacOSでは、それはトリッキーです.私はインターネットに2つのオプションを見つけました.両方のケースでは、元のアプリケーションを置き換えるためにドックに追加することができます新しいクロムアプリで終了します.それは単にコマンドライン引数でクロムを開始する一種のショートカットです.

カスタムクロームアプリを作成する
このanswer on StackOverflow カスタムエディタでテキストエディタだけを作成する方法について説明します.また、元のアプリからカスタムアプリケーションを識別するために使用できる素敵なデバッグのアイコンが含まれています.

オートメーターの使用
もう一つあるsolution by Dave Shepard どのようにカスタムクロームアプリを作成するAutomatorを使用する方法について.Automatorは、アプリケーションとワークフローを複数のアクションで構成を作成するための標準的なツールです.私の場合では、シェルスクリプトを実行してリモートデバッグを有効にするChromeを起動するアプリケーションを作成しました.
詳細な手順については、元のブログ記事を参照してください.

デバッグ
私たちはクロムアップし、リモートデバッグを有効に実行しているので、我々は反応アプリをデバッグするためのvscodeに戻ることができます.vscodeはファイルのデバッグ構成を管理します.vscode/起動.JSON :

{
    // 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": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "Attach to Chrome",
            "port": 9222,
            "request": "attach",
            "type": "pwa-chrome",
            "urlFilter": "http://localhost:3000/*", // use urlFilter instead of url!
            "webRoot": "${workspaceFolder}"
        }
    ]
}

つのデバッグ構成があります.最初に、リモートのデバッグを有効にした新しいChromeウィンドウをhttp://localhost:3000 , つ目はデバッガを既存のクロームウィンドウにアタッチします.ここで述べたい重要なことはport とurlFilter プロパティ.ポート番号は、上記のコマンドライン引数からリモートデバッグポートに一致しなければなりません(開発サーバが動作するポートではなく、たとえば3000です).URLフィルタ式は、このURLでページを検索します.
VSCodeでは、現在ブラウザでレンダリングされているコンポーネントにブレークポイントを置くだけで、Chromeにデバッグアタッチをクリックできます.ブレークポイントはコンポーネントの次の再レンダリングを中断し、新しいブラウザウィンドウで移動する必要はありません.