Debugging WebAssembly (not Blazor app)

Avatar
P Langer
Created

Hi, we needed to transfer some custom expression parsers, written in c#, to the web browser. We created a WebAssembly project, compiling to .wasm file, which we use in HTML/Javascript. It works, but when an exception is thrown, it's hard to diagnose. We would like to debug it using Rider. I've read this: How JetBrains Rider Implemented .NET WebAssembly Debugging | The .NET Tools Blog, but I'm not really sure what steps I have to provide to debug WASM running in the browser… 

Votes

0

Share

5 comments
Avatar
Tao Sun
Created

In the latest Rider 2024.1.4, Rider will detect the project type if it has Chrome DevTools exposed and use WASM debugger automatically. But it only applies to projects with Microsoft.NET.Sdk.BlazorWebAssembly SDK defined.

In launchSettings.json profile, you should have the “inspectUri” property to expose Chrome DevTools port for inspection as below.

"https": {
  "commandName": "Project",
  "dotnetRunMessages": true,
  "launchBrowser": true,
  "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
  "applicationUrl": "https://localhost:7022;http://localhost:5277",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }
}

Also, ensure you have the WASM DevServer referenced in your project.

<ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.6"/>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.6" PrivateAssets="all"/>
</ItemGroup>

If you still cannot start debugging with WASM, share a sample repo and we could help to check further.

0
Avatar
P Langer
Created

Thank you for your response. 

I started my server side, which listens on port 6969, so I modified launchSettings as:
"applicationUrl": "http://localhost:9696".

When I debug run WebAssembly's project, it opens the browser with message of “Your WASM app is getting ready to be used by Rider debugger, please stand by…”. Then it redirects to localhost:9696 and displays my page, in which “blazor.webassembly.js” is loaded. Then, a second browser window with http://localhost:9696 is open.
Now I have two browser windows, but Rider's debug console says “Failed to connect: Failed to establish connection to debugger agent”.

What the problem could be?
 

0
Avatar
Tao Sun
Created

I need to further clarify about your project. Are you working on a project with Microsoft.NET.Sdk.BlazorWebAssembly SDK declared in .csproj or just using Microsoft.NET.Sdk + wasm-tools (browser-wasm runtime identifier)?

0
Avatar
P Langer
Created

Tao, thank you for your assistance. We have three projects.
1. App server running Kestrel
2. WebAssembly (Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly") with some common business logic
3. Web client (Vue, TypeScript), files provided by App server

In web client's index.html we have reference to WA like:  <script src="blazor.webassembly.js" type="text/javascript" …>.

Sometimes we need to debug WA code, that's why I set WA run parameters to start Web client (with AppServer already running standalone).

0
Avatar
Tao Sun
Created

It seems you have published the WASM application when integrating it in your existing frontend project—it's already been built as a static page and hosted with the server. Currently, you cannot debug a published WASM application. It's not supported yet. 


See my clarification in this thread: https://stackoverflow.com/questions/78852549/blazor-wasm-and-remote-debugging

0

Please sign in to leave a comment.