From 4dd67f4e1c56ee7266adf55222f98f8daccc9651 Mon Sep 17 00:00:00 2001 From: Jerome Laban Date: Thu, 16 Sep 2021 22:28:14 -0400 Subject: [PATCH] docs: Update WebAssembly debugging documentation --- doc/articles/debugging-wasm.md | 41 +++++++++++++++++++++++++--------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/doc/articles/debugging-wasm.md b/doc/articles/debugging-wasm.md index cc974fb2e115..9837c114f436 100644 --- a/doc/articles/debugging-wasm.md +++ b/doc/articles/debugging-wasm.md @@ -1,19 +1,38 @@ # Using the WebAssembly C# Debugger -Debugging WebAssembly via Google Chrome is experimentally supported by the Uno Platform. We HIGHLY recommend that you use [Google Chrome Canary](https://www.google.com/chrome/canary/). Step-through debugging (in, out, over), breakpoints, inspection of run-time locals and viewing .NET source code from the developer tools works. Additional capabilities and browser support will become available as Microsoft adds [support for them to mono](https://github.com/mono/mono/tree/master/sdks/wasm). +There are two ways to debug a WebAssembly application: +- Using Visual Studio 2019 or 2022 integrated debugger (preferred) +- Using the browser's debugger -- Make your WASM project the startup project (right-click **set as startup** in Solution Explorer) -- Make sure you have the following lines defined in your project file which enable the Mono runtime debugger. Please ensure that `DEBUG` constant is defined and debug symbols are emitted and are of the type `portable`: +## Using Visual Studio +Here’s what you need to do to debug an Uno application in Visual Studio (2019 16.10+ or 2022 17.0 Preview 3.1+): + +- Install the latest [Uno Platform Visual Studio templates](https://marketplace.visualstudio.com/items?itemName=nventivecorp.uno-platform-addin) +- Have Chrome or Edge (Chromium based) +- In the Nuget Package manager, update `Uno.Wasm.Bootstrap` and `Uno.Wasm.Bootstrap.DevServer` 3.0.0 or later +- Ensure that `true` is set in your csproj +- Ensure that in the `Properties/launchSettings.json` file, the following like below each `launchBrowser` line: + ```json + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + ``` + +Then you can start debugging with the VS debugger toolbar: + - Select **IIS Express** or your application name as the debugging target + - Select **Chrome** as the Web Browser + - Press F5 or _Debug_ > _Start Debugging_ -```xml - - true - $(DefineConstants);TRACE;DEBUG - portable - true - -``` +You should now be able to set breakpoints or do step by step debugging of your code. +### Tips for debugging in visual studio +- Some debugger features may not have yet been implemented by the .NET and Visual Studio team. You can take a look the [dotnet/runtime](https://github.com/dotnet/runtime) repository for more details. +- If the breaking do not hit, make sure that the `inspecturi` lines have been added to the `Properties/launchSettings.json` file. + +## Using the browser debugger + +To debug your application: +- Make your WASM project the startup project (right-click **set as startup** in Solution Explorer) +- In the Nuget Package manager, update `Uno.Wasm.Bootstrap` and `Uno.Wasm.Bootstrap.DevServer` 3.0.0 or later +- Ensure that `true` is set in your csproj - In the debugging toolbar: - Select **IIS Express** as the debugging target