VSCodeにてBlazorをデバッグする方法

Visual Studio Code にて、Blazorをデバッグ実行する方法

※ 最終的にはdebugできるようになったのですが、
　 色々と試したため、最終的に何が良かったのか不明です。
　 自分と同じ状態になっている方のためにメモとして記載しておきます。

前提条件など

• 環境：Windows10
• 使用プロジェクト
  https://qiita.com/njc50032/items/c9b4c366e72d14684eb0
  の手順で作成

必要なものをinstall

Microsoft.AspNetCore.Razor.VSCode.BlazorWasmDebuggingExtension
https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.blazorwasm-companion

JavaScript Debugger (Nightly)
https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug-nightly

を、拡張機能からインストールする

必要な設定を行う

launchSettings.json に、
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
を追加する。
※2021/08/11 現在、dotnetコマンドで新規作成した場合は、
　すでに上記が設定されているようです。

作成後のファイルイメージ

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:5216",
      "sslPort": 44335
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "TestBlazorPj": {
      "commandName": "Project",
      "dotnetRunMessages": "true",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

一度debug実行を行う

F5押下か、「実行とデバッグ」から実行する

すると、ブラウザが自動で起動し、サイトが表示されるので、
ここで、shift + alt + D を押下

[ブラウザがリモートデバッグ可能な場合]
　　→　別タブにデバッグ用画面が表示される

[ブラウザがリモートデバッグ不可の場合]
　　→ リモートデバッグを有効状態にしてブラウザを起動するコマンドラインが表示されるので、
　　　Win + Rでファイル名を指定して実行を開き、そこにコピペして、ブラウザを起動
　　　　→ 再度、shift + alt + D 押下で、デバッグ用タブが表示されう。

ただし自コンピューターでは、 debugできませんでした。。。

上記までを試せば、debug可能と、各サイトに記載があるのですが、
例：https://docs.microsoft.com/ja-jp/aspnet/core/blazor/debug?view=aspnetcore-5.0&tabs=visual-studio
自分のところではどうにもVSCode上のブレークポイントで止めることもできませんし、
debug用のタブに、ブレークポイントを張るfileの表示もされませんでした。

仕切直して以下をするとdebug出来ました。

プロジェクトの作成を、
dotnet new brazorwasm
で行って実行していたのですが、
試しに、
dotnet new brazorserver
で作成し実行したところ、
ブラウザでshift + alt + Dをしない状態でも、
VSCode上のブレークポイントで止まるようになってくれました。。。

何が原因なのかよくわかりません。
何かわかり次第、追記させていただこうと思います。