我正在尝试调试一个小项目,但无法让 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"
}
}
启动.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 开发工具中看到的:
最佳答案
感谢这个post我能够解决我的问题。
我使用以下几行创建了一个 .babelrc 文件:
{
"presets": ["env"],
"sourceMaps": "inline",
"retainLines": true
}
现在断点已按预期命中。耶!
但是,我相信我有一个单独的问题:调试时我没有得到任何智能感知。我可以查看变量的值,但看不到其他任何内容(函数、关键字等)的文本。
希望这对某人有帮助:)
关于debugging - VS Code 无法正确设置断点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49075180/