デバッグ ASP.NET Core BlazorDebug ASP.NET Core Blazor

Daniel RothDaniel Roth

重要

プレビュー段階の Blazor WebAssemblyBlazor WebAssembly in preview

Blazor サーバーは ASP.NET Core 3.0 でサポートされています。Blazor Server is supported in ASP.NET Core 3.0. Blazor WebAssembly は、ASP.NET Core 3.1 のプレビュー段階です。Blazor WebAssembly is in preview for ASP.NET Core 3.1.

Chrome では、WebAssembly 実行されるアプリ Blazor デバッグのための早期サポートが存在します。Early support exists for debugging Blazor WebAssembly apps running on WebAssembly in Chrome.

デバッガーの機能は制限されています。Debugger capabilities are limited. 次のようなシナリオがあります。Available scenarios include:

  • ブレークポイントを設定および削除します。Set and remove breakpoints.
  • コードを使用するか、コードの実行を再開 (F8) する (F10)。Single-step (F10) through the code or resume (F8) code execution.
  • [ローカル] 画面で、型 intstringbool のすべてのローカル変数の値を確認します。In the Locals display, observe the values of any local variables of type int, string, and bool.
  • 呼び出し履歴を参照してください。これには、JavaScript から .NET への呼び出しチェーンや、.NET から JavaScript までの呼び出し履歴が含まれます。See the call stack, including call chains that go from JavaScript into .NET and from .NET to JavaScript.

次のことはできませんYou can't:

  • intstringboolではないローカルの値を確認します。Observe the values of any locals that aren't an int, string, or bool.
  • クラスのプロパティまたはフィールドの値を確認します。Observe the values of any class properties or fields.
  • 変数の上にマウスポインターを合わせると、値が表示されます。Hover over variables to see their values.
  • コンソールで式を評価します。Evaluate expressions in the console.
  • 非同期呼び出し間でステップ実行します。Step across async calls.
  • その他の一般的なデバッグシナリオを実行します。Perform most other ordinary debugging scenarios.

さらにデバッグを行うシナリオの開発は、エンジニアリングチームにとって重視されています。Development of further debugging scenarios is an on-going focus of the engineering team.

必要条件Prerequisites

デバッグには、次のいずれかのブラウザーが必要です。Debugging requires either of the following browsers:

プロシージャProcedure

  1. Debug 構成で Blazor Webasアプリを実行します。Run a Blazor WebAssembly app in Debug configuration. --configuration Debug オプションをdotnet runコマンドに渡します。 dotnet run --configuration DebugPass the --configuration Debug option to the dotnet run command: dotnet run --configuration Debug.
  2. ブラウザーでアプリにアクセスします。Access the app in the browser.
  3. 開発者ツールパネルではなく、アプリにキーボードフォーカスを置きます。Place the keyboard focus on the app, not the developer tools panel. [開発者ツール] パネルは、デバッグを開始したときに閉じることができます。The developer tools panel can be closed when debugging is initiated.
  4. 次の Blazor固有のキーボードショートカットを選択します。Select the following Blazor-specific keyboard shortcut:
    • Shift+Alt+D (Windows/Linux)Shift+Alt+D on Windows/Linux
    • macOS の Shift+Cmd+DShift+Cmd+D on macOS
  5. 画面に表示されている手順に従って、リモートデバッグが有効になっているブラウザーを再起動します。Follow the steps listed on the screen to restart the browser with remote debugging enabled.
  6. 次の Blazor固有のキーボードショートカットをもう一度選択して、デバッグセッションを開始します。Select the following Blazor-specific keyboard shortcut once again to start the debug session:
    • Shift+Alt+D (Windows/Linux)Shift+Alt+D on Windows/Linux
    • macOS の Shift+Cmd+DShift+Cmd+D on macOS

リモートデバッグを有効にするEnable remote debugging

リモートデバッグが無効になっている場合は、[デバッグ可能なブラウザー] タブのエラーページが Chrome によって生成されます。If remote debugging is disabled, an Unable to find debuggable browser tab error page is generated by Chrome. このエラーページには、デバッグポートを開いた状態で Chrome を実行し、Blazor デバッグプロキシがアプリに接続できるようにするための手順が含まれています。The error page contains instructions for running Chrome with the debugging port open so that the Blazor debugging proxy can connect to the app. Chrome インスタンスをすべて閉じ、指示に従って chrome を再起動します。Close all Chrome instances and restart Chrome as instructed.

アプリをデバッグするDebug the app

リモートデバッグが有効になっている状態で Chrome を実行すると、デバッグ キーボードショートカットによって新しい デバッガー タブが開きます。しばらくすると、ソース タブにアプリ内の .net アセンブリの一覧が表示されます。Once Chrome is running with remote debugging enabled, the debugging keyboard shortcut opens a new debugger tab. After a moment, the Sources tab shows a list of the .NET assemblies in the app. 各アセンブリを展開し、デバッグに使用できる .cs/ . razorソースファイルを見つけます。Expand each assembly and find the .cs/.razor source files available for debugging. ブレークポイントを設定し、アプリのタブに戻ります。ブレークポイントは、コードの実行時にヒットします。Set breakpoints, switch back to the app's tab, and the breakpoints are hit when the code executes. ブレークポイントにヒットした後、コードを実行するか (F8) コードを正常に実行するかを、1ステップ (F10) にします。After a breakpoint is hit, single-step (F10) through the code or resume (F8) code execution normally.

Blazor には、 Chrome DevTools プロトコルを実装し、でプロトコルを補強するデバッグプロキシが用意されています。NET 固有の情報。 provides a debugging proxy that implements the Chrome DevTools Protocol and augments the protocol with .NET-specific information. デバッグ用のキーボードショートカットが押されると、Blazor は、プロキシで Chrome DevTools をポイントします。When debugging keyboard shortcut is pressed, Blazor points the Chrome DevTools at the proxy. プロキシは、デバッグしようとしているブラウザーウィンドウに接続します (したがって、リモートデバッグを有効にする必要があります)。The proxy connects to the browser window you're seeking to debug (hence the need to enable remote debugging).

ブラウザーソースマップBrowser source maps

ブラウザーソースマップを使用すると、ブラウザーはコンパイルされたファイルを元のソースファイルにマップでき、クライアント側のデバッグによく使用されます。Browser source maps allow the browser to map compiled files back to their original source files and are commonly used for client-side debugging. ただし、現在、Blazor はC# JavaScript/wasm に直接マップされていません。However, Blazor doesn't currently map C# directly to JavaScript/WASM. 代わりに、Blazor はブラウザー内で IL を解釈するため、ソースマップは関係ありません。Instead, Blazor does IL interpretation within the browser, so source maps aren't relevant.

トラブルシューティングのヒントTroubleshooting tip

エラーが発生した場合は、次のヒントを参考にしてください。If you're running into errors, the following tip may help:

[デバッガー] タブで、ブラウザーで開発者ツールを開きます。In the Debugger tab, open the developer tools in your browser. コンソールで localStorage.clear() を実行して、ブレークポイントを削除します。In the console, execute localStorage.clear() to remove any breakpoints.