VS Codeでのブラウザデバッグ
Visual Studio Codeには、EdgeおよびChrome用の組み込みデバッガーが付属しています。これを使用するにはいくつかの方法があります。
- Open Linkコマンドを使用してURLをデバッグします。
- JavaScriptデバッグターミナルでリンクをクリックします。
- 起動設定（launch config）を使用して、アプリとともにブラウザを起動します。
外部ブラウザを起動せずに、VS Codeの統合ブラウザでWebアプリをデバッグすることもできます。
また、React、Angular、Vueの導入方法や、その他のデバッグレシピに関する詳細なウォークスルーも用意しています。
Open Link（リンクを開く）コマンド
Webページをデバッグする最も簡単な方法は、コマンドパレット（⇧⌘P (Windows, Linux Ctrl+Shift+P)）にあるDebug: Open Linkコマンドを使用することです。このコマンドを実行すると、開くURLの入力を求められ、デバッガーがアタッチされます。
デフォルトのブラウザがEdgeの場合、VS Codeはそれを使用してページを開きます。それ以外の場合は、代わりにシステム上のChromeのインストールを探そうとします。
起動設定
起動設定（Launch configs）は、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に置き換えてください。
外部ブラウザを開かずにVS Code内でデバッグするには、型としてeditor-browserを使用します。統合ブラウザでのデバッグの詳細をご覧ください。
また、サーバーを実行せずに単一のファイルをデバッグすることもできます。例えば以下の通りです。
{
"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オプションのドキュメントで確認できます。
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ファイルをバンドルします。ソースマップは、元のコードとブラウザで実行されているコードをどのようにマッピングするかをデバッガーが把握するのに役立ちます。
Webアプリケーションの構築に使用される最新のツールのほとんどは、そのまま動作します。そうでない場合は、Node.jsのソースマップに関するセクションに、ブラウザデバッグにも適用できるガイダンスがあります。
ソースマップの読み込み
各JavaScriptファイルは、URLまたは相対パスによってソースマップを参照する場合があります。Webアプリケーションを扱う際は、そのURLがVS Codeで実行されているデバッガーからアクセス可能であることを確認する必要があります。アクセスできない場合、デバッグコンソールにどのソースマップの読み込みに失敗したか、その理由とともにエラーが表示されます。
直接アクセスできない場合、VS Codeはブラウザのネットワークスタックを使用してソースマップをリクエストしようとします。これにより、ブラウザ内の認証状態やネットワーク設定がリクエストに適用されるようになります。例えば、ソースマップがCookie認証によって保護されている場所に配置されている場合、ブラウザセッションが必要なCookieを持っている場合に限り、VS Codeはそれらを読み込むことができます。
フォーカスのエミュレーション
Webアプリケーションをデバッグ中にVS Codeにフォーカスを切り替えると、ブラウザページからフォーカスが外れます。これにより、:focus CSSスタイルが消え、document.hasFocus()がfalseを返し、フォーカスイベントハンドラーが期待通りに動作しなくなります。
ブラウザのデバッグセッション中、実行とデバッグビューのデバッグオプションパネルには、Emulate a focused page（フォーカスされているページをエミュレート）オプションがあります。このオプションを有効にすると、VS Codeがフォアグラウンドにある場合でも、ページはフォーカスされているかのように動作します。この設定はデバッグセッション間で保持されます。