I need to debug a command gulp start with VScode (I got some mapping error with babel during transpilation that I don't understand yet...). The VSCode debug default configuration aims to launch node app.js. How to modify it to trigger the gulp command?
Here is the default configuration. If anyone has hint of how can I do that, I'll be in your debt :)
{
"version": "0.2.0",
"configurations": [
{
"name": "Lancer",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/app.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
},
{
"name": "Attacher",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
}
]
}
In your "Lancer" configuration, make the following changes.
Change program to "${workspaceRoot}/node_modules/gulp/bin/gulp.js"
Change args to ["start"]
Set a breakpoint in the task you want to debug and launch the debugger. Change 'start' to the desired task name to debug other tasks.
Related
I use the vscode to debug my code, my code can run but it can't start debugging.
my launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "C++ Launch (GDB)",
"type": "cppdbg",
"request": "launch",
"targetArchitecture": "x86",
"program": "${file}.exe",
"miDebuggerPath": "D:\\VisualStudioCode\\mingw\bin\\gdb.exe",
"args": [
"blackkitty",
"1221",
"# #"
],
"stopAtEntry": false,
"cwd": "${workspaceRoot}",
"externalConsole": true,
"preLaunchTask": "g++"
}
]
}
Try deleting the .vscode file in your project directory, and then rerun it, with me it worked perfectly
I define global var in my code, like __DEV__, It can build by webpack tool. But when i press "F5" to debug the code, it runs error.
error msg: Cannot find name '__DEV__'.
// .vscode/launch.json
{
"name": "TS File",
"type": "node",
"request": "launch",
"args": [
"${workspaceRoot}/test/index.ts"
],
"runtimeArgs": [
"--nolazy",
"-r",
"ts-node/register",
],
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
},
// webpack.config.js
plugins: [
new webpack.DefinePlugin({
__DEV__: JSON.stringify(false),
})
],
Just declare it somewhere, better at the entry point.
declare global {
var __DEV__;
}
I'm trying to debug my strapi project (3.0.0 beta 16.6) in VS Code.
My launch.json:
{
"type": "node",
"request": "attach",
"name": "Attach to strapi",
"port": 9229
}
My package.json:
"scripts": {
"debug": "node --inspect=127.0.0.1:9229 ./node_modules/strapi/bin/strapi.js develop"
}
Debugger attaches to the process, but all my breakpoints become unverified (appear black, not red). What's wrong with my configs?
this answer come from the following strapi/strapi issue:
I have come up with next solution:
having next script in server.js file (my custom one):
const strapi = require('strapi');
strapi({ dir: process.cwd(), autoReload: true }).start();
I'm using nodemon by next command: nodemon --inspect=0.0.0.0:9228 server.js
Now I can attach to 9228 by debugger.
Just to add to #alxnkt comment.
I have encountered the same and solved it by changing the launch.json to port 9230
{
"type": "node",
"request": "attach",
"name": "Attach to strapi",
"port": 9230
}
while keeping the port on package.json as 9229
"debug": "node --inspect=127.0.0.1:9229 ./node_modules/strapi/bin/strapi.js develop"
There are somehow 2 processes running when calling the Strapi develop command (possibly the admin panel and its core server), the process we have to monitor becomes port 9230 instead.
Add VS configuration "NODE: launch via npm" in .vscode/launch.json "configurations" property and run
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"develop"
],
"port": 9229,
"skipFiles": [
"<node_internals>/**"
],
"console": "integratedTerminal"
}
This worked for me using Strapi v4
{
"version": "0.2.0",
"configurations": [
{
"name": "STRAPI Debug",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "node",
"runtimeVersion":"14.19.0",
"runtimeArgs": ["--lazy"],
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceRoot}/node_modules/#strapi/strapi/bin/strapi.js",
"args": [
"develop"
],
"protocol": "inspector",
"env": {
"NODE_ENV": "development"
},
"autoAttachChildProcesses": true,
"console": "integratedTerminal"
},
]
}
The problem has been solved by setting port number to 9203:
{
"type": "node",
"request": "attach",
"name": "Attach to strapi",
"port": 9229
}
But I have no idea about HOW it works...
I just launched it via NPM, here is my launch.json (in .vscode folder)
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"develop"
],
"port": 9229,
"skipFiles": [
"<node_internals>/**"
],
"console": "integratedTerminal"
}
]
}
You can also use NODE_OPTIONS:
NODE_OPTIONS='--inspect' yarn strapi develop
You'll get:
$ NODE_OPTIONS="--inspect" yarn strapi develop
Debugger listening on ws://127.0.0.1:9229/8564942a-6476-443a-9f64-87fa6d0055b7
For help, see: https://nodejs.org/en/docs/inspector
yarn run v1.22.5
$ strapi develop
Starting inspector on 127.0.0.1:9229 failed: address already in use
Debugger listening on ws://127.0.0.1:9230/7da840dd-cb89-493f-8ce0-e11530efdfbb
For help, see: https://nodejs.org/en/docs/inspector
Now you can use Debug: Attach to Node Process to attach to port 9230.
For strapi v4 you will have to add "sourceMap": true to compilerOptions of tsconfig.json file.
I can't manage to debug my Jest tests in VS Code when I use Electron. My tests should run with Electron, not with Node (due to the use of native modules).
{
"name": "Jest Unit Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"program": "${workspaceRoot}/node_modules/.bin/jest",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"env": {
"ELECTRON_RUN_AS_NODE": "1",
"NODE_ENV": "test",
"BABEL_DISABLE_CACHE": "1"
},
"args": [
"-i",
"--verbose",
"-c test/config/jest.unit.json"
],
"internalConsoleOptions": "openOnSessionStart"
},
It is based on the usual config used to debug Jest with Node (which works fine), but I can't get it to work with Electron. The Jest command is correct, but the --debug-brk --inspect option added by VSCode seems to mess out with Jest.
I was able to get my config to work based on your question. Thanks!
{
"type": "node",
"request": "launch",
"name": "Debug Current Jest File:Electron",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
"args": [
"--verbose",
"-i",
"--no-cache",
"--testPathPattern",
"${fileBasename}",
"--coverage",
"false"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"env": {
"ELECTRON_RUN_AS_NODE": "true"
}
}
I'm trying to get vscode to launch mocha and stop on breakpoints. When I run the tests manually I use the following command:
$ mocha -r node_modules/reflect-metadata/Reflect.js --recursive
I can also use the following command:
mocha -r node_modules/reflect-metadata/Reflect.js --recursive --debug-brk
And the following debug config:
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Process",
"type": "node",
"request": "attach",
"processId": "${command.PickProcess}",
"port": 5858,
"sourceMaps": true,
"outFiles": [
"src/**/**.js",
"test/**/**.test.js"
]
}
]
}
This allows me to set breakpoints in the .js files and see the original TypeScript source. But I can't set a break point directly in the TypeScript code.
My second problem is that I would like to simply press debug in the VSCode UI and trigger mocha in debug mode automatically and again hit breakpoints directly in the .ts files.
Is this possible?
I had already a very similar setup as #JasonDent but that didn't work. The node2 setting is already outdated (vscode will warn you). Instead simply add "protocol": "inspector" and voilá breakpoints are hit now:
{
"name": "Mocha",
"type": "node",
"protocol": "inspector",
"request": "launch",
"cwd": "${workspaceRoot}",
"preLaunchTask": "tsc",
"program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
"args": [ "--no-timeouts", "--colors", "${workspaceRoot}/out/test/**/*.js" ],
"stopOnEntry": false,
"runtimeExecutable": null,
"env": {
"NODE_ENV": "testing"
},
"sourceMaps": true
},
Here's my config based on the latest task building in VSCode. Out the box it doesn't work with Typescript!? Anyway combining the answer from #Jason Dent I was able to get it working! Its also using the newer node2 debugger. For your setup, change the build/test to where ever you have put your files.
{
"type": "node2",
"request": "launch",
// Automatically stop program after launch.
"stopOnEntry": false,
"name": "Mocha Tests",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/mocha",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/mocha.cmd"
},
"runtimeArgs": [
"-u",
"tdd",
"--timeout",
"999999",
"--colors",
"--recursive",
"${workspaceRoot}/build/test"
],
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/build"],
"internalConsoleOptions": "openOnSessionStart",
// Prevents debugger from stepping into this code :)
"skipFiles": [
"node_modules/**/*.js",
"<node_internals>/**/*.js"
]
},
I also recommend a separate launch profile for debugging Mocha tests. I have the following configs, working with Mocha Typescript test.
My launch.json debug mocha profile looks like the following:
{
"type": "node",
"request": "launch",
"name": "Debug tests",
"runtimeExecutable": "mocha",
"windows": {
"runtimeExecutable": "mocha.cmd"
},
"preLaunchTask": "build:tests",
"runtimeArgs": [
"--debug-brk",
"-p",
"tsconfig.test.json",
"test-js/test/index.js"
],
"program": "${workspaceRoot}\\test\\index.ts",
"outFiles": [
"${workspaceRoot}\\test-js\\**\\*.js"
],
"port": 5858
},
build:tests is a vs code task, that runs 'tsc -p tsconfig.test.json'. I had some issues in the past with gulp-typescript sourcemap generation, that's why I'm using TSC at the moment.
My tsconfig.test.json is:
{
"compilerOptions": {
"outDir": "./test-js",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2016",
"declaration": true,
"sourceMap": true,
"inlineSources": true
},
"files": [
"./test/index.ts"
]
}
I hope you figured it out by now.
Basic answer, yes you can set breakpoints in .ts files and debug them with VSCode. They have a walk through here on general debugging: Debugging with VSCode
The key part is that you need to make a launch profile explicitly for mocha. This is just an example of how I got it to work. You will need to add something like the following to your .vscode/launch.json.
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Run mocha",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Request type "launch" or "attach"
"request": "launch",
// Workspace relative or absolute path to the program.
"program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program (mocha in this case).
"args": ["--recursive", "lib/*.test.js"],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": "${workspaceRoot}",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
"outDir": "${workspaceRoot}/lib",
"sourceMaps": true,
// Environment variables passed to the program.
"env": { "NODE_ENV": "test"}
}
This will launch mocha to test *.test.js files in the lib directory.
I used the following tsconfig.json file and have my unit tests next to the code:
{
"compilerOptions": {
"target": "es5",
"declaration": true,
"module": "commonjs",
"moduleResolution": "node",
"outDir": "./lib",
"sourceMap": true,
"removeComments": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"data",
"lib"
]
}