I was going through this tutorial where the author uses VS CODE functionality of debugger(CTRL+SHIFT+D) and launch the debugger. After clicking play icon of debugger, chrome automatically launched.
After 4:56 minutes gone from this video can be clearly seen how the chrome launched automatically.
I am trying to develop the same app using Puppeteer in NodeJS with help of VS Code editor.
Here, is my launch.json
// 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",
"compounds": [
{
"name": "Launch & Debug",
"configurations": ["Launch Program","Launch Chrome"]
}
],
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\index.js"
}
]
// "configurations": [
// {
// "type": "node",
// "request": "launch",
// "name": "Launch Program",
// "program": "${workspaceFolder}\\index.js"
// }
// ]
}
Also, I have gone through these links as well, still no luck
Debug with Visual Studio Code not working
And throwing an error similar to the one I am receiving,
Debugging with inspector protocol because Node.js v10.16.0 was detected.
**Error processing "launch": Error: Can't find Chrome - install it or set the "runtimeExecutable" field in the launch config.**
at Object.errP (C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\node_modules\vscode-chrome-debug-core\out\src\utils.js:262:13)
at ChromeDebugAdapter.<anonymous> (C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\out\src\chromeDebugAdapter.js:69:57)
at Generator.next (<anonymous>)
at C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\out\src\chromeDebugAdapter.js:10:71
at Promise (<anonymous>)
at __awaiter (C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\out\src\chromeDebugAdapter.js:6:12)
at launch.then (C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\out\src\chromeDebugAdapter.js:52:74)
at <anonymous>
If you will see my launch.JSON file and there will be commented configuration array object which when uncommented results to
node --inspect-brk=28904 index.js
Debugger listening on ws://127.0.0.1:28904/463ec663-1802-496f-bfc9-5354559c655c
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Waiting for the debugger to disconnect...
Please let me now how can I launch a Chrome instance while developing the Puppeteer application in NodeJS.
I've created the workspace of the VSCode project and made the app.js file as the main file of the app, then add this to the setting JSON file and everything's going well.
It's my workspace setting JSON file of my project.
{
"folders": [
{
"path": "my-project"
}
],
"settings": {
"editor.tabSize": 2,
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"eslint.autoFixOnSave": true
},
"launch": {
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/app.js"
}
],
"compounds": []
}
}
Hope it'll help you.
Works great for me like that:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"name": "node launch",
"request": "launch",
"program": "${workspaceFolder}/index.js"
}
]
}
Related
I tried to run my discord.js code and the came an Pop-Up after I killed the node process in the task manager
Here is my launch.json file code:
{
// 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": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/Bot/main.js"
}
]
}
You can try editing the launch.json file code to include your NodeJS path:
{
// 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": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/Bot/main.js",
"runtimeExecutable": "---YOUR NODE JS PATH---"
}
]
}
Also, for this kind of issue simply restarting the system might work.
I'm trying to run the debugger in VS Code on my nodejs application. I'm using an .env file to store environment variables that I later call with process.env.. When I looked up the VS Code docs for the launch.json, it mentions the envFile option to load the the .envFile. Unfortunately, this is not loading the files when I run the debugger.
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "RegressionTestSuite",
"autoAttachChildProcesses": true,
"program": "node ${workspaceFolder}/node_modules/.bin/cucumber-js",
"args": [
],
"envFile": "${workspaceFolder}/.env"
},
]
}
.env:
export SCREEN_SIZE_WIDTH='1366';
export SCREEN_SIZE_HEIGHT='768';
When I run the VS Code debugger, there are no environment variables from my .env file. How should I be calling the .env file in the launch.json?
You can try this to load the env 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": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}\\Chat\\server.js",
"envFile": "${workspaceFolder}\\Chat\\.env"
}
]
}
I would use the dotenv package to load your .env file, as it can be used by people who aren't using VS Code as well. If you want to include it in your VS Code config, you could do:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "RegressionTestSuite",
"autoAttachChildProcesses": true,
"program": "node -r dotenv/config ${workspaceFolder}/node_modules/.bin/cucumber-js",
"args": []
},
]
}
Your problem could also be that your .env file should not contain export and semi-colons, as it is not a JavaScript/shell file:
SCREEN_SIZE_WIDTH=1366
SCREEN_SIZE_HEIGHT=768
I'm using a nodejs server side api, setting up environment variables with dotenv npm package, and running the code from npm scripts in package.json as below:
"scripts": {
"local": "cross-env NODE_ENV=local nodemon ./bin/www"
}
What I need is to configure my .vscode/launch.json file.
Currently it looks like:
{
// 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": []
}
Kindly guide me. Thanks,
Gopal.R
dotenv npm package
Visual Studio Code - Launch configurations
You would want to set the .dotenv environmental variable up like:
NODE_ENV=local
Then to require it in your debugger, you would want to add it into your launch.json configurations like:
"runtimeArgs": [
"--require=dotenv/config"
]
Here it is in context:
{
// 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": [
{
"type": "node",
"request": "launch",
"name": "Launch | local with dotenv config",
"program": "${workspaceFolder}/bin/www/your_script.js",
"runtimeArgs": [
"--require=dotenv/config"
]
}
]
}
--require=dotenv/config is the equivalent of running require('dotenv').config() in your script or node -r dotenv/config your_script.js if you're using the command line.
Here are some alternate examples of where environmental variables can be placed in the config.
{
// 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": [
{
"type": "node",
"request": "launch",
"name": "Launch | local using env file",
"program": "${workspaceFolder}/bin/www/your_script.js",
"envFile": "${workspaceFolder}/.env"
},
{
"type": "node",
"request": "launch",
"name": "Launch | local without dotenv",
"program": "${workspaceFolder}/bin/www/your_script.js",
"env" : {
"NODE_ENV" : "local"
}
}
]
}
Note: This code hasn't been tested... so feedback is welcome.
I had the same question for typescript debugging and I found answer here. Need to specify runtimeArgs and envFile parameters to make it work.
Example of launch.json for TypeScript debugging:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/src/server.ts",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": [
"${workspaceFolder}/built/**/*.js"
],
"runtimeArgs": [
"--require=dotenv/config"
],
"envFile": "${workspaceFolder}/.env"
}
]
}
I'm learning Protractor. I'm using VS Code and have a simple Protractor program. It runs fine from the command line: protractor config.js -- but -- when I try to run it from inside VS Code, by pressing F5, I get ReferenceError: describe is not defined.
What am I missing?
Thanks for any help.
// conf.js
exports.config = {
framework: 'jasmine',
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js'],
capabilities: {
browserName: 'chrome'
}
}
// spec.js
describe('Protractor Demo App', function() {
it('should have a title', function() {
browser.get('http://juliemr.github.io/protractor-demo/');
expect(browser.getTitle()).toEqual('Super Calculator');
});
});
{
// launch.json
// 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": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/spec.js"
}
]
}
Some wrong configuration in your launch.json, try below one:
{
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/node_modules/protractor/built/cli.js",
"cwd": "${workspaceFolder}",
"args": [
"config.js",
]
}]
}
${workspaceFolder} represents the folder VSCode opened, it expect to be your project folder.
Loving Grommet and vscode. Trying to get them to play together. I am able to get Express and vscode working as shown here. I would like to get the grommet-cli sample app to work similarly. Express has one command to start: "npm start" where grommet-cli has two: "npm run dev-server" and "npm run dev" (not sure how to start them both in vscode. I think I may need multi-session debugging?). How do I setup launch.json to debug the sample app? I'd like to be able to debug in IE/Edge. I've had some success in Chrome with the Debugger for Chrome extension.
Here is my current launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}
This appears to resolve the issue. Hopefully, it's been added to the latest version of VS.
"compounds": [
{
"name": "Node+Browser",
"configurations": [ "Server", "Browser" ]
}
],
"configurations" [
{
"name": "Browser",
"type": "chrome",
//...
},
{
"name": "Server",
"type": "node",
//...
}
]