Node.js debugging async/await with Babel transpilation not working, breakpoints jumping

[kylezinter]

• VSCode Version: Version 1.21.0-insider (1.21.0-insider)
• OS Version: MacOS 10.13.3

Steps to Reproduce:

1. Open up babel node project using async/await (I'm not sure I can share my whole codebase right now but I can try to create an example project if needed)
2. Try to set breakpoints in or step in async functions

Expected behavior - I can step through the code as normal debugging steps

Actual behavior - breakpoints jump to function declaration line

Note - When I remove async/await from code, debugging works as expected.

Does this issue occur when all extensions are disabled?: Yes

Launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "API",
      "address": "localhost",
      "sourceMaps": true,
      "restart": true,
      "smartStep": true,
      "port": 9229,
      // "preLaunchTask": "npm: build - api",
      // "runtimeExecutable": "${workspaceFolder}/api/node_modules/.bin/babel-node",
      // "program": "${workspaceFolder}/api/src/app.js",
      "outFiles": [
        "${workspaceFolder}/api/build/**"
      ],
    },
  ] 
}

Package.json scripts section

  "scripts": {
    "start": "nodemon --exec node_modules/.bin/babel-node src/./bin/www | bunyan",
    "debug": "npm run build && DEBUG=*,-babel nodemon src/./bin/www --exec node_modules/.bin/babel-node --inspect | bunyan",
    "build": "rm -rf build/ && babel src -d build --source-maps",
    "compile": "rm -rf build/ && babel src -d build --source-maps --watch",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint ."
  },

.babelrc

{
  "presets": ["env"],
  "sourceMaps": true
}

Update. Example of function where breakpoints can't be set. Almost any line I try to set a breakpoint on, the breakpoint puts itself on the exports.createUser line.

exports.createUser = async (request, response) => {
  try {
    const hasValidationErrors = await createUserValidationCheck(request);

    if (hasValidationErrors) {
      logger.info('Create user attempt had validation errors');
      return response.status(422).send(hasValidationErrors);
    }

    const {
      email,
      password,
      fullName,
      displayName,
      accountType
    } = request.body;

    let user = await new User({
      email,
      password,
      fullName,
      displayName,
      accountType
    });

    user = await user.save();

    const tokenForUser = await AuthenticationController.tokenForUser(user);

    return response.status(200).json({
      user,
      token: tokenForUser
    });
  } catch (err) {
    const uuid = uuidv1();
    logger.error({ err, uuid });
    return response.status(500).json(err);
  }
};

[weinand]

Most likely this is a problem of the generated source maps and nothing we can fix.

@roblourens correct?

[kylezinter]

@weinand Meaning this is an issue or potentially bug with how Babel has decided to generate their source maps?

[weinand]

Yes, the source maps are the only information that we have for mapping back JS to the original source. Tools exist that visualize how JS maps to source.

[kylezinter]

Makes sense, bummer. I'll look into opening this issue against them. Seems like it is only around async/await, found one other issue babel/babel#2515 talking about in relation to Babel but they closed it as not actionable. Do you happen to know if there is a spec where I can point them to specifically what is not implemented correctly?

[roblourens]

Can you try it in chrome devtools and see whether it's any better than VS Code?

[snoopy83101]

.babelrc

{
"env": {
"development": {
"sourceMaps": true,
"retainLines": true
}
},
"presets": [
"es2015"
]
}
Then it works!

babel sourceMaps has some problem,I guess

thank you very much.
@roblourens

[roblourens]

Spent awhile investigating this and other babel-related complaints. Couldn't find any difference between the vscode and chrome devtools experiences, across different babel setups. So I'll continue to close these as just weird sourcemaps from babel.