vimspector-config (for node-web-environment)
a tiny helper cli tool made for the vimspector plugin.
this npm package automatically creates a .vimspector.json file for a node-web-app environment
usage
inside your project directory run:
npx vimspector-config
by default, this will create the following .vimspector.json file inside this directory:
{
"configurations": {
"node": {
"adapter": "vscode-node",
"breakpoints": {
"exception": {
"all": "N",
"uncaught": "N"
}
},
"configuration": {
"request": "launch",
"protocol": "auto",
"stopOnEntry": true,
"console": "integratedTerminal",
"program": "${workspaceRoot}/index.js",
"cwd": "${workspaceRoot}"
}
},
"chrome": {
"adapter": "chrome",
"breakpoints": {
"exception": {
"all": "N",
"uncaught": "N"
}
},
"configuration": {
"request": "launch",
"url": "http://localhost:4000/",
"webRoot": "${workspaceRoot}/public"
}
},
"express": {
"adapter": "vscode-node",
"breakpoints": {
"exception": {
"all": "N",
"uncaught": "N"
}
},
"configuration": {
"name": "Attaching to a process ID",
"type": "node",
"request": "attach",
"skipFiles": ["node_modules/**/*.js", "<node_internals>/**/*.js"],
"processId": "${processId}"
}
}
}
}
.gitignore
if there is a .gitignore file in the directory, the .vimspector.json file will be automatically added to it.
custom configurations
you can pass different arguements to setup custom configurations for the .vimspector.json file.
ARGUMENTS | values | description | example |
---|---|---|---|
--setup |
["node", "chrome", "express"] | setup specific environments (adapters) multiple environments are separated by "-" |
--setup=express will setup the .vimspector.json file with only express server configs --setup=node-chrome will setup the .vimspector.json file with node and chrome environments |
--port |
[NUMERIC] | by default, the chrome debugger will start on http://localhost:4000 you can set the --port value to make it start in a different port |
--port=5555 will set the chrome debugger (if presence) to run on http://localhost:5555
|
--webroot |
[a relative path to the directory where you run the client] |
--webroot will point the chrome debugger to the directory you would like to debug |
--webroot=client/public will point the chrome debugger to $YOUR_PROJECT_ROOT/client/public (don't write "/" at the begining of the path) |
--program |
[a relative path to the main node file you're running] |
--program will point the node debugger to the main file you would like to debug |
--program=streamer/src/index.js will point the node debugger to $YOUR_PROJECT_ROOT/streamer/src/index.js
|
examples
let's say we have this project tree:
~/project: tree
.
├── client
| ├── public
│ ├── index.html
│ └── script.js
├── server
│ ├── express-app.js
│ └── index.js
└── streamer
├── index.js
└── src
suppose client
is a web app where the static assets are serverd inside the "public" directory and server
is an express app.
I'd like to create a .vimspector.json with configurations to support a chrome debugger and an express server (node debugger).
In root directory I'll run npx vimspector-config --setup=express-chrome --webroot=client/public
this will create the following .vimspector.json in the root directory:
{
"configurations": {
"chrome": {
"adapter": "chrome",
"breakpoints": {
"exception": {
"all": "N",
"uncaught": "N"
}
},
"configuration": {
"request": "launch",
"url": "http://localhost:4000/",
"webRoot": "${workspaceRoot}/client/public"
}
},
"express": {
"adapter": "vscode-node",
"breakpoints": {
"exception": {
"all": "N",
"uncaught": "N"
}
},
"configuration": {
"name": "Attaching to a process ID",
"type": "node",
"request": "attach",
"skipFiles": ["node_modules/**/*.js", "<node_internals>/**/*.js"],
"processId": "${processId}"
}
}
}
}
from this point, you're good to go
- if you want to start the chrome debugger -> launch your client web server (on the same port as the debugger) -> launch Vimspector and choose "chrome"
- if you want to start the express debuger -> launch your express app with the
--inspect
flag -> fire up Vimspector, choose "express" -> Vimspector will ask you for aprocessID
-> copy the one from thenode --inpect
process that you've started and start debugging!😎 - (to start a normal integrated terminal node debugger, make a .vimspector.json with "node" settings (
--setup=node
), point the debugger to the program you want by running--program=/path_to_main_file
and start Vimspector with the "node" configuration.
update; go support (golang)
hey gophers, you're not alone.
run npx vimspector-config --setup=go
and you're good to go (ha ha)
by default it start a debugging session from main.go, you can change it by adding --main=<differentFilename.go>
you can also specify a different delve path with --delve=<differentDelvePath>
(default is $HOME/go/bin/dlv
)