Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
kylezinter opened this issue Mar 8, 2018 · 7 comments

Comments

Projects
None yet
5 participants
@kylezinter
Copy link

commented Mar 8, 2018

  • 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);
  }
};

@isidorn isidorn added the debug label Mar 9, 2018

@isidorn isidorn assigned roblourens and weinand and unassigned isidorn Mar 9, 2018

@weinand

This comment has been minimized.

Copy link
Member

commented Mar 9, 2018

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

@roblourens correct?

@weinand weinand removed their assignment Mar 9, 2018

@kylezinter

This comment has been minimized.

Copy link
Author

commented Mar 9, 2018

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

@weinand

This comment has been minimized.

Copy link
Member

commented Mar 9, 2018

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

This comment has been minimized.

Copy link
Author

commented Mar 9, 2018

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

This comment has been minimized.

Copy link
Member

commented Mar 10, 2018

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

@snoopy83101

This comment has been minimized.

Copy link

commented Mar 30, 2018

.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

This comment has been minimized.

Copy link
Member

commented Apr 6, 2018

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.

@roblourens roblourens closed this Apr 6, 2018

@vscodebot vscodebot bot locked and limited conversation to collaborators May 21, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.