Debugging TypeScript in MAUI Blazor app possible?

Reinhard Lackner 6 Reputation points
2023-01-15T13:48:07.1266667+00:00

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
    User's image
  4. Add Typescript-File "test1.ts" in wwwroot-folder -> js-File + js.map-File is generated...
    User's image
  5. Add test1.js - Reference in index.html
    User's image
  6. Add button in Index.razor which calls TypeScript-Function:
    User's image

Execute app (Windows Machine) - Alert is shown (OK):
User's image

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

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

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?

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,860 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,221 Reputation points Microsoft Vendor
    2023-01-16T07:04:46.0433333+00:00

    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.

    1 person found this answer helpful.