vscodeでNext.js/ReactのTypeScript/JavaScriptをデバックする

vscodeでTypeScript/JavaScriptをデバックする

Next.js/Reactで、TypeScript/JavaScriptをデバックする方法
vscode自体はJavaScriptのデバック機能を持っているので、Next.js/Reactで、そのでデバック機能を使う方法を紹介します

設定ファイルを作る

${projectRoot}/.vscode/launch.json を作る（例）

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server",
      "type": "pwa-node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "env": { "NODE_OPTIONS": "--inspect" }
    },
    {
      "name": "Next.js: debug client (Chrome)",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack://_N_E/*": "${webRoot}/*",
        "webpack:///*": "*"
      }
    },
    {
      "name": "Next.js: debug client (Edge)",
      "type": "pwa-msedge",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack://_N_E/*": "${webRoot}/*",
        "webpack:///*": "*"
      }
    }
  ],
  "compounds": [
    {
      "name": "Next.js: full-stack (Chrome)",
      "configurations": [
        "Next.js: debug server",
        "Next.js: debug client (Chrome)"
      ]
    },
    {
      "name": "Next.js: full-stack (Edge)",
      "configurations": [
        "Next.js: debug server",
        "Next.js: debug client (Edge)"
      ]
    }
  ]
}

このlaunch.jsonの書き方はvscode公式のVisual Studio Code debug configurationを参照

vscodeの実行とデバックを開く

実行とデバックのウィンドウの上に表示が現れる

v をクリックして開くとわかるが、一覧に表示されるのは launch.json の name: と一致している

• debug server：サーバ(node.js)だけ起動
• debug client (Chrome)：クライアント、chromeだけ起動
• debug client (Edge)：クライアント、Edgeだけ起動
• full-stack (Chrome)：サーバとchromeが起動
• full-stack (Edge)：サーバとEdgeが起動

上記のいずれかを選択して緑の▶ボタンをクリック
通常はchromeを使っているので「full-stack (Chrome)」を選んでいる。node.jsとchromeが同時に起動する

ブラウザは全くの新しいインスタンスで素の状態(キャッシュはクリアされてゼロ、拡張も全く無い)で起動する

キャッシュは毎回クリアされているのは有難いが、拡張が全くないのは困った
React/ext.jsで開発しているのだが、React developper toolが無い状態で毎回起動される

React developper tool等の拡張が必要な場合は別途Windowsのスタートメニューからブラウザを起動してURLを開くか、毎回拡張をインストールする必要がある（ちと、面倒）

あとは、breakPointを設定し、ステップ実行、変数の中身を見る等の操作方法は、vscodeのデバック機能を使ってやる