Отладка React TypeScript в VS Code

#typescript #asp.net-core #create-react-app

#typescript #asp.net-ядро #create-react-app

Вопрос:

Я создал проект ASP Core с шаблоном React TypeScript. К сожалению, его очень сложно отладить, поскольку он переходит между кодом TypeScript и сгенерированным кодом JavaScript.

Например:
введите описание изображения здесь

После одного шага он приходит к:
введите описание изображения здесь

Это сгенерированный JS-код, которого я хочу избежать при отладке. Мой launch.json содержит эту конфигурацию отладчика Chrome:

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

Как я могу отладить этот код TypeScript без сгенерированного JavaScript?
Кстати, такое же поведение происходит и в Visual Studio 2019.

Ответ №1:

Добавьте "smartStep": true в свою конфигурацию launch.json.

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