Blazor Server: how to "watch file changes" AND "attach to Visual Studio"

user_831138 0
Viewed 953

It looks like I am being forced to chose between the two (either "watch file changes mode" or "attach to Visual Studio mode").

These are the two different "profiles" in launchSettings.json, and I have to chose one or the other:

"profiles": {
    ...
    "Watch file changes": { 
        "executablePath": "dotnet.exe",
        "workingDirectory": "$(ProjectDir)",
        "commandLineArgs": "watch run debug",
        "launchBrowser": true,
        "applicationUrl": "http://localhost:5000/",
        "environmentVariables": {
            "ASPNETCORE_ENVIRONMENT": "Development"
        }
    },
    "Attach to VS": {
        "commandName": "Project",
        "launchBrowser": true,
        "applicationUrl": "http://localhost:5000",
        "environmentVariables": {
            "ASPNETCORE_ENVIRONMENT": "Development"
        }           
    }
}

It is less than ideal that I have to pick one, I would like to be able to apply a breakpoint ("Attach to VS" mode) and also watch file changes.

BTW, for those interested: the profile "Watch file changes" must be coordinated with the following addition to your .csproj file:

<ItemGroup>
    <!-- Files that the "dotnet watch" will monitor for hot reloading: -->
    <Watch Include="**\*.razor" />
    <Watch Include="**\*.scss" />
    <Watch Include="**\*.cshtml"/>
    <Watch Include="**\*.cs" />
</ItemGroup>
blazor-server-side blazor asp.net-core asp.net
1 Answers

I am able to debug (breakpoint, step by step, inspect variable) my Blazor Webassembly (Blazor WASM) in Visual Studio 2019. And whenever I save certain files (*.razor, *.razor.cs, *.css), dotnet will automatically rebuild the project then Chrome will automatically refresh the page. Here's what I did:

  1. In Visual Studio, start debugging (F5) using the "IIS Express" profile. This will open a new Chrome window.
  2. Open a command prompt in your project's directory. run dotnet watch run. This will open a new Chrome tab.
  3. Open the website found in step 2 using the Chrome window in step 1. In other words, copy the URL found in step 2, then paste it to the Chrome address bar found in step 1.
user_3340450
Related