VSCodeでgatsbyのデバッグをする

2020年09月18日

gatsby VSCode React Chrome

今回の目的

gatsbyで作成したサイトのデバッグをVSCodeで実行できるように、VSCodeを設定していきます。

まずはVSCodeを開く!

gatsbyのサイトを作成しているディレクトリにてVSCOdeを開きます。 2020-09-18_10h01_13.jpg

Debugger for Chromeのインストール

VSCodeの拡張機能アイコンをクリックます。 『Debugger for Chrome』と入力し、対象機能をインストールします。 2020-09-18_10h05_20.jpg ※インストール完了後にVSCodeの再起動が必要かもしれません。

launch.jsonの作成

実行アイコンクリック→『launch.jsonファイルを作成します』リンククリックを行うと、環境の選択が出てきます。 後ほど書き換えるのでどれを選択しても問題ないです。 2020-09-18_10h15_35.jpg 作成されたlaunch.jsonを以下に書き換えます。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Gatsby develop",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
      "args": ["develop"],
      "stopOnEntry": false,
      "runtimeArgs": ["--nolazy"],
      "sourceMaps": false
    },
    {
      "name": "Gatsby build",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
      "args": ["build"],
      "stopOnEntry": false,
      "runtimeArgs": ["--nolazy"],
      "sourceMaps": false
    },
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

2020-09-18_10h47_39.jpg 実行構成が追加されています。

  • Gatsby develop
    gatsby developをデバッグ実行します。デプロイ処理などのデバッグを行います。
  • Gatsby build
    gatsby buildをデバッグ実行します。
  • Launch Chrome
    実行時にChromeを起動しhttp://localhost:8000にアクセスします。 モジュールの表示処理時などのデバッグを行います。

起動

Gatsby developを選択し、再生ボタン(緑三角ボタン)を押します。 develop処理のデバッグが開始されます。 2020-09-18_10h31_42.jpg Launch Chromeを選択し、再生ボタンを押下するとchromeが自動で開き対象のサイトが確認できます。 2020-09-18_10h35_21.jpg

これでgatsbyサイトのデバッグが可能になりました。 あとは適当な箇所にブレークポイントを入れ、好きなようにデバッグしちゃってください。

今回は以上です。

ありがとうございました。

参考サイト

How to debug Gatsby.js in VS Code (build process and client side)


SaitoSystemService

埼玉在住のフリーランスSEです。 技術ブログや作品をここで紹介していきます。 よろしくお願いします。

Written by 齋藤 渓
埼玉在住のフリーランスSEです。技術ブログや作品をここで紹介していきます。よろしくお願いします。
Contact:
© 2020, 齋藤システムサービス by Gatsby