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"
}
}
]
}
Related
I'm trying to configure my VSCode launch.json for my node app. My node command for starting the app uses the -r flag to preload a module (dotenv/config). How do I configure that in my launch.json? I can't figure it out.
My run command:
node -r dotenv/config server.js
My launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "My Launch",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceRoot}\\myapp\\src\\server.js",
"env": {
"MY_CONFIG_PATH": ".env"
}
}
]
}
I am also struggling with adding the preLoadedModules in my launch.json, but if you are just wanting to load your environment file you can add "envFile":"${workspaceFolder}/.env" to your launch.json and your app should run.
Example below:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\dist\\index.js",
"preLaunchTask": "tsc: build - tsconfig.json",
"envFile": "${workspaceFolder}/.env",
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
]
}
]
}
I am using vscode-jest and the "debug" code lens to run individual tests. However, when running a test like this it spawns a new terminal every time. How can I prevent this by modifying the launch configuration in the launch.json file?
For reference, here is my launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"name": "vscode-jest-tests",
"request": "launch",
"args": [
"--runInBand"
],
"cwd": "${workspaceFolder}/data-utils/",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"program": "${workspaceFolder}/data-utils/node_modules/jest/bin/jest"
}
]
}
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"
]
}
]
}
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}/.."
},
...
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.