VS Codeでのブラウザーデバッグ
Visual Studio Codeには、EdgeとChrome用の組み込みデバッガーが含まれています。これを利用するにはいくつかの方法があります。
- Open Link コマンドを使用してURLをデバッグします。
- JavaScript デバッグターミナルでリンクをクリックします。
- 起動構成を使用して、ブラウザーでアプリを起動します。
また、React、Angular、Vue を使用するためのより詳細なチュートリアルや、その他のデバッグのレシピも用意しています。
Open Link コマンド
ウェブページをデバッグする最も簡単な方法は、コマンドパレットで見つかる Debug: Open Link コマンド (⇧⌘P (Windows、Linux版 Ctrl+Shift+P)) を使用することです。このコマンドを実行すると、開くURLの入力を求められ、デバッガーがアタッチされます。
既定のブラウザーがEdgeの場合、VS Codeはそれを使用してページを開きます。それ以外の場合は、システムのChromeのインストールを探そうとします。
起動構成
起動構成は、VS Codeでデバッグを設定する従来のM方法であり、複雑なアプリケーションを実行するための最大の柔軟性を提供します。
このセクションでは、より高度なデバッグシナリオのための構成と機能について詳しく説明します。Node.jsの外部コードのステップオーバーの手順は、ブラウザーベースのデバッグにも適用されます。
注: VS Codeを使い始めたばかりの場合は、一般的なデバッグ機能と
launch.json構成ファイルの作成方法について、デバッグのトピックで学ぶことができます。
ブラウザーの起動
ほとんどの場合、ウェブページやファイルをデバッグするために、ブラウザーの新しいインスタンスを開始する必要があります。これを行うには、次のような.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またはChromeのバイナリへのパスをedge.exeに置き換えて、次のコマンドを使用することでこれを行うことができます。
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ファイルを検索するための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アプリケーションを扱う場合、VS Codeで実行されているデバッガーがアクセスできるURLであることを確認する必要があります。アクセスできない場合、デバッグコンソールに、どのソースマップがロードに失敗したか、およびその理由を説明するエラーが表示されます。
直接アクセスできない場合、VS Codeはブラウザーのネットワークスタックを使用してソースマップを要求しようとします。これにより、ブラウザーの認証状態やネットワーク設定がリクエストに適用される機会が提供されます。たとえば、ソースマップがCookie認証によって保護されている場所にある場合、VS Codeはブラウザーセッションに必要なCookieがある場合にのみそれらを読み込むことができます。