The .NET team has been hard at work with WebAssembly support, and while we’ve been having WebAssembly debugging from the browser, it’s now possible to debug an Uno WebAssembly app using Visual Studio 2019 16.6 Preview 1!
Debug an Uno Platform WebAssembly Web app with Visual Studio
Here’s what you need to do to debug an Uno application in Visual Studio:
- Install the latest Uno Platform Visual Studio templates
- Create an Uno Cross Platform App using the Visual Studio templates
- In the Nuget Package manager
- Update the Uno.UI the preview release 2.2.0-dev.358
- Update Uno.Wasm.Bootstrap and Uno.UI.RemoteControl packages to the preview release 1.2.0-dev.16
- Add a reference to the Uno.Wasm.Bootstrap.DevServer package
In YourProject.Wasm.csproj, manually change the Uno.Wasm.Bootstrap.Cli package version to the same version installed for Uno.Wasm.Bootstrap.
(Note, this instruction was removed as of preview version 1.2 of the bootstrapper, use the line above instead)- In YourProject.Wasm.csproj, manually remove the DotNetCliToolReference package reference
- In MainPage.xaml, replace the Grid content with the following:
<StackPanel>
<TextBlock x:Name="txt"
Text="Hello, world!"
Margin="20"
FontSize="30" />
<Button Content="click"
Click="OnClick" />
</StackPanel>
- In your MainPage.xaml.cs, add the following method:
public void OnClick(object sender, object args)
{
var dt = DateTime.Now.ToString();
txt.Text = dt;
}
- And the last important step, in the launchSettings.json file, add the following like below each “launchBrowser” line:
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
This will instruct Visual Studio to connect to the browser through the .NET for WebAssembly debugger.
Now let’s debug the app:
- Place a breakpoint in the OnClick method
- Press F5
- Wait a moment for the breakpoint to become fully red
You’re now debugging in Visual Studio!
Debugger Features
In the supported debuggers features, viewing the stack trace is supported, as well as watch and locals:
Tooltips when hovering over variables :
And the most interesting of all, even though it was supported in the browser, Source Link support, when viewing frames of the stack that are in supported assemblies:
Syntax coloring is not yet available for these files, but it’ll most probably be coming in a future Visual Studio update.
Preview Bits and Next Steps
The Visual Studio integration is in its early days, and it’s bound to have some issues on the edges. For instance, it’s not possible to place a breakpoint in the entry point of the app (the Main method) and debugging PWA enabled apps is not working properly.
If you find issues, please let us know by opening one here.
If you are new to the Uno Platform, you may want to run through the Getting Started tutorial. This will ensure you have the correct environment set up and that you have the latest release of Uno. If you have already worked with Uno, you may want to update your Uno package via your Visual Studio NuGet package manager.
