ブレークポイントデバッグ

@debug タグに加えて、さまざまなツールや開発環境内でブレークポイントを使用して、Svelte および SvelteKit プロジェクトをデバッグすることもできます。これには、フロントエンドとバックエンドの両方のコードが含まれます。

以下のガイドは、JavaScript ランタイム環境が Node.js であることを前提としています。

Visual Studio Code

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

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

デバッグペインから起動

または、プロジェクト内に .vscode/launch.json を設定することもできます。自動的に設定するには

1. 「実行とデバッグ」ペインに移動します。
2. 「実行」選択メニューで、「Node.js...」を選択します。
3. 「Run script: dev」など、プロジェクトに対応する「run script」を選択します。
4. 「デバッグを開始」再生ボタンを押すか、F5 キーを押してブレークポイントデバッグを開始します。

以下は launch.json の例です。

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

参考資料：https://vscode.dokyumento.jp/docs/editor/debugging。

その他のエディター

別のエディターを使用している場合は、これらのコミュニティガイドが役立つ可能性があります。

• WebStorm Svelte: アプリケーションのデバッグ
• Neovim での JavaScript フレームワークのデバッグ

Google Chrome および Microsoft Edge 開発者ツール

ブラウザベースのデバッガーを使用して Node.js アプリケーションをデバッグできます。

これはクライアント側の SvelteKit ソースマップのデバッグでのみ機能することに注意してください。

1. Node.js で Vite サーバーを起動するときに、--inspect フラグを実行します。例：NODE_OPTIONS="--inspect" npm run dev
2. 新しいタブでサイトを開きます。通常は localhost:5173 です。
3. ブラウザの開発者ツールを開き、左上付近にある「Node.js 専用の開発者ツールを開く」アイコンをクリックします。Node.js のロゴが表示されるはずです。
4. ブレークポイントを設定してアプリケーションをデバッグします。

または、Google Chrome で chrome://inspect、または Microsoft Edge で edge://inspect に移動して、デバッガーの開発者ツールを開くこともできます。

参考文献

• Node.js のデバッグ