I have a JS web app that has a client and server bundle, both built using webpack's node api.
Running my project in dev mode goes through these steps:
- Run two webpack builds, resulting in two output files.
- Server bundle is output to dist/server/index.js
- Spawn child node process using the dist/server/index.js path
- Watch folder for changes. On change, kill the old child process and re-run steps 1-3
I want to add node server debugging using vscode.
So far, I've added the following flags during step 3, when I launch a new child process.
['--inspect=9222', '--no-lazy', '--inspect-brk']
My launch.json file in vscode looks like this
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to dev server",
"type": "node",
"request": "attach",
"protocol": "inspector",
"address": "localhost",
"port": 9222,
"restart": true,
"trace": true,
"stopOnEntry": true
}
]
}
When I start the server and run the debugger, things mostly work.
However, I'd love to fix the following two things:
- Even with
"stopOnEntry": true
, the debugger will not pick up any breakpoints, unless I include"--inspect-brk"
when launching my child process. This is annoying, because if I'm not running the debugger, the process will hang and will not continue execution. With this flag included, when I run the debugger, the builtdist/server/index.js
file will open in my editor with a breakpoint on line 1. If I hit continue, all future debugging works. - I'm generating sourcemaps using webpack's "inline-source-map" option. This puts the "original source" in the built file. However, it's the source after babel transformation, making debugging the code a little annoying.
E.g. _myFunction.default instead of myFunction
. Does vscode have a way to correctly map the built .js file to the pre-built source code in my project? I saw theremoteRoot
andlocalRoot
options, but could not get them to work (and am unsure if these are the correct options).
Thanks!
from vscode node debugger with custom webpack build
No comments:
Post a Comment