Client-side Blazorでデバッグする方法
Server-side BlazorなどServer側で動作する部分についてはVisual Studio上でデバッグできます。
では、Client-side Blazorのデバッグはどうするかというと、もちろんブラウザのデバッグツールを使います。
ChromeならばCtrl+Shit+Iで出てくる開発ツールです。
まずはClient-side Blazorプロジェクトを作成します。
実行します。
Debugを選択し、ブラウザにはChromeを選択しておきます。
Chromeのバージョンは70以上であることも確認しておいてください。
ブラウザが起動し、以下のページが表示されるはずです。
ここでCtrl+Shift+Iで開発ツールを表示させてみますが、ソースコードは表示されず、デバッグはできません。
BlazorのデバッグではまずShift+Alt+Dを押します。
すると以下のページが表示されるかと思います。
このページにデバッグの手順が書いてあります。
Resolution（解決方法）の項目に以下のように書いてあります。
すべてのChromeインスタンスを閉じて、
Win+Rを押して以下を入力してください。"%programfiles(x86)%\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 http://localhost:51248/
上の例は私の環境における表示ですので、ポート番号などはそれぞれ異なるかと思います。
このコマンドは後で使うのでどこかにコピーしておくと良いです。
Win+Rは「ファイル名を指定して実行」のやつです。
それでは言われたとおりにやっていきます。
- アプリケーションが実行中であれば停止します。
- Chromeをすべて閉じます。
Win+Rを押して、先程の文字列を貼り付けて「OK」を押します。
するとChromeが起動し、先程実行したアプリケーションのページが表示されます。Visual Studioでアプリケーションを実行していないのに。
これは先程実行したときにダウンロードされたWebAssemblyやアプリケーションの実行モジュールなどがキャッシュされていて、それが利用されるためです。
PWAを実感できます。
次にVisual Studio側でアプリケーションを実行します。 こっちはこっちでもう一つChromeのウィンドウが開きますが、最小化でもして放っておいてください。
Win+Rから開いたChromeに戻って、改めてShift+Alt+Dを押します。
すると、以下のページが別タブで表示されます。
他のタブが開いているから閉じてね。
ということなので、このChromeウィンドウ内のその他のタブをすべて閉じます。Visual Studioから起動されたChromeは放っておきます。そっちを全部閉じてしまうとアプリケーションの実行が終了してしまうので。
ではこの「Multiple matching tabs are open」のページを再読込します。
ブレークポイントを置くことができるので、試してみましょう。
Counter.razor内でブレークポイントを設定し、Click meボタンを押します。
設定したブレークポイントで止まります。
とはいえ、一つ課題が。 変数の値ってどうやって見るんですかね。
