VS代码无法正确设置断点

Question

我正在尝试调试一个小项目,但我无法让Debugger for Chrome扩展完全正常工作.当我放置一个断点时,它会移动到我想要调试的函数之外.

我正在使用webpack + babel.我的项目是在.Net平台(特别是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"]
        }
    ]
}

设置的断点将会被触发,但它会完全跳过我的代码.我可以成功地在Chrome开发工具中设置一个断点,但这会破坏利用ES6语法的目的.一直试图解决这个问题,并没有找到解决方案.

更新:尝试将我的const值更改为let或var无法解决问题:

编辑:我现在可以看到它正在尝试调试正确的文件,但行号不同步.这是我在chrome dev工具中看到的:

Answer 1

感谢这篇文章,我能够解决我的问题.

我用这些行创建了一个.babelrc文件:

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

现在断点按预期命中.好极了!

但是,我相信我有一个单独的问题:我在调试时没有得到任何intellisense.我可以查看变量的值,但我看不到任何其他内容的文本(函数,关键字等).

希望这有助于某人:)