在VS Code中调试React TypeScript

Question

我已经用React TypeScript模板创建了一个ASP Core项目。 不幸的是，由于在TypeScript代码和生成的JavaScript代码之间跳转，因此调试起来非常困难。

例如：

一步走到：

在调试时要避免生成的JS代码。我的launch.json包含该Chrome debuuger配置：

"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}/*",
        }
    }

如何在没有生成JavaScript的情况下调试此TypeScript代码？ 顺便说一句，在Visual Studio 2019中也会发生相同的行为。

Answer 1

将"smartStep": true添加到launch.json配置中。

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