Visual Studio CodeでGatsbyをデバッグするための設定と操作

2021-07-03 15:29

Visual Studio CodeでGatsbyのデバッグ操作とかをしたくて調べたら、情報は出てくるものの微妙に詰まったので、備忘のため対応内容を整理する。

デバッグの設定

Visual Studio Codeに拡張機能を入れる

Visual Studio Codeで拡張機能を入れる。「Debugger for Chrome」か「Debugger for Firefox」を検索してインストールする。

Visual Studio Codeの拡張機能

Visual Studio Codeに設定ファイルを作る

ざっと以下のような手順で設定ファイルを作成する。

サイドバーのデバッグアイコンを開く
「実行とデバッグ」を押す
出てきた選択肢から適当にどれかを選ぶ

デバッグ設定ファイルを作成

設定ファイルをとりあえず作りたいだけなので、選ぶのはどれでもいい。ここでは「Chrome」を選んだ。

launch.jsonファイル

こんな感じでlaunch.jsonファイルができるので、そのファイルの中身を以下の記述に丸っと変更。特殊なことをしてなければ、内容を環境に合わせて変更する必要もない。

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Gatsby develop",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/gatsby",
      "args": ["develop"],
      "runtimeArgs": ["--nolazy"],
      "console": "integratedTerminal"
    },
    {
      "name": "Gatsby build",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/gatsby",
      "args": ["build"],
      "runtimeArgs": ["--nolazy"],
      "console": "integratedTerminal"
    },
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

ちなみにFirefoxの場合はChromeの代わりに以下を追加する。(両方作ってもいいけど)

Chromeの方がメジャーで、実際便利な部分もあるんだけど、個人的にChromeがあんまり好きじゃないのでFirefoxもよく使っている。

launch.json

// ...
    {
      "name": "Launch Firefox",
      "type": "firefox",
      "request": "launch",
      "url": "http://localhost:8000",
      "webRoot": "${workspaceFolder}"
    }
// ...