VS Code でのブラウザー デバッグ
Visual Studio Code には、Edge と Chrome 用の組み込みデバッガーが含まれています。これを使用するには、いくつかの方法があります。
- [リンクを開く]コマンドを使用して URL をデバッグします。
- [JavaScript デバッグ ターミナル]のリンクをクリックします。
- [起動構成]を使用して、アプリでブラウザーを起動します。
React、Angular、Vue を開始するための詳細なチュートリアルと、その他のデバッグレシピも用意しています。
[リンクを開く]コマンド
Web ページをデバッグする最も簡単な方法は、コマンド パレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) にある [デバッグ: リンクを開く] コマンドを使用することです。このコマンドを実行すると、開く URL の入力を求められ、デバッガーがアタッチされます。
デフォルトのブラウザーが Edge の場合、VS Code はそれを使用してページを開きます。それ以外の場合は、システム上の Chrome のインストールを探します。
起動構成
起動構成は、VS Code でデバッグを設定する従来の方法であり、複雑なアプリケーションを実行するための最大の柔軟性を提供します。
このセクションでは、より高度なデバッグ シナリオのための構成と機能について詳しく説明します。Node.js の外部コードのステップオーバーに関する説明は、ブラウザーベースのデバッグにも適用されます。
注: VS Code を使い始めたばかりの場合は、一般的なデバッグ機能と
launch.json構成ファイルの作成について、デバッグトピックで学ぶことができます。
ブラウザーの起動
ほとんどの場合、Web ページまたはファイルをデバッグするには、ブラウザーの新しいインスタンスを開始する必要があります。これを行うには、次のような .vscode/launch.json という名前のファイルを作成します。
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch my cool app",
"url": "http://localhost:8000"
}
]
}
F5 キーを押すか、[実行とデバッグ] ビューの [開始] ボタンをクリックすると、http://localhost:8000 がデバッグ モードで開きます。Edge の代わりに Chrome を使用する場合は、msedge を chrome に置き換えます。
サーバーを実行せずに単一のファイルをデバッグすることもできます。例:
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch hello.html",
"file": "${workspaceFolder}/hello.html"
}
]
}
ブラウザーへのアタッチ
実行中のブラウザーにアタッチするには、特別なデバッグ モードで起動する必要があります。これを行うには、次のコマンドを使用します。edge.exe を Edge または Chrome バイナリへのパスに置き換えます。
edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
--remote-debugging-port を設定すると、ブラウザーはそのポートでデバッグ接続をリッスンするように指示されます。別の --user-data-dir を設定すると、ブラウザーの新しいインスタンスが強制的に開かれます。このフラグが指定されていない場合、コマンドは実行中のブラウザーの新しいウィンドウを開き、デバッグ モードに入りません。
次に、vscode/launch.json ファイルに新しいセクションを次のように追加します。
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "attach",
"name": "Attach to browser",
"port": 9222
}
]
}
これで、F5 キーを押すか、[実行とデバッグ] ビューの [開始] ボタンをクリックして、実行中のブラウザーにアタッチできます。address プロパティを追加して、別のマシンで実行されているブラウザーをデバッグすることもできます。
起動構成属性
デバッグ構成は、ワークスペースの .vscode フォルダーにある launch.json ファイルに保存されます。デバッグ構成ファイルの作成と使用の概要は、一般的なデバッグ記事にあります。アプリケーションでブラウザーを「起動」するか、[デバッグ モードで起動]した既存のブラウザーに「アタッチ」できます。
以下は、ブラウザー デバッグに固有の一般的な launch.json 属性のリファレンスです。オプションの完全なセットは、vscode-js-debug オプションドキュメントで確認できます。
webRoot- ソースコードのルート ディレクトリ。ほとんどの場合、デフォルトでは、webRootはワークスペース フォルダーです。このオプションは、ソースマップの解決に使用されます。outFiles- 生成された JavaScript ファイルを検索するためのグロブ パターンの配列。ソース マップのセクションを参照してください。smartStep- ソース ファイルにマップされないソースコードを自動的にステップオーバーしようとします。スマート ステップのセクションを参照してください。skipFiles- これらのグロブ パターンでカバーされるファイルを自動的にスキップします。興味のないコードのスキップのセクションを参照してください。trace- 診断出力を有効にします。
これらの属性は、リクエスト タイプが launch の起動構成でのみ使用できます
url- ブラウザーの起動時に自動的に開く URL。runtimeExecutable- 使用するブラウザー実行可能ファイルへの絶対パス、または使用するブラウザーのバージョン。有効なバージョンには、stable(デフォルト)、canary、beta、およびdevが含まれます。runtimeArgs- ブラウザーの起動時に渡されるオプションの引数。
これらの属性は、リクエスト タイプが attach の起動構成でのみ使用できます
url- 指定された場合、VS Code はこの URL のタブにアタッチします。指定されていない場合は、すべてのブラウザー タブにアタッチします。port- ブラウザーのリモート デバッグに使用するポート。ブラウザーの起動時に使用した--remote-debugging-portと一致させます。ブラウザーへのアタッチのセクションを参照してください。address- デバッグ対象のブラウザーがリッスンしている IP アドレスまたはホスト名。ブラウザーへのアタッチのセクションを参照してください。
WebAssembly デバッグ
ブラウザーでの WebAssembly デバッグは Node.js と同一です。WebAssembly デバッグの詳細はこちらをご覧ください。
ソース マップ
VS Code の JavaScript デバッガーは、変換されたコードのデバッグを可能にするソース マップをサポートしています。たとえば、TypeScript コードは JavaScript にコンパイルされ、多くの Web アプリケーションはすべての JavaScript ファイルをまとめてバンドルします。ソース マップは、デバッガーが元のコードとブラウザーで実行されているコード間のマッピング方法を理解するのに役立ちます。
Web アプリケーションの構築に使用される最新のツールのほとんどは、すぐに使用できます。そうでない場合、Node.js のソースマップに関するセクションには、ブラウザー デバッグにも適用されるガイダンスが含まれています。
ソース マップの読み込み
各 JavaScript ファイルは、URL または相対パスによってソース マップを参照する場合があります。Web アプリケーションを扱う場合、URL が VS Code で実行されているデバッガーがアクセスできるものであることを確認する必要があります。アクセスできない場合、読み込みに失敗したソース マップとその理由を説明するエラーが [デバッグ コンソール] に表示されます。
直接アクセスできない場合、VS Code はブラウザーのネットワーク スタックを使用してソース マップを要求しようとします。これにより、ブラウザーの認証状態またはネットワーク設定をリクエストに適用する機会が提供されます。たとえば、ソース マップが Cookie 認証によって保護された場所にある場合、ブラウザー セッションに必要な Cookie がある場合にのみ、VS Code はそれらを読み込むことができます。