よっしー
こんにちは。よっしーです(^^)
今日は、SvelteKitでのデバッグについて解説しています。
スポンサーリンク
背景
SvelteKitでのデバッグについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。
GoogleChromeとMicrosoft Edge開発者ツールについて
ブラウザベースのデバッガーを使用してNode.jsアプリケーションをデバッグすることが可能です。
注意：これはクライアントサイドのSvelteKitソースマップのデバッグでのみ機能します。
- Node.jsでViteサーバーを起動する際に
--inspectフラグを実行します。例：NODE_OPTIONS="--inspect" npm run dev - 新しいタブでサイトを開きます。通常は
localhost:5173です。 - ブラウザの開発者ツールを開き、左上付近にある「Node.js専用のDevToolsを開く」アイコン（Node.jsのロゴが表示されているもの）をクリックします。
- ブレークポイントを設定してアプリケーションをデバッグします。
また、Google Chromeではchrome://inspect、Microsoft Edgeではedge://inspectにアクセスしてデバッガーのDevToolsを開くこともできます。
解説
- ブラウザベースデバッグの特徴
- ブラウザの開発者ツールを使用
- Node.jsアプリケーションのデバッグが可能
- クライアントサイドのソースマップのみ対応
- セットアップ手順
--inspectフラグを使用してサーバーを起動- ローカルホストでサイトにアクセス
- 専用のNode.jsデバッグツールを開く
- ブレークポイントを設定
- 代替アクセス方法
- Chrome:
chrome://inspect - Edge:
edge://inspect - これらのURLから直接デバッガーにアクセス可能
- 注意点
- クライアントサイドのデバッグのみに制限
- Node.js環境が必要
- ブラウザの開発者ツールの基本的な理解が必要
この方法は、特にフロントエンド開発者にとって馴染みのある環境でデバッグができる利点があります。
おわりに
今日は、 SvelteKitでのデバッグについて解説しました。
よっしー
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント