how to define global variable in vscode debug - vscode-debugger

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__;
}

Related

debug clang (lldb) under vscode/windows

I'm trying to debug the helloworld project
#include <stdio.h>
int
main (void)
{
printf ("Hello, world!\n");
return 0;
}
which is built using clang. I use vs-code to take these actions. Here is my task.json file:
{
"version": "2.0.0",
"tasks": [
{
"type": "shell",
"label": "C/C++: clang.exe build active file",
"command": "C:\\msys64\\mingw64\\bin\\clang.exe",
"args": [
"-g",
"${file}",
"-o",
"${fileDirname}\\${fileBasenameNoExtension}.exe"
],
"options": {
"cwd": "${workspaceFolder}"
},
"problemMatcher": [
"$gcc"
],
"group": "build"
}
]
}
As a build task, it works but then with launch.json to debug it seems with no progress. Here is my launch.json` file:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "clang.exe - Build and debug active file",
"type": "cppdbg",
"request": "launch",
"program": "${fileDirname}\\${fileBasenameNoExtension}.exe",
"args": [],
"stopAtEntry": true,
"cwd": "${workspaceFolder}",
"environment": [],
"externalConsole": false,
"MIMode": "lldb",
"miDebuggerPath": "C:\\msys64\\mingw64\\bin\\lldb.exe",
"setupCommands": [
{
"description": "Enable pretty-printing for gdb",
"text": "-enable-pretty-printing",
"ignoreFailures": true
}
],
"preLaunchTask": "C/C++: clang.exe build active file"
}
]
}
How to set-up debugger under vs-code with the use of clang/lldb?
It got stall within this command
PS C:\c_helloworld> & 'c:\.vscode\extensions\ms-vscode.cpptools-0.30.0-insiders5\debugAdapters\bin\WindowsDebugLauncher.exe' '--stdin=Microsoft-MIEngine-In-2oaooq4b.u01' '--stdout=Microsoft-MIEngine-Out-ojuis1aj.kfb' '--stderr=Microsoft-MIEngine-Error-tcxqgdhj.tgp' '--pid=Microsoft-MIEngine-Pid-nam4qmgr.r4y' '--dbgExe=C:\msys64\mingw64\bin\lldb.exe' '--interpreter=mi'

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

I am trying to debug Gherkin Cucumber scenarios in Visual Studio Code but I am getting the following error:-
Parse error in 'zFunctionalTests\protractor_ui.conf.js': (1:1): expected: #EOF, #Language, #TagLine, #FeatureLine, #Comment, #Empty, got 'var baseConfig = require('./protractor_base.conf.js');'
I have created the following configuration:
launch.json
{
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"console": "integratedTerminal",
"cwd": "${workspaceRoot}",
"program": "${workspaceRoot}\\node_modules\\cucumber\\bin\\cucumber-js",
"protocol": "inspector",
"args": [
"${workspaceRoot}\\zFunctionalTests\\protractor_ui.conf.js",
],
"outFiles": [
"${workspaceRoot}/FunctionalTests/features/*.feature"
]
}
]
}
protractor_ui.conf.js
var baseConfig = require('./protractor_base.conf.js');
var localConfig = baseConfig.config;
localConfig.capabilities = {
'browserName': 'chrome',
chromeOptions: {
args: [
'--start-maximized',
'--no-sandbox',
]
}
}
exports.config = localConfig;
protractor_base.conf.js
exports.config = {
allScriptsTimeout: 15000,
directConnect: true,
baseUrl: "http://localhost:3000/",
specs: ["./features/*.feature"],
framework: "custom",
frameworkPath: require.resolve("protractor-cucumber-framework"),
cucumberOpts: {
require: ["./steps/*.ts"],
strict: true,
dryRun: false,
tags: true,
profile: false,
"no-source": true,
tags: ["~#ignore"],
compiler: []
},
capabilities: {},
maxSessions: 1,
multiCapabilities: {},
allScriptsTimeout: 15000,
getPageTimeout: 15000,
onPrepare() {
require("ts-node").register({
project: "zFunctionalTests/tsconfig.e2e.json"
});
require("dotenv").config();
}
};
I have tried things described in the following post but it's not working.
How to debug Cucumber in Visual Studio Code (VSCode)?
It may be due to while execution its not picking up tsconfig in which the target es5 is mentioned.
Any help will be appreciated.
Create launch.json using node.js environment
Copy paste the below code
{
"version": "0.2.0",
"configurations": [
{
"name": "ng e2e",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
"protocol": "inspector",
"args": ["${workspaceFolder}/zFunctionalTests/protractor_single.conf.js"]
}]}
Now, go to step file and add breakpoints that you want to debug. And click on debug icon from vs code menu and start debugging
Note : workspace folder is your .vscode folder
Hence, the paths mentioned here are based on assumptions of your folder structure. It may differ from actual path.
Have you replaced types with:
"types": ["chai", "cucumber", "node"]
in tsconfig.json file?

VSCode: How to debug current Jest test file

How to launch jest in debug mode on the current opened file, and only this one, regardless of the OS (windows, linux, mac).
The problem:
When using vscode under windows, it is impossible to jest the current (active) file, and only this one.
This debug config (from https://github.com/microsoft/vscode-recipes/tree/master/debugging-jest-tests):
{
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"${fileBasenameNoExtension}",
"--config",
"jest.config.js"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
}
}
Will not run only the active test if you have several tests with the same name (like index.test.js)
If I replace
"args": [
"${fileBasenameNoExtension}",
....
]
by
"args": [
"${file}",
...
]
It will not work at all as the first argument jest expects is a regex and ${file} returns the absolute path of the file, which, on a windows machine will contain \ backslashes which in turn will be interpreted as escaping the following chars in the pattern.
After reading carefully Jest's doc, it's impossible to specify a single file.
And VSCode is unable to convert a variable to a regexp.
The solution from this question, although almost similar, will not work either as it fails with files of the same name (case 1).
So either more tests than expected are run, or no test at all is run.
I've found a solution involving a separate script but any other solution would be appreciated.
Taken from here: https://github.com/Lemoncode/jest-vs-code-debugging-example/blob/master/custom-solution-config-package-json/01-implemented/.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest single run all tests",
"program": "${workspaceRoot}/node_modules/jest-cli/bin/jest.js",
"args": [
"--verbose",
"-i",
"--no-cache"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
},
{
"type": "node",
"request": "launch",
"name": "Jest watch all tests",
"program": "${workspaceRoot}/node_modules/jest-cli/bin/jest.js",
"args": [
"--verbose",
"-i",
"--no-cache",
"--watchAll"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
},
{
"type": "node",
"request": "launch",
"name": "Jest watch current file",
"program": "${workspaceFolder}/node_modules/jest-cli/bin/jest",
"args": [
"${fileBasename}",
"--verbose",
"-i",
"--no-cache",
"--watchAll"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
The accepted answer provides launch tasks to run all tests, watch all tests or watch a single file. If you just want to run the tests in the current file then the --testPathPattern option is what you want:
{
"type": "node",
"request": "launch",
"name": "Jest debug current file",
"program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
"args": ["--verbose", "-i", "--no-cache", "--testPathPattern", "${fileBasename}"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
This does have the problem that similarly named files may be run by mistake, as ${fileBasename} is just the filename - it doesn't match the path at all.
On reflection this isn't a terribly good answer. I'm going to leave it up, more as a warning than as something helpful.
I don't think ${relativeFile} will work as it gives the relatvie path that Jest doesn't like either.
Instead, you should use ${fileBasename}
"args": [
...,
"${fileBasename}"
]
The solution mentionned in the above question (involves a separate script):
debug configuration:
{
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/src/utils/betterJestCli.js",
"args": [
"${relativeFile}",
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/src/utils/betterJestCli.js",
},
"cwd": "${workspaceFolder}",
},
betterJestCli.js:
const { exec } = require('child_process');
const path = process.argv[2];
const child = exec(
['"./node_modules/.bin/jest"', path.replace(/\\/g, '/'), '--config', 'jest.config.js'].join(' '),
// eslint-disable-next-line prefer-arrow-callback, func-names
function (error/* , stdout, stderr */) {
if (error) {
// eslint-disable-next-line no-console
console.log(error);
}
}
);
// to see Jest's output
child.stderr.pipe(process.stderr);
So replacing \ by / on a relative path does the trick since / has no meaning from a regex point of view (escaping the . would be a good idea too).
The biggest issue is that I lose Jest's output colors in the terminal.
It's not yet tested under different environment (linux, mac) so I don't know if it's cross env.
Any other ideas?
I am using the following debug config in VSCode to run the current jest file
{
"name": "Debug Current Jest File",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
"args": [
"--runTestsByPath",
"${relativeFileDirname}/${fileBasename}"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"port": 9229
}
Tested it on Windows and WSL (Ubuntu-18), not sure about mac.

Breakpoints in TypeScript with mocha and VSCODE

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"
]
}

How to debug a gulp task with VSCode

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.

Resources