I'm running a node.js webapp using javascript and webpack which I built following this guide. I've installed the chrome debugger extension.
I run the node server using the command:
webpack-dev-server --progress --colors I've also run webpack --devtool source-map
My launch config looks like this:
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}" } ] } After running webpack-dev-server --progress --colors and hitting F5 in VSCode Chrome loads up with the webpage, all my breakpoints appear solid red but when placed they jump a bit lower from where I placed them (including on lines which are executing code). The breakpoints also don't hit which makes me believe there's something wrong with the debug mapping. When I have breakpoints placed on occasion random files get loaded and invisible breakpoints in them are hit, like in node_modules/firebase/index.js an invisible breakpoint over a commented out line is hit.
I should also note running .scripts in vscode does yield (amongst all the modules) my entry.js file which I'm trying to hit breakpoints in, namely: -webpack:///./entry.js (d:\myproject\entry.js)
Everything is placed in the root of my directories (screenshot in case I make a mistake transposing the directories);
Also my webpack.config.js file:
module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" } ] } }; 1 Answers
Answers 1
Problem solved!
Needed to add:
devtool: 'inline-source-map' To my webpack.config.js module.exports. Now breakpoints hit inline on functions everywhere.
0 comments:
Post a Comment