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

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

デバッグの設定

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

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

Visual Studio Codeの拡張機能

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

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

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

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

設定ファイルをとりあえず作りたいだけなので、選ぶのはどれでもいい。 ここでは「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}"
    }
// ...

これでVisual Studioのデバッグ設定は完了。

デバッグ操作を行う

フロントエンドと静的サイトジェネレータ(SSG)、この辺りの感覚に慣れてないと微妙に戸惑うところなのだけど、 以下の2種類のデバッグがあるため注意。

  • ビルド時のデバッグ gatsby developgatsby build時の処理をデバッグする。
  • 実行時のデバッグ 起動後に画面を生成するReact部分の処理をデバッグする。

それぞれ書いていく。

ビルド時のデバッグ

ブレークポイントの設定

ビルドするときの処理なので、基本的にはgatsby-node.jsの処理を調べるときに使うことになると思う。 従って、gatsby-node.jsにブレークポイントを設定する。

gatsby-node.jsのブレークポイント

デバッグの実行

先ほど作った設定が正しく作られていれば、デバッグメニューから以下が選べるようになっている。

  • Gatsby develop
  • Gatsby build

デバッグメニュー

前者はgatsby develop、後者はgatsby buildのプロセスをデバッグする。 どちらかを選んで「デバッグの開始」ボタン(三角の緑色ボタン)を押すとデバッグが実行される。

先ほど設定したブレークポイントで処理が停止するので、 あとは通常のデバッグと同じく調査すればOK。

ブレークポイントで停止

実行時のデバッグ

ブレークポイントの設定

こちらは画面を生成する処理の辺りをデバッグする場合に使用する。 なんでも良いが、今回は例としてGatsby Starter Blogにあるblog-post.jsで止めてみる。

blog-post.jsのブレークポイント

デバッグの実行

先ほどと同様に、デバッグメニューから「Launch Chrome」が選べるようになっている。 (Firefoxの設定をした場合は「Launch Firefox」)

デバッグメニュー

これを選んで「デバッグの開始」ボタンを押すとデバッグが実行される。

あとは同じ。

ブレークポイントで停止


止まらない実行を目指すITエンジニア。

© 2020-2022, Ryz