Debugging TypeScript in MAUI Blazor app possible?

Question

I want to debug typescript in a MAUI Blazor app, but I am not able to do that with Visual Studio 2022 or F12 developer tools (Edge).

I am just able to debug Javascript code in F12 developer tools...

Does anybody know if it is possible to set breakpoints in Typescript in a MAUI Blazor app?
If you use a Blazor Server App it is working... but not in MAUI Blazor App...

Pre-Configuration:
Install Extension "Web compiler 2022+" in Visual Studio 2022 (Extensions => Manage extensions and install it) and restart it

Sample-App

I created a sample app:

https://github.com/reinhardlackner/SampleMauiBlazorTypescript

Steps:

1. Create new MAUI Blazor app (.net 7)
2. Add NuGet-Package "Microsoft.TypeScript.MSBuild"
3. Add tsconfig file
   
4. Add Typescript-File "test1.ts" in wwwroot-folder -> js-File + js.map-File is generated...
   
5. Add test1.js - Reference in index.html
   
6. Add button in Index.razor which calls TypeScript-Function:
   

Execute app (Windows Machine) - Alert is shown (OK):

Now I want to debug the method "sayHello", which was created in TypeScript.

• Setting a breakpoint in Visual Studio does not work:
  
• In the browser (F12 developer tools") test1.js is visible in Sources... but not the js.map or the ts-file:
  
• Setting a breakpoint in the JavaScript-File in the F12 developer tools browser would work:
  

But I want to work with TypeScript and to set Breakpoints in TypeScript-Files. JavaScript-Debugging is not an option because in this case I am not able to write complex debuggable TypeScript-Code when it's just possible to debug generated JavaScript-Code.

Is there any option to debug the TypeScript file directly?

Answer 1

Hello,

TypeScript code can't run in browser without being compiled, and it's not supported in Blazor with MAUI, please see the comment in GitHub: Typescript support in Blazor apps #5264

And you can try TypeScript NuGet package. For more details, you can refer to Compile and build TypeScript code using NuGet - Visual Studio (Windows) | Microsoft Learn

Debug a JavaScript or TypeScript app - Visual Studio (Windows) | Microsoft Learn

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentationto enable e-mail notifications if you want to receive the related email notification for this thread.