SvelteKitのデバッグツールまとめ

はじめに

皆さん、こんにちは。
今回はSvelteKitで使えるデバッグツールを紹介します。

console.logが最強です

{@debug 変数名} で値の表示と中断

https://svelte.jp/docs/svelte/@debug
​{@debug} タグは、Svelteのテンプレート内で特定の変数の値を監視し、その値が変更されるたびにデバッガを起動する機能を提供します。​これにより、変数の状態をリアルタイムで確認し、コードの実行を一時停止してデバッグを行うことが可能です。

このコードでは、user オブジェクトの値が変更されるたびにデバッガが起動し、変数の現在の状態を確認できます。

<script>
  let user = {
    firstname: 'John',
  };
</script>

{@debug user}

<h1>Hello {user.firstname}!</h1>

VSCodeでブレークポイント実行

https://svelte.dev/docs/kit/debugging
Visual Studio Code（VSCode）でSvelteKitアプリケーションをデバッグする際、ブレークポイントを設定してコードの実行を制御することが可能です。以下に、その手順を詳しく説明します。

1. コマンドパレットを開く
   • ショートカットキー：Cmd + Shift + P（Mac）または Ctrl + Shift + P（Windows/Linux）
   • 手動操作：メニューバーから「表示」→「コマンドパレット」を選択
2. デバッグ用ターミナルの起動
   • コマンドパレットが開いたら、以下の手順でデバッグターミナルを起動します。
     1. コマンドパレットにデバッグ: JavaScript デバッグターミナルと入力し、該当する項目を選択します。
     2. 新しいデバッグターミナルが開きます。
3. プロジェクトの起動
   • ターミナルの階層をプロジェクトフォルダに移動します。（すでにその階層にいるならOK）
   • デバッグターミナル内で、プロジェクトの開発サーバーを起動します。
   • npm run devなど、プロジェクトに応じたコマンドを入力して実行します。
4. ブレークポイントの設定
   • コード内でデバッグを行いたい箇所にブレークポイントを設定します。
   • エディタの左側の行番号の横をクリックすると、赤い点が表示され、ブレークポイントが設定されます。

デバッグターミナルでサーバーが起動し、ブレークポイントを設定したコードが実行されると、コードの実行がそのポイントで一時停止します。この状態で、変数の値を確認したり、ステップ実行を行ったりして、コードの挙動を詳細に調査できます。

chrome拡張機能のSvelte DevToolsを導入する

https://chromewebstore.google.com/detail/svelte-devtools/kfidecgcdjjfpeckbblhmfkhmlgecoff

​Svelte DevToolsは、Svelteアプリケーションのデバッグを支援するためのChrome拡張機能です。

導入すると、デベロッパーツール内に「Svelte」という新しいタブが追加されています。このタブを選択すると、現在のページでレンダリングされているSvelteコンポーネントのツリーが表示されます。

ツリー内の任意のコンポーネントを選択すると、右側のパネルでそのコンポーネントの現在の状態（Props、Stateなど）を確認できます。

おわりに

SvelteKitはSSRが有効になっているので、console.logの結果がサーバー側に出たりブラウザ側に出たりで混乱することがあります。理解していればconsole.logも助けになりますが、公式のデバッグツールも検討すると良いかもしれません。