Repository navigation
Debugger setup tuning for using VS Code with the mern.io starter kit #22378
Description
// CC Chris Dias (@chrisdias)
http://mern.io/ defines a starter kit for MERN. I was looking with Andre Weinand (@weinand) into the best VS Code debugger setup.
The idea is to use an NPM launch configuration so that the vscode independent launching details can be defined inside the package.son and do not have to be defined inside the vscode specific launch configuration.
I've added the following script to the starter kit's package.json in the scripts section:
"start:debug": "cross-env BABEL_DISABLE_CACHE=1 NODE_ENV=development nodemon --nolazy --inspect=5858 index.js",With the following launch configuration we could launch and debug the target from VS Code.
The script sets restart to true since the starterkit is using nodemon and we want to reattach when nodemon restarts the target program.
{
"name": "Launch via NPM",
"type": "node",
"request": "launch",
"protocol": "inspector",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npm",
"windows": {
"runtimeExecutable": "npm.cmd"
},
"runtimeArgs": [
"run-script",
"start:debug"
],
"timeout": 20000,
"restart": true,
"port": 5858
}We've ran into the following glitches:
- using the inspector protocol worked but we did not see all the console output (e.g. the webpack built time) in the DebugConsole.
- when using the
legacyprotocol and the--debugoption you get a timeout error. - with the working setup above you need to use the task manager to kill the target program. We tried to configure the launch configuration to use the internal terminal so that we can kill the target from the terminal. When using the internal terminal then the launching failed.
Activity
weinand commentedon Mar 15, 2017
Issue 3 from above is the result of a changed API. See #22409 for details. It is fixed in the Insiders by now.
chrisdias commentedon Mar 15, 2017
Perhaps we can make a variant of the mern-starter that includes the launch.json and updated package.json, then make a PR on the mern-cli. See "make your mern" at http://mern.io/ .
chrisdias commentedon Mar 27, 2017
added
And was able to launch the app under the debugger. However, I could only ever get it to hit a breakpoint one time.
michelkaporin commentedon Apr 7, 2017
FYI When using
legacyprotocol with--debug-brkinstead of--debugoption, debugger could successfully attach and run MERN but some of the breakpoints could not be hit (e.g. index.js was hit, post.controller.js not). Debugger was also stopping its execution (Continue action became enabled) with no UI indication where it has stopped.michelkaporin commentedon Apr 7, 2017
Closing the issue as:
legacyprotocol is tricky becausebabel-registeris used, which compiles files on the fly whenrequire()is called. This complicates much thelegacyprotocol to get access to the dynamically compiled files.chrisdias commentedon Apr 7, 2017
Michel Kaporin (@michelkaporin) thanks for the update!
I'm reopening this because I don't know what to do as a user still :) Imagine I'm new to VS Code and I'm learning MERN. I read our docs and press F5 and nothing seems to work. What do I do?
Our model is to configure the launch.json in such a way that F5 just works. The suggestion above to launch through the integrated terminal sounds like a workaround?
My question then is, what is the proper setup in VS Code to get debugging to just work here, and how can we make that easier?
10 remaining items
weinand commentedon Apr 10, 2017
The automatically generated launch config assumes that "nodemon" is installed globally.
This assumption can be removed as soon as microsoft/vscode-node-debug2#98 has been addressed.
chrmarti commentedon Apr 27, 2017
--inspectseems to be missing, the debugger fails to attach:Adding
"runtimeArgs": [ "--inspect=5858" ]to the generated launch config makes it work out-of-the-box (assuming MongoDB is running...).chrmarti commentedon Apr 27, 2017
Btw., I'm still asked for the environment before the generated launch is used, is that by design?
weinand commentedon Apr 28, 2017
I've added the
"runtimeArgs": [ "--inspect=5858" ].weinand commentedon May 9, 2017
A first cut of a "MERN Recipe" is available here: https://github.com/weinand/vscode-recipes/tree/master/MERN-Starter