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に設定ファイルを作る
ざっと以下のような手順で設定ファイルを作成する。
- サイドバーのデバッグアイコンを開く
- 「実行とデバッグ」を押す
- 出てきた選択肢から適当にどれかを選ぶ
設定ファイルをとりあえず作りたいだけなので、選ぶのはどれでもいい。 ここでは「Chrome」を選んだ。
こんな感じで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もよく使っている。
// ...
{
"name": "Launch Firefox",
"type": "firefox",
"request": "launch",
"url": "http://localhost:8000",
"webRoot": "${workspaceFolder}"
}
// ...
これでVisual Studioのデバッグ設定は完了。
デバッグ操作を行う
フロントエンドと静的サイトジェネレータ(SSG)、この辺りの感覚に慣れてないと微妙に戸惑うところなのだけど、 以下の2種類のデバッグがあるため注意。
- ビルド時のデバッグ
gatsby develop
やgatsby build
時の処理をデバッグする。 - 実行時のデバッグ 起動後に画面を生成するReact部分の処理をデバッグする。
それぞれ書いていく。
ビルド時のデバッグ
ブレークポイントの設定
ビルドするときの処理なので、基本的にはgatsby-node.js
の処理を調べるときに使うことになると思う。
従って、gatsby-node.js
にブレークポイントを設定する。
デバッグの実行
先ほど作った設定が正しく作られていれば、デバッグメニューから以下が選べるようになっている。
- Gatsby develop
- Gatsby build
前者はgatsby develop
、後者はgatsby build
のプロセスをデバッグする。
どちらかを選んで「デバッグの開始」ボタン(三角の緑色ボタン)を押すとデバッグが実行される。
先ほど設定したブレークポイントで処理が停止するので、 あとは通常のデバッグと同じく調査すればOK。
実行時のデバッグ
ブレークポイントの設定
こちらは画面を生成する処理の辺りをデバッグする場合に使用する。 なんでも良いが、今回は例としてGatsby Starter Blogにあるblog-post.jsで止めてみる。
デバッグの実行
先ほどと同様に、デバッグメニューから「Launch Chrome」が選べるようになっている。 (Firefoxの設定をした場合は「Launch Firefox」)
これを選んで「デバッグの開始」ボタンを押すとデバッグが実行される。
あとは同じ。