VSCode Debugger & Typescript: Step Over/Into goes to JS file

Question

I'm new to VSCode and I use it for debugging node.js(Typescript) code. Something that I notices it that if my code stops in a breakpoint and then I use the option "Step Over" or "Step Into", the code goes to the post-compiled Javascript file, instead of the relevant Typescript file.

Do you know how to make the debugger go only to Typescript files as a result of using "Step into" / "Step over"?

My settings.json file look this way:

{
            "type": "node2",
            "request": "launch",
            "name": "Launch TS Program",
            "program": "${workspaceFolder}\\app.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": [
                "${workspaceFolder}\\**\\*.js"
            ],
            "smartStep": true,
            "outputCapture": "std",
            "console": "internalConsole",
        },

Answer 1

Try to set smartStep to true in your launch config file (launch.json).

You can find more information about this option in the documentation here.

With the smartStep attribute set to true in a launch configuration, VS Code will automatically skip 'uninteresting code' when stepping through code in the debugger. 'Uninteresting code' is code that is generated by a transpiling process but is not covered by a source map so it does not map back to the original source.

Answer 2

I had the same issue. I set the following option in my tsconfig.json and then deleted the directory specified by outDir in tsconfig.json.

{
  ...
 "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
  ...
}

Then when the project was rebuilt on the next debug, the stepping operations seemed to work fine.