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?
Related
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 want to use the VSCode debugger and want to set the environment variables before launching the app. The configuration in the Launch folder looks something like this.
{
"name": "Launch on iOS",
"type": "nativescript",
"request": "launch",
"platform": "ios",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": true,
"environment": [
{
"BUILD_ENV": "local"
}
]
}
This doesn't seem to work though. I am using a Mac.
Perhaps this works:
"env": {
"BUILD_ENV": "local"
}
or
"envFile": "${workspaceFolder}/.env",
or
"osx": {
"environment": [
{ "name": "",
"value": ""
}
]
},
See platform-specific properties.
Hi i have built an app using angular-cli and I am trying to debug it using vs code and Debugger for chrome extension. After a while I was able to make it work, well kind of. What happens is that i can set a break-point in my typescript class but it gets placed on a wrong line number like source map is incorrect.
Debug process - open terminal ng serve than go to debug tab and click F5 in vscode
I have the following:
I use LaunchChrome configuration
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "LaunchChrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMapPathOverrides": {
"webpack:///C:*": "c:/*"
}
},
{
"name": "AttachChrome",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"sourceMapPathOverrides": {
"webpack:///*": "/*"
}
}
]
}
angular-cli.json
{
"project": {
"version": "1.0.0-beta.18",
"name": "frontend"
},
"apps": [
{
"root": "src",
"outDir": "./dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css",
"../semantic/dist/packaged/semantic.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../semantic/dist/packaged/semantic.js",
"../node_modules/chart.js/dist/Chart.bundle.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
tsconfig.json
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/#types"
]
}
}
I have updated to angular-cli-beta19-3 and typescript 2.0.6 and cleared cache in chrome now it works.
UPDATE: using angular 2.4.1 now
Whats funny is that it doesnt work with
"sourceMapPathOverrides": {
"webpack:///*": "${webRoot}/*"
}
defined here https://github.com/Microsoft/vscode-chrome-debug
but it works with
"sourceMapPathOverrides": {
"webpack:///C:*": "c:/*"
}
and for linux as #carpinchosaurio said
"webpack:///*": "/*"
UPDATE 2/21/2017:
With new versions of angular and typescript there is no need for source map path overrides anymore.
"#angular/compiler-cli": "2.4.8",
"#angular/cli": "1.0.0-beta.32.3",
"typescript": "2.1.6"
angular version 2.4.8
Working setup:
{
"version": "0.2.0",
"configurations": [
{
"name": "LaunchChrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"userDataDir": "${workspaceRoot}/.vscode/chrome"
}
]
}
for anyone still interested this worked for me -
{
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src",
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMapPathOverrides": {
"webpack:///./~/*": "${workspaceRoot}/node_modules/*",
"webpack:///./src/*": "${workspaceRoot}/src/*"
}
// Uncomment this to get diagnostic logs in the console
// "diagnosticLogging": true
}
Just to emphasize more the updated answer: Currently it's not needed to have the sourceMapPathOverrides property in your launch.json. In case you are updating project from an old Angular, just remove the property and debugging will start working.
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"
]
}
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.