Svelte入門：SvelteKitでのデバッグ -Vol.2-

今日は、SvelteKitでのデバッグについて解説しています。

背景

SvelteKitでのデバッグについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

Visual Studio Codeでのデバッグ方法について

Visual Studio Codeの組み込みデバッグターミナルを使用すると、VSCode内のソースファイルにブレークポイントを設定できます。

1. コマンドパレットを開く：CMD/Ctrl + Shift + P
2. “Debug: JavaScript Debug Terminal”を探して起動
3. デバッグターミナルを使用してプロジェクトを起動。例：npm run dev
4. クライアントまたはサーバーサイドのソースコードにブレークポイントを設定
5. ブレークポイントをトリガー

解説

1. デバッグターミナルとは

• VS Codeに組み込まれた特別なターミナル
• JavaScriptのデバッグに特化
• 通常のターミナルより詳細なデバッグ機能を提供

1. 具体的な手順

• ショートカットキーでコマンドパレットを表示
• デバッグターミナルを起動
• プロジェクトを開発モードで実行
• コード内の任意の場所にブレークポイントを設定
• そのコードが実行されるとブレークポイントで停止

1. 利点

• 視覚的にデバッグが可能
• コードの実行を細かく制御
• 変数の値をリアルタイムで確認可能
• クライアント・サーバー両方のコードをデバッグ可能

この機能を使用することで、より効率的にバグの発見と修正が可能になります。

デバッグペインを使用した起動方法について

代替方法として、プロジェクトに.vscode/launch.jsonを設定することもできます。自動設定する手順：

1. “実行とデバッグ”ペインを開く
2. “実行”選択メニューで”Node.js…”を選択
3. プロジェクトに対応する”実行スクリプト”（例：”Run script: dev”）を選択
4. “デバッグの開始”プレイボタンを押すか、F5を押してブレークポイントデバッグを開始

以下はlaunch.jsonの例です：

{
    "version": "0.2.0",
    "configurations": [
        {
            "command": "npm run dev",
            "name": "Run development server",
            "request": "launch",
            "type": "node-terminal"
        }
    ]
}

詳細については以下を参照： https://code.visualstudio.com/docs/editor/debugging

解説

1. launch.jsonの役割

• デバッグ設定を保存
• プロジェクトメンバー間で設定を共有可能
• 複数のデバッグ設定を管理可能

1. 設定手順の詳細

• VSCodeの実行とデバッグペインから設定
• Node.js環境用の設定を選択
• 開発サーバー起動用のスクリプトを指定
• F5キーでデバッグを開始可能

1. launch.jsonの構成

• version: 設定ファイルのバージョン
• configurations: デバッグ設定の配列
  • command: 実行するコマンド
  • name: 設定の表示名
  • request: 起動タイプ
  • type: デバッグ環境の種類

1. メリット

• デバッグ設定の再利用が容易
• チーム開発での設定共有が簡単
• キーボードショートカットでの素早い実行

この方法を使用することで、より体系的なデバッグ環境を構築することができます。

おわりに

今日は、 SvelteKitでのデバッグについて解説しました。