Uno.Wasm.Bootstrap
Uno.Wasm.Bootstrap copied to clipboard
Debugging/Breakpoints do not work
For a while now I can't get debugging in WASM projects to work:
A fresh project (dotnet new unoapp
) updated to latest stable or dev builds of all uno packages refuses to load debugging symbols. I've looked at all the output panels to see if anything helpful shows up but I don't see anything.
Not sure if something on my PC changed or if it happened with an Uno update but I have no idea how to go about debugging this problem.
So I spent a few hours messing with this cause someone on stackoverflow was also asking about it. It seems like the Bootstrap documentation is missing one (or two?) things.
At first I had the same problem, and could only get the debugger inside Chrome to work using Alt+Shift+D and running the command, then browsing to file:// node to find my file. (Note: There's a confusing thing here in that your DLL/Assembly has its own node listed beside all the other .NET assemblies, but it has no source in it. You have to go all the way to the bottom to find your assembly hidden under the file:// node.)
I started a clean project and used this project config, which completely disables the IL Linker for the sake of getting it to work without messing with a linker config XML(then you can always go back and setup a Linker config XML to keep mscorlib and System.Core per docs ):
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<OutputType>Exe</OutputType>
<TargetFramework>net7.0</TargetFramework>
<!--<ImplicitUsings>enable</ImplicitUsings>
<Nullable>enable</Nullable>-->
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Uno.Foundation.Runtime.WebAssembly" Version="4.10.13" />
<PackageReference Include="Uno.UI.WebAssembly" Version="4.10.13" />
<PackageReference Include="Uno.Wasm.Bootstrap" Version="7.0.29" />
<PackageReference Include="Uno.Wasm.Bootstrap.DevServer" Version="7.0.29" />
</ItemGroup>
<PropertyGroup Condition="'$(Configuration)'=='Debug'">
<WasmShellILLinkerEnabled>false</WasmShellILLinkerEnabled>
<MonoRuntimeDebuggerEnabled>true</MonoRuntimeDebuggerEnabled>
<DebugType>portable</DebugType>
<DebugSymbols>true</DebugSymbols>
<DefineConstants>$(DefineConstants);TRACE;DEBUG</DefineConstants>
</PropertyGroup>
</Project>
After going through debugger-support.md doc, the breakpoints in VS still didn't load symbols nor get hit.
I noticed the Uno Platform documentation mentions two things: https://platform.uno/docs/articles/debugging-wasm.html
- Install the Uno Platform project templates
- Add an inspectUrl property. This property is hard to find documentation on, googling
launchsettings.json "inspectUrl"
nets 4 results.
Between these two things, I thought maybe they were Uno Platform specific and didn't expect them to work for Bootstrap, but gave them a try anyway.
After doing so the breakpoint inside Visual Studio was getting hit. Success! I would like to make some updates to docs to help others struggling with this.
- I'm not sure of the two things which was the key to getting it to work, or if both is needed. Is there tooling in the "Uno Platform" marketplace extension that assists with the debugging experience in VS? Or do you think it wasn't needed in this case and it was sufficient to just add the inspectUrl? I have another clean machine I can run through revised steps on to verify before updating docs.
- I would like to make/propose appropriate updates to the Uno Bootstrap Documentation (debugger-support.md) to include the missing step or steps. Should this issue become a Documentation issue and add PR here, or should I create a new issue for the doc update?
- Even after getting debugging working, I was still getting an error "Failed to apply initial metadata delta TypeError: Failed to fetch dynamically imported module: https://localhost:61310/_framework/blazor-hotreload.js". Is this because in enabling debugging there's some code that assumes we're in the context of blazor? I think it's worth mentioning in maybe a troubleshooting section at the bottom that this doesn't impact debugging capability so it isn't a red herring, and can be ignored in the context where a dev is trying to get VS breakpoints to work.
- The Bootstrap doc doesn't explicitly state that you can get breakpoints inside VS to work. So there was a point I was about to give up, as I re-read the article I began to question if the only supported method was using the the WASM debugger inside of Chrome. Point being, expanding the initial intro in this article to state exactly what the expected outcome is. I.e. "Following these steps enables two ways to debug your assembly. Both approaches require "Project Configuration for Debugging". The section "Enable Debugging in Visual Studio" shows how to support breakpoints from within Visual Studio. The section "Using the Browser Debugger" enables you to inspect and set breakpoints in your WASM source code from within the browser.
- I would add some notes about finding your assembly in the browser debugger. There's a node with your assembly name along side the other assembly nodes, but none of its source is there. You have to go down to the oddly named file:// node and drill in to find your assembly listed there as well. Screen clippings would probably be great.
- There's a broken link to mono repo. Can this link be removed? I reviewed the content on WayBackMachine and it seems pretty redundant with the information already in the bootstrap doc: https://github.com/mono/mono/tree/master/sdks/wasm#debugging
Let me know thoughts/guidance and I'd be glad to propose a PR for the document.
Debugging in VS is already setup when running with uno's latest builds (from the wizard). For the bootstrapper, using the inspectUrl
should be enough to get running.
As for the blazor-hotreload.js file, this is supposed to be defined automatically by visual studio using automatic injection, but this may have changed over time, even if this is working on our end.