Zenn
🐣

VSCode+GoogleChromeでReactのデバッグを行う

2021/01/06に公開
React
TypeScript
VS Code
tech

目的

VSCodeでReactのデバッグを行えるようにします。

内容

create-react-appでReact Appのテンプレートを作成し、VSCodeでデバッグを行えるようにします。
VSCode上でブレークポイントやウォッチ式を使って効率よくデバッグすることを目的とします。

本手順では VSCode と Node.js と GoogleChrome がインストールされていることを前提としています。

動作確認環境

本記事は、以下の環境で動作確認済みです。

  • VSCode 1.52.1
  • GoogleChrome 87.0.4280.88
  • Node.js v12.19.0
  • npm 6.14.8
  • react 17.0.1

方法

  1. テンプレートアプリの作成
  2. launch.json の作成
  3. task.json の作成
    • .envの作成
  4. デバッグの開始

1.Reactテンプレートアプリの作成

まずは create-react-app を実行しテンプレートアプリを作成します。
下記コマンドの {workspace} はプロジェクトを保存したいパスに置き換えてください。

Reactテンプレート作成
mkdir {workspace}
cd {workspace}
npx create-react-app ./

なお、--template typescript を追加して実行することで、TypeScriptでテンプレートが作成されます。

Reactテンプレート作成 (TypeScript)
mkdir {workspace}
cd {workspace}
npx create-react-app ./ --template typescript

本手順ではTypeScriptで実行しているためファイル構成などは多少異なりますが、どちらの手順でも内容は変わりません。

2. task.json の作成

デバッグ開始前時に、事前に react-scripts start を実行するために、 タスク (task.json) を構成します。
(事前起動したくない場合(手動起動で問題ない場合)は、本手順は不要です。)

VSCodeで {workspace} を開き「ターミナル(T)」メニューより「タスクの構成…」を実行します。

add task.json

画面上部中央に、以下のようなリストが表示されます。

select task template

ここで「npm: start」を選択します。
なお、このあと手動で書き換えるので、なにを選んでも良いです。
「npm: start」を選択すると下記の画像のようにtask.jsonのテンプレートが自動的に作成されます。
上記で作成されたテンプレートを下記の内容に書き換えてください。

task.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "start",
            "label": "npm: start",
            "detail": "react-scripts start",
            "group": {
                "kind": "test",
                "isDefault": true
            },
            "isBackground": true,
            "problemMatcher": {
                "owner": "custom",
                "pattern": {
                    "regexp": "ˆ$"
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Compiling...",
                    "endsPattern": "Compiled .*"
                }
            }
        }
    ]
}

2-1. .env の作成

このままタスクを実行してもよいのですが、初回起動時に自動的にデバッグとは関係ないブラウザが表示されてしまいます。
ここでの操作はデバッグに影響せず、ブレークポイントやウォッチ式が効かないので注意が必要です。
そこで、 react-scripts start 実行時にブラウザの自動表示を抑制する設定を行います。

{workspace}フォルダ直下に .env というファイルを作り、内容を以下のようにしてください。

.env
BROWSER=none

これで、デバッグに関係ないブラウザが表示されなくなります。

3. launch.json の作成

続いてデバッグを行うための構成ファイル launch.json を作成します。

「実行(R)」メニューより「構成の追加…」を実行します。

add launch.json

画面上部中央に、以下のようなリストが表示されます。

select launch template
ここでは「Chrome (preview)」を選択します。
なお、このあと手動で書き換えるので、なにを選んでも良いです。
「Chrome (preview)」を選択すると下記の画像のようにlaunch.jsonのテンプレートが自動的に作成されます。
上記で作成されたテンプレートを下記の内容に書き換えてください。
preLaunchTask で上記で設定したタスクを事前に実行するように設定しています。

launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "preLaunchTask": "npm: start",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/src/*"
            }
        },
    ]
}

以上で設定は完了です。
ここまで完了していれば、下記のような構成になっているはずです。

complete setup

4. デバッグの開始

デバッグを開始するのはとても簡単です。
VSCode上で F5 キーを押すと、デバッグが開始されます。

なお、launch.json に複数の構成を定義している場合は、デバッグ画面で左上部のドロップダウンリストから Launch Chrome against localhost を選択してからデバッグを開始してください。

select launch

デバッグが開始されると、まずターミナル上で preLaunchTask で指定した npm: start タスクが実行されます。
このタスクは実質的には react-scripts start を実行します。

run task

その後、GoogleChromeが自動的に起動します。
ここで起動したブラウザがデバッグ対象となり、ここで実際にアプリを操作しながら、VSCode上でブレークポイントを設定したり、ウォッチ式で変数の監視ができるようになります。

run debag

デバッグの停止はブラウザを閉じるか、デバッグコントロールの「□」ボタンで停止できます。
なお、その際には preLaunchTask として実行されたタスクは停止されず再利用されるため、次回以降はデバッグ開始までの時間が短縮されます。
このタスクを止めるためには「ターミナルメニュー(T)」の「タスクの終了…」から該当タスクを選択するか、該当タスクが実行中のターミナルウィンドウ上で「Ctrl+C」、またはゴミ箱アイコンを押すことでタスクを停止できます。

おわりに

React+TypeScriptの勉強中は右も左もわからず、とにかくコンソールログで必死に変数の遷移を追っていました。
一通り落ち着いたところでデバッグ環境の構築を試みましたが、 launch.json の設定さえできていれば簡単にデバッグできたんですね。
もっと早めにやっておけばよかった…

Discussion