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:
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 :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With