VS Code でのブラウザーのデバッグ
Visual Studio Code には、Edge と Chrome 用のデバッガーが組み込まれています。デバッグを開始する方法はいくつかあります。
- URL をデバッグするには Open Link コマンドを使用します。
- JavaScript デバッグ ターミナルでリンクをクリックします。
- アプリでブラウザーを起動するには、起動構成を使用します。
また、React、Angular、Vue を使い始めるための詳細なウォークスルーや、その他のデバッグ レシピもあります。
Open Link コマンド
Web ページをデバッグする最も簡単な方法は、コマンド パレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) にある Debug: Open Link コマンドを使用することです。このコマンドを実行すると、開く 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": "https://:8000"
}
]
}
F5 キーを押すか、[実行とデバッグ] ビューの [開始] ボタンを押すと、https://: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)」するか、デバッグ モードで開始した既存のブラウザーに「アタッチ (attach)」することができます。
以下は、ブラウザーのデバッグに固有の一般的な launch.json 属性のリファレンスです。オプションの完全なセットは、vscode-js-debug options のドキュメントで確認できます。
webRoot- ソースコードのルート ディレクトリです。ほとんどの場合、既定ではwebRootはワークスペース フォルダーです。このオプションは、ソースマップの解決に使用されます。outFiles- 生成された JavaScript ファイルを見つけるためのglob パターンの配列です。ソースマップのセクションを参照してください。smartStep- ソース ファイルにマップされないソース コードを自動的にステップ オーバーしようとします。スマート ステップのセクションを参照してください。skipFiles- これらのglob パターンでカバーされるファイルを自動的にスキップします。関心のないコードのスキップのセクションを参照してください。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 ファイルを 1 つにまとめます。ソースマップは、デバッガーが元のコードとブラウザーで実行されているコードとの間のマッピングを把握するのに役立ちます。
Web アプリケーションのビルドに使用される最新のツールのほとんどは、そのまま使用できます。そうでない場合は、Node.js のソースマップに関するセクションに、ブラウザーのデバッグにも適用されるガイダンスが含まれています。
ソースマップの読み込み
各 JavaScript ファイルは、URL または相対パスによってソースマップを参照できます。Web アプリケーションを扱う場合、その URL が VS Code で実行されているデバッガーからアクセスできるものであることを確認する必要があります。アクセスできない場合は、デバッグ コンソールに、どのソースマップの読み込みに失敗したか、またその理由を説明するエラーが表示されます。
直接アクセスできない場合、VS Code はブラウザーのネットワーク スタックを使用してソースマップを要求しようとします。これにより、ブラウザーの認証状態やネットワーク設定をリクエストに適用する機会が与えられます。たとえば、ソースマップが Cookie 認証によって保護されている場所にある場合、VS Code はブラウザー セッションが必要な Cookie を持っている場合にのみそれらを読み込むことができます。