using grunt in launch.json - visual-studio-code

I loaded the yeoman generator-meanjs and opened it with Visual Studio Code.
The debugger works nicely. When I clicked on the debug side bar button a
launch.json file was generated for me. The launch.json generator is looking at the package.json which has "scripts": { "start": "grunt"}.
The generator uses grunt to launch the application. The launch.json file had
the following:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "grunt",
"stopOnEntry": false,
"args": [],
"cwd": ".",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}
]
}
When I replace 'program' : 'grunt' with server.js it works. If I could change the type to grunt, but it seems only node or mono is supported there.

I managed to make it work by using an absolute path to grunt-cli, as follows:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Grunt",
"args": ["build"],
"program": "${env.APPDATA}\\npm\\node_modules\\grunt-cli\\bin\\grunt",
"stopOnEntry": true,
"cwd": "${workspaceRoot}"
}
]
}
As pointed by #L.Butz, on newer vscode versions, replace env.APPDATA by env:APPDATA.

Related

How to configure launch.json for NextJs and Typesctipt

I am trying to create a launch.json file for the following repo:
https://github.com/zakariamofaddel/shopify-nextjs-template
I have tried both the default VS Code node template and the NextJs launch file.
VS code default Node generated .vscode/launch.json file
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\server\\index.ts"
}
]
}
I am able to run yarn dev successfully and use console.log:
https://github.com/zakariamofaddel/shopify-nextjs-template/blob/38c700d8706818aa12d892b3f1193a969919e003/package.json#L9
I found the solution after adding the TypeScript Debugger extension in VS code.
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Localhost",
"type": "node",
"request": "launch",
"args": [
"${workspaceRoot}\\server\\server.ts"
],
"runtimeArgs": [
"-r",
"ts-node/register/transpile-only"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"internalConsoleOptions": "openOnSessionStart",
"env": {
"NODE_ENV": "development"
}
}
]
}

Debug Jest tests for Lerna project in VS Code

I'm wanting to debug specific Jest tests in VS code for a project that uses Lerna, so there are multiple folders each with their own node_modules folder. With help from this answer I've got the following launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest watch",
"program": "${workspaceRoot}/my/specific/module/node_modules/jest/bin/jest.js",
"args": ["--verbose", "-i", "--no-cache", "--watchAll"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"cwd": "${workspaceFolder}/my/specific/module"
}
]
}
The problem is that I've had to put the specific path to the module in the launch config so I have to change it every time I want to debug something else.
Is there a better way to do this? Maybe use the folder that's selected in the Explorer? Maybe have some way of launching debug by right-clicking the test file?
With much thanks to dlac for the idea, I now have a working launch config:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest watch",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": ["--verbose", "-i", "--no-cache", "--watchAll"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest"
},
"cwd": "${fileDirname}"
}
]
}
Lerna allows you to have npm packages in the root node_modules that are hoisted to your packages. That said, if you have jest as a dependency in your root package.json file you should be able to run tests in every package.
I have my launch.json configured as below. The first config runs all tests, and the second runs the test that is currently opened in VS Code.
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest All",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"--runInBand", "--watchAll"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
}
},
{
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"${relativeFile}","--watchAll"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
}
}
]

VSCode First Extension Hello World Example --inspect Error

About 10 months ago I started writing my own extension for VSCode I set everything up following the page: https://code.visualstudio.com/docs/extensions/example-hello-world
Everything was running/debugging fine. Few days ago I went back to it and after software updates all I get is a Ensure Node was launched with --inspect... ... Error,
I can't even run the Hellow World example. Can anyone help me?
this is the launch.json file it gave me
// A launch configuration that compiles the extension and then opens it inside a new window
{
"version": "0.1.0",
"configurations": [
{
"name": "Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceRoot}" ],
"stopOnEntry": false,
"sourceMaps": true,
"outFiles": [ "${workspaceRoot}/out/**/*.js" ],
"preLaunchTask": "npm: watch"
},
{
"name": "Extension Tests",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceRoot}", "--extensionTestsPath=${workspaceRoot}/out/test" ],
"stopOnEntry": false,
"sourceMaps": true,
"outFiles": [ "${workspaceRoot}/out/test/**/*.js" ],
"preLaunchTask": "npm: watch"
}
]
}

How to debug Cucumber in Visual Studio Code (VSCode)?

I was trying to debug Cucumber scenarios in Visual Studio code and made below changes in the launch.json.
{
"name": "e2e",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}\\node_modules\\.bin\\cucumber-js",
"stopOnEntry": false,
"args": ["--no-timeouts", "--colors"],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null,
"outFiles": [
"${workspaceRoot}\\features\\step_definitions\\*.js"
]
},
However, I am not able run a debug session using the above configuration. The step def. files I created in JavaScript.
So, just need a help on the script above if that looks fine?
You could try below configuration to make your debug working in VS Code. In the outFiles give your feature file path.
{
"name": "e2e",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/cucumber/bin/cucumber.js",
"outFiles": [
"${workspaceRoot}/features/*.feature"
]
}
============================================
UPDATE AS OF cucumber ^5.0.2:
{
"name": "NPM Cukes",
"type": "node",
"request": "launch",
"console": "integratedTerminal",
"program": "${workspaceRoot}/node_modules/cucumber/bin/cucumber-js",
"args": [
"path/to/features/**/*.feature",
"-r",
"path/to/steps/**/*",
"--tags",
"#your-tags"
]
}
If you want to debug only CURRENT feature, add this to launch.json
{
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/.bin/cucumber-js",
"args": ["${relativeFile}"],
"name": "Cukes current",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"windows": {
"program": "${workspaceFolder}/node_modules/cucumber/bin/cucumber"
}
}
When working with Ruby, it could be used on this way to run specific feature files:
{
"name": "Cucumber",
"type": "Ruby",
"request": "launch",
"cwd": "${workspaceRoot}",
"program": "${workspaceRoot}/bin/cucumber",
"args": [
"--tags", "#Mytags",
]
}
Tweaking the answer from Mukesh Rawat plus ensuring additional file paths were correct, got it working for me, :
Launch.json
{
"name": "DebugMode",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/cucumber/bin/cucumber-js",
"args": [
"${workspaceRoot}/features/*.feature",
"--tags", "#debug"
]
}
Workspace.json
{
"cucumberautocomplete.steps": [
"features/steps/*.js"
],
"cucumberautocomplete.syncfeatures": "features/*.feature",
"cucumberautocomplete.strictGherkinCompletion": true,
"settings": {},
"folders": [
{
"path": "/Users/{me}/Documents/{project folder}/{project name}"
}
]
}
Package.json
"scripts": {
"debug": "node --inspect=1337 --debug-brk --nolazy node_modules/cucumber/bin/cucumber-js --tags #debug --format json:./reports/report.json",
CucumberTest.feature
#debug
Scenario: Validate I can get debug working
This works
{
"name": "DebugMode",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/cucumber/bin/cucumber-js",
"args": [
"${workspaceRoot}/features/*.feature",
"--tags", "#debug"
]
}
Here's the simplest way I've found to run Cucumber.js in the VS Code debugger:
Set JavaScript debugger auto attach to "onlyWithFlag" (Ctrl+Shift+P, type "Toggle Auto Attach")
Run Cucumber.js as follows: node --inspect ./node_modules/.bin/cucumber-js <args...>
For convenience, set an NPM run script in your test project for "debug" so you can run this as npm run debug -- <args...>
with the latest Cucumber, Playwright, typescript as of January 2023 - F5 (run in VSCode) - set debugger in ts step files and use .vscode/launch.json (you might tweak your reports location)
{
"version": "0.1.0",
"configurations": [
{
"name": "debugMode",
"type": "node",
"request": "launch",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"program": "node_modules/#cucumber/cucumber/bin/cucumber-js",
"args": [
"./features/*.feature",
"--require-module",
"ts-node/register",
"--require",
"./steps/*.steps.ts",
"--tags",
"#demoX",
"--format", "progress",
"--format", "json:./Reports/cucumber_report.json"
]
}
]
}

`au run --watch` task with source maps in debugger

In How to implement `au run --watch` task + debugging Ashley Grant outlines nicely a method (along with other contributors) to launch a browser while debugging in VS Code, but as evident in comments, it appears source mapping doesn't work. Indeed, I got going with that post, but as being a rather n00b with both VS Code and Aurelia, I wonder if anyone has ideas what could make it working? Currently I have only JS code, but that or TypeScript helpers and pointers are appreciated.
Just in case, here is the
tasks.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "au",
"isShellCommand": true,
"tasks": [
{
"taskName": "watch",
"suppressTaskName": true,
"args": [
"run",
"--watch"
],
"isBuildCommand": false,
"isBackground": true,
"problemMatcher": {
"owner": "au",
"severity": "info",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "__________",
"file": 1
},
"watching": {
"activeOnStart": true,
"beginsPattern": "^File Changed: (.*)",
"endsPattern": "/(?:BrowserSync Available At:)|(?:Finished 'reload')"
}
}
}
]
}
and here is the launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:9002",
"webRoot": "${workspaceRoot}",
"preLaunchTask": "watch"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 3003,
"webRoot": "${workspaceRoot}"
},
{
"type": "firefox",
"request": "launch",
"name": "Launch Firefox against localhost",
"url": "http://localhost:9002",
"webRoot": "${workspaceRoot}",
"preLaunchTask": "watch"
},
{
"type": "firefox",
"request": "attach",
"name": "Attach to Firefox",
"port": 3003,
"webRoot": "${workspaceRoot}"
}
]
}
Not sure if this is what you are looking for, but this is the only way I got working to debug JavaScript in an Aurelia application with VSC.
Works only with Chrome, no luck with Firefox so far.
A JavaScript file must be open and it must be the active editor in VSC for the debugger to use the right path. Breakpoints will work (only) for all JavaScript files in that same directory.
Command line:
au run --watch
launch.json:
"configurations": [
{
"type": "chrome",
"request": "launch",
"sourceMaps": true,
"trace": true,
"name": "Aurelia App in Chrome (for currently open JavaScript file)",
"url": "http://localhost:9000/index.html",
"webRoot": "${fileDirname}/.."
},
...