SCRAWLED TECH BLOG

当サイトは、アフィリエイト広告を利用しています

Gatsbyのデバッグ方法

作成日：2021月11月30日
更新日：2023年02月26日

ReactフレームワークのGatsbyはSSG（静的サイトジェネレーター）の機能を持っており

  • ビルドプロセス時に実行されるコードのデバッグ方法（gatsby-node.js）
  • 画面表示時に実行されるコードのデバッグ方法

がある。
上記二つをVSCodeとChromeデベロッパー・ツールでそれぞれ実行する方法をまとめる。

VSCodeでデバッグする

VSCode上のソースにブレークポイントを打ってデバッグする方法をまとめる。

VSCode拡張機能を入れる

VSCodeで拡張機能を入れる。
「Debugger for Chrome」を検索してインストールしておく

gatsby-node.jsのデバッグ

GatsbyのSSG（静的サイトジェネレーター）の部分であるgatsby-node.jsはビルドプロセス時に実行されるので
画面表示時には実行済みのため通常のChromeデベロッパー・ツールなどではデバッグすることができない。
VScodeでgatsby-node.jsをデバッグする場合はlanch.jsonを作成して行う。

windows

windowsを使用している場合

lanch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Gatsby develop",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/gatsby",
      "windows": {
        "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
      },
      "args": ["develop"],
      "env": {
        "PARCEL_WORKERS": "0",
        "GATSBY_CPU_COUNT": "1",
      },
      "runtimeArgs": ["--nolazy"],
      "console": "integratedTerminal"
    },
    {
      "name": "Gatsby build",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/gatsby",
      "windows": {
        "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
      },
      "args": ["build"],
      "env": {
        "PARCEL_WORKERS": "0",
        "GATSBY_CPU_COUNT": "1",
      },
      "runtimeArgs": ["--nolazy"],
      "console": "integratedTerminal"
    }
  ]
}

Linux

Linuxを使用している場合

lanch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Gatsby develop",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/gatsby",
      "args": ["develop"],
      "env": {
        "PARCEL_WORKERS": "0",
        "GATSBY_CPU_COUNT": "1",
      },
      "runtimeArgs": ["--nolazy"],
      "console": "integratedTerminal"
    },
    {
      "name": "Gatsby build",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/gatsby",
      "args": ["build"],
      "env": {
        "PARCEL_WORKERS": "0",
        "GATSBY_CPU_COUNT": "1",
      },
      "runtimeArgs": ["--nolazy"],
      "console": "integratedTerminal"
    }
  ]
}

更新されてる場合もあるので最新は下記をドキュメント参照してください

lanch.jsonを作成してVSCodeのデバッグタグから「Gatsby develop」を選択して実行すると
下記のようなメッセージがでてVSCodeでつけたブレークポイントでとまる。

GitBash
$  /usr/bin/env PARCEL_WORKERS=0 GATSBY_CPU_COUNT=1 'NODE_OPTIONS=--require "c:/Program Files/Microsoft VS Code/resources/app/extensions/ms-vscode.js-debug/src/bootloader.bundle.js" --inspect-publish-uid=http' 'VSCODE_INSPECTOR_OPTIONS={"inspectorIpc":"\\\\.\\pipe\\node-cdp.14748-1.sock","deferredMode":false,"waitForDebugger":"","execPath":"C:\\Users\\lunaj\\.nvm\\versions\\node\\v18.9.0\\bin\\node.exe","onlyEntrypoint":false,"autoAttachMode":"always","fileCallback":"C:\\Users\\lunaj\\AppData\\Local\\Temp\\node-debug-callback-20f66458620f3433"}' C:\\Users\\lunaj\\.nvm\\versions\\node\\v18.9.0\\bin\\node.exe --nolazy .\\node_modules\\gatsby\\dist\\bin\\gatsby develop 
Debugger attached.
Debugger attached.

その後はブレークポイントからデバッグを続けることができる。
※ブレークポイントがない場合はそのまま起動する。

ブレークポイントが無効化される場合がある

なぜかブレークポイントが無効化され、デバッグできない状態が発生した。
原因は不明だが「gatsby clean」を実行し、再度、実行すると正常に実行できた

templateコンポーネントのdebugについて

gatsby-node.js自体は「gatsby develop」したときに実行され、debugできるが
createPageでtemplateコンポーネントを使ってpageを作成する処理自体は
画面実行時に流れるため、画面を実行するまで下記のようにブレークポイントを無効化された状態になる。

2023-02-26-22-47-38

後述する画面表示時に実行されるコードのデバッグ方法の「Launch Chrome」で
実行すれば有効化する

2023-02-26-22-45-12

画面表示時に実行されるコードのデバッグ方法

lanch.jsonにブラウザデバッグ用の設定を追記する

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

ターミナルから「gatsby develop」などで起動後に
VSCodeのデバッグタグから「Launch Chrome」を選択して実行すると
VSCode上のソースでデバッグ実行ができる

Chromeデベロッパー・ツールでデバッグする

VSCodeではなくChromeデベロッパー・ツールを使ってデバッグする方法をまとめる。

ノード用ChromeDevToolsでgatsby-node.jsをデバッグする

gatsby-node.jsはnode.jsで実行されてるためノード用のChromeDevToolsでもデバッグすることができる。
VSCodeから起動後にブラウザ（googlechrome）を立ち上げて ノード用のChromeDevToolsを開いてデバッグする。

デバッグを起動する

ターミナルで下記のどれかのコマンドを実行するとデバッグを開始する

自分でつけたブレークポイントまで動かす場合

起動後に自分でつけたブレークポイントまで動かす場合は
下記で起動する。

GitBash
$ gatsby develop --inspect

ブレークポイントをつけてない場合は流れ切ってしまうので初回は
後述するコマンドの方がいいかもです。

最初の行にブレークポイントを自動的に配置して止める場合

とりあえず最初で止めたい場合はこちらを使う

GitBash
$ gatsby develop --inspect-brk

または

GitBash
$ node --inspect-brk node_modules/gatsby/dist/bin/gatsby.js build

どちらも基本的には同じ

ノード用のChromeDevToolsを開く

例えば「$ gatsby develop --inspect-brk」を実行すると

GitBash
$ gatsby develop --inspect-brk
Debugger listening on ws://127.0.0.1:9229/6cec9cb7-8a09-4852-856b-af9419b64d61
For help, see: https://nodejs.org/en/docs/inspector

となるので Chromeを立ち上げて「chrome://inspect」を開くと下記のような画面になっている

gatsbydebug1

RemoteTargetのinspectをクリックするとノード用のChromeDevToolsになる

gatsbydebug2

フォルダを追加する

初回ではソースフォルダは表示されていないため、「Add folder to workspace」でフォルダを追加する。
gatsby-node.jsをデバッグする場合はプロジェクト ディレクトリを選択して追加した後
gatsby-node.jsを開いてブレークポイントを打てばデバッグができる

gatsbydebug3

画面表示時に実行されるコードのデバッグ方法

ChromeDevToolsを使う場合はターミナルから「gatsby develop」などで起動後に
chromeブラウザで画面表示後にF12でChromeDevToolsでデバッグできる。

まとめ

ブラウザでの画面表示後のデバッグについてはわざわざVSCodeでするメリットが
あまりないように思うのでChromeDevToolsで十分だと思う。
gatsby-node.jsのデバッグについては今まではVSCodeで実行していたのですが
node.jsからnode.jsのversion管理ができるnvmに入れ替えた後にうまくできなくなったので
現在はノード用ChromeDevToolsを使っている。
※VSCodeを調べて色々やったみたがうまく動かなかったので...

またNext.jsでbuild時実行されるgetstaticpropsもノード用のChromeDevToolsで
デバッグすることができる。
方法は下記記事で紹介しています

参考

参考書籍

Gatsbyの基本的な仕組みや環境設定方法など下記の書籍が参考になりました。
特に特典のセットアップPDFはversionが上がると更新してくれるようなので
Gatsbyのversionが上がった時なども今でも参考にしてます！

Webサイト高速化のための静的サイトジェネレーター活用入門 (CompassBooksシリーズ)

新着記事

タグ別一覧
top