Visual Studio Code won't properly step on TypeScript code

Question

I am trying to configure Visual Studio Code to use TypeScript (in a Node package), I'm also using ts-jest/Jest to create tests, additionally, I have the Jest extension installed.

I have been able to figure out how to make breakpoints work, but now I notice I can't properly step in my code, I'm not even 100% sure the breakpoints work perfectly.

When clicking the step button, the execution is resumed and it never stops again on the next line, the only way to make it stop is to place other breakpoints where I want. The code does stop at the right place where the breakpoints have been set AFAICT.

EDIT: Actually, stepping sometimes stops again, but on what seems to be js code from implementation (for instance, console.log steps to code related to logging, but never steps again on my code)

EDIT #2: By trying to reproduce the issue with a simpler project, I realise not importing any more a library I'm using (Phaser) fixes the issue, I hope this can help isolate the cause of the issue.

EDIT #3: Here is a link to something that reproduces the issue I'm speaking about: https://github.com/adtrevor/VSCodeDebugIssue If you want to test it, just clone it, npm install and launch the "Debug Jest Tests" task from the run/debug panel. Set a breakpoint on line 23 of hey.ts (first instruction of barFunction()), the debugger will stop there, but if you step in the code, you should notice that at some point you leave current scope (after executing console.log("B") in my case) and never come back to it.

EDIT #4: Here is a more complete example showing the issue https://github.com/adtrevor/TSVSCodeSOQuestion/. If you clone it, install dependencies, and set a breakpoint to line 156 of ChunkManager.ts, you will notice stepping doesn't behave properly even though I applied the changes of @GiacomoDeLiberali. Maybe the bug is related, though.

I don't know at all what's wrong with the configuration or where to look first as I have no other error message regarding the debugging. Here is the content of my config files:

launch.json

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Jest Tests",
      "cwd": "${workspaceFolder}",
      "args": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/.bin/jest",
        "--runInBand",
        "--config",
        "${workspaceRoot}/jest.config.js"
      ],
      "windows": {
        "args": [
          "--inspect-brk",
          "${workspaceRoot}/node_modules/jest/bin/jest.js",
          "--runInBand",
          "--config",
          "${workspaceRoot}/jest.config.json"          
        ],
      },
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
    },
  ]
}

settings.json

{
    "editor.fontSize": 14,
    "workbench.colorTheme": "Default Light+",
    "window.autoDetectColorScheme": true,
    "debug.node.autoAttach": "off",
    "jest.pathToConfig": "./jest.config.js",
}

jest.config.json

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
  rootDir: './src/'
};

tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module": "CommonJS",
        "strict": true,
        "noImplicitAny": true,
        "allowJs": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": "./src",
        "noEmit": false,
        "outDir": "./build/",

        "paths": {
          "~/*": ["./*"]
        },
        "typeRoots": [
            "node_modules/@types",
            "node_module/phaser/types"
        ],
        "types": [
            "phaser",
            "jest"
        ]
    },
    "include": [
        "src/**/*"
    ]
}

And finally my Package.json:

{
    "name": "mypackagename",
    "description": "Client for the game",
    "version": "0.1.0",
    "dependencies": {
        "phaser": "^3.22.0",
        "tslib": "^1.11.1"
    },
    "devDependencies": {
        "@types/jest": "^25.2.1",
        "bufferutil": "^4.0.1",
        "canvas": "^2.6.1",
        "jest": "^25.2.7",
        "ts-jest": "^25.3.1",
        "typescript": "^3.8.3",
        "utf-8-validate": "^5.0.2"
    }
}

Do you see anything unusual with this config? In general, what could be the cause of such a behaviour?

Answer 1

I've cloned the repo you posted, and it's a known issue of VS Code.

Try adding those lines inside your launch.json:

      "smartStep": true, 
      "skipFiles": [
        "<node_internals>/**",
        "node_modules/**"
      ]

smartStep: Automatically step through generated code that cannot be mapped back to the original source.

skipFiles: An array of glob patterns for files to skip when debugging.

I created a pull-request.