VS Code Can't Set Breakpoints Properly

问题

I'm attempting to debug a tiny project but I'm unable to get the Debugger for Chrome extension to fully work. When I place a breakpoint it gets moved outside of the function I want to debug.

I'm using webpack + babel. My project is being hosted on a .Net platform (specifically DNN).

package.json:

{
  "name": "disable-registration",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "npm-watch"
    },
    "babel": {
    "presets": [
      "env"
    ]
    },
    "watch": {
    "build": "src/*.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-preset-env": "^1.6.1",
    "npm-watch": "^0.3.0",
    "webpack": "^4.0.1",
    "webpack-cli": "^2.0.9"
  }
}

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to mickys.dnndev.me",
            "port": 9222,
            "url": "http://www.mickys.dnndev.me/",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "skipFiles": ["node_modules"]
        }
    ]
}

The breakpoints that do get set will hit but it completely skips my code. I can put a breakpoint in the Chrome dev tools successfully but that defeats the purpose of taking advantage of ES6 syntax. Been trying to resolve this for days and haven't found a solution.

Update: tried changing my const value to let or var doesn't resolve the issue:

Edit: I can now see that it is trying to debug the correct file however the line numbers are out of sync. This is what I see in the chrome dev tools:

回答1:

Thanks to this post I was able to resolve my issue.

I created a .babelrc file with these lines:

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

Now breakpoints hit as expected. Yay!

However, I believe I have a separate issue: I don't get any intellisense while debugging. I can view the value of a variable but I don't see text on anything else (functions, keywords, etc).

Hope this helps someone :)

来源：https://stackoverflow.com/questions/49075180/vs-code-cant-set-breakpoints-properly