How to debug code after await in Typescript in Vscode?

Question

I am on Vscode 1.33.1, Node 11.12, Typescript 3.4.3, vscode-chrome-debug-core 6.7.46 and I'm trying to debug a React Native project.

As long as I don't hit await, everything works perfectly. However, when I hit a line that contains await, I don't hit any breakpoint after the await line (including the await line). The code runs normally, but debugger gets messed up. If I put a breakpoint just before the await line and try to step in/over/out, it jumps into the ugly index.bundle code.

This happens at multiple locations in my app, so it's not an isolated case to one point either.

Here is my active configuration in launch.json:

{
    "name": "Debug iOS (sim)",
    "program": "${workspaceRoot}/.vscode/launchReactNative.js",
    "type": "reactnative",
    "request": "launch",
    "platform": "ios",
    "sourceMaps": true,
    "outDir": "${workspaceRoot}/.vscode/.react",
    "smartStep": true,
    "skipFiles": [
        "${workspaceFolder}/node_modules/**/*.js",
        "${workspaceFolder}/lib/**/*.js",
        "<node_internals>/**/*.js"
      ]
},

As seen from the configuration, I've already tried smartStep (which. Vscode about that being not allowed anyway), skipFiles (it really does skip files unless I explicitly step in so it works, but doesn't solve the problem). I've also seen Debug Node.js Async/Await with Typescript+VSCode but I've already tried smartStep and the concerns of that question are old and are already solved many releases ago.

How can I debug Typescript code that contains await properly?

UPDATE: When I bypass Vscode debuggings/configurations and debug in Chrome and vanilla terminal (i.e. react-native run-ios) it works perfectly. So it's something with Vscode or its configuration.

UPDATE 2: I'm targeting ES2017, and here's my tsconfig:

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "jsx": "react-native",
    "strict": true,
    "noImplicitAny": false,
     "moduleResolution": "node",
     "baseUrl": "./app",
     "paths": {
       "assets/*": ["assets/*"],
       "components/*": ["components/*"],
       "navigation/*": ["navigation/*"],
       "utils/*": ["utils/*"],
       "views/*": ["views/*"],
       "types/*": ["types/*"],
       "services/*": ["services/*"],
       "state/*": ["state/*"],
       "constants/*": ["constants/*"]
     },
     "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

Answer 1

For debugging I would recommend you to use ndb (Node Debugger) from Google. It uses the dev tools from Google Chrome on your Node project.

When you have ndb installed correctly you can simply run your files via: ndb node index.js etc.

It will automatically start the debugger and run your command:

Image source: https://github.com/GoogleChromeLabs/ndb/blob/v1.1.4/README.md

I for myself think that this is much better than the VSCode debugger.

As you want to run TypeScript files you should probably add ts-node as an devDependency in your package.json which will allow you to run TypeScript files without compiling.

You can use ndb like this then: ndb ts-node index.ts

---

Still, TypeScript is not perfectly supported in any debugger atm. If you need full debugging functionallity, you should probably debug the compiled JavaScript version - you could pretty-up your tsconfig.json to make the code somewhat readable