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

Daniel RothDaniel Roth

Chrome で Blazor Webassembly アプリをデバッグするための早期サポートが存在します。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() します。F10Single-step (F10) through the code or resume (F8) code execution.
  • [ローカル ] 表示で、、 int string、およびbool型のすべてのローカル変数の値を確認します。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:

  • intstring、またはboolではないローカルの値を確認します。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 webassembly を実行します。Run a Blazor WebAssembly app in Debug configuration. Dotnet runコマンドに--configuration Debugオプションを渡します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+DWindows/Linux の場合Shift+Alt+D on Windows/Linux
    • Shift+Cmd+DmacOS の場合Shift+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+DWindows/Linux の場合Shift+Alt+D on Windows/Linux
    • Shift+Cmd+DmacOS の場合Shift+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/ソースファイルを見つけます。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. ブレークポイントにヒットした後、コードをF10実行するか (F8)、コードの実行を正常に再開します。After a breakpoint is hit, single-step (F10) through the code or resume (F8) code execution normally.

Blazor は、 Chrome DevTools プロトコルを実装し、でプロトコルを補強するデバッグプロキシを提供します。NET 固有の情報。Blazor 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.