VS代码无法正确设置断点

时间:2018-03-02 18:24:53

标签: debugging webpack visual-studio-code babel

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

enter image description here

我正在使用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无法解决问题:

enter image description here

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

enter image description here

1 个答案:

答案 0 :(得分:7)

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

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

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

现在断点符合预期。耶!

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

希望这有助于某人:)