在 VS Code 中调试 React TypeScript

Question

I've created an ASP Core project with React TypeScript template. Unfortunately, it is very hard to debug it since in jumps between the TypeScript code and the generated JavaScript code.

For example:

After one step it arrives to:

Which is the generated JS code that I want to avoid when I debug. My launch.json contains that Chrome debugger configuration:

"configurations": [
    {
        "name": ".NET Core Launch (web)",
        "type": "coreclr",
        "request": "launch",
        "preLaunchTask": "build",
        // If you have changed target frameworks, make sure to update the program path.
        "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}/*",
        }
    }

How can I debug this TypeScript code without the generated JavaScript? BTW, Same behavior happens also in Visual Studio 2019.

Answer 1

Add "smartStep": true to your launch.json configuration.

https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_smart-stepping