I've recently set up an ASP Core project with the React TypeScript template, but I'm encountering difficulties when it comes to debugging. The transition between the TypeScript code and the corresponding generated JavaScript code is proving to be quite challenging.
For instance:
https://i.sstatic.net/nIEfA.png
After taking just one step forward, here's what it leads me to:
https://i.sstatic.net/ozE75.png
This particular JS code is something I'd like to steer clear of while debugging. In my launch.json file, I have configured the Chrome debugger as follows:
"configurations": [
{
"name": ".NET Core Launch (web)",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
// Ensure to update program path if target frameworks are altered.
"program": "${workspaceFolder}/WebApplication1/bin/Debug/netcoreapp2.1/WebApplication1.dll",
"args": [],
"cwd": "${workspaceFolder}/WebApplication1",
"stopAtEntry": false,
"launchBrowser": {
"enabled": false
},
"sourceFileMap": {
"/Views": "${workspaceFolder}/Views",
}
},
{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "https://localhost:5001",
"webRoot": "${workspaceFolder}/WebApplication1/ClientApp/src",
"userDataDir": "${workspaceFolder}/.vscode/chrome",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
}
}
Is there a way for me to debug this TypeScript code without being exposed to the generated JavaScript? On a side note, the same issue persists even in Visual Studio 2019.