VS Code 无法正确设置断点答案

【问题标题】：VS Code Can't Set Breakpoints ProperlyVS Code 无法正确设置断点
【发布时间】：2018-08-11 00:37:06
【问题描述】：

我正在尝试调试一个小型项目，但无法让 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 开发工具中看到的：

【问题讨论】：

如果你让 disableRegistration 不是一个常量，它会让你调试吗？
我将其更改为 var 和 let ，我得到相同的结果。编辑：在我看来，我的断点没有针对正确的文件，这就是为什么它不允许我将我的点设置在我想要的位置。会不会是 babel/webpack 配置？

标签： debugging webpack visual-studio-code babeljs

【解决方案1】：

感谢post 我能够解决我的问题。

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

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

现在断点按预期命中。耶！

但是，我相信我有一个单独的问题：调试时我没有得到任何智能感知。我可以查看变量的值，但看不到其他任何内容（函数、关键字等）的文本。

希望这可以帮助某人:)

【讨论】：