10

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
  }
}
Can Poyrazoğlu
  • 33,241
  • 48
  • 191
  • 389
  • 1
    What version of javascript are you targeting? I've personally had issues with debugging when compiling Typescript down to pre-es6 javascript where async/await is compiled into generator functions. – Jake Holzinger Aug 09 '19 at 21:53
  • @JakeHolzinger I'm targeting ES2017. – Can Poyrazoğlu Aug 10 '19 at 08:14
  • How does the generated JavaScript code look around the 'await'? – Michael Dreher Aug 15 '19 at 18:07
  • @MichaelDreher lots of `switch`es and `case`s jumping wildly around each other. – Can Poyrazoğlu Aug 16 '19 at 06:24
  • Do you actually have async and await keywords in the generated javascript? I second @JakeHolzinger's experience where VSCode's debugger messes up like this if the generated JS does not contain async and await keywords, but works fine if it does. Strange that you're getting it with an ES2017 target. – user240515 Aug 17 '20 at 21:05
  • @user240515 Nope, generated JS doesn't have await/async, they get translated to ugly nested promises by Babel. Maybe React Native doesn't that syntax, but I'll have a look into that. – Can Poyrazoğlu Aug 18 '20 at 21:28
  • @CanPoyrazoğlu Did you ever get this solved? – Isaac Pak Sep 24 '20 at 19:23

1 Answers1

2

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:

Screenshot 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

MarvinJWendt
  • 2,357
  • 1
  • 10
  • 36