I am trying to attach my default grunt tasks to vscode debugger. So my desired workflow is I start the debugger and it runs the default grunt tasks and then I am able to put breakpoints in my code using vscode debugger. My launch JSON file looks like this.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/node_modules/grunt/lib/grunt",
"args": ["run"],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "production"
}
},
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 5858
}
]
}
But I am getting an error can't launch program 'node_modules/grunt/lib/grunt'; setting the 'outfiles' attribute might help
If you want to debug your compiled code, you have to define the build task in tasks.json and then specify it as a preLaunchTask in your launch.json configuration.
Also remember to augment your build config so it outputs source maps. With source maps, it is possible to single step through or set breakpoints in the original source.
You need to configure the tasks in a tasks.json file (located under your workspace .vscode folder). If you don't already have a tasks.json file, running the Tasks: Configure Task Runner action from the Command Palette (⇧+⌘+P on macOS or F1 on Windows/Linux) will offer you a set of templates to pick from. Select Grunt from the list and it will generate a file that should look like this:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "grunt",
"isShellCommand": true,
"args": ["--no-color"],
"showOutput": "always"
}
now you can define your build task:
{
...
"showOutput": "always",
"tasks": [
{
"taskName": "build",
"args": [],
"isBuildCommand": true
}
]
Assuming that your Grunt builds your app from src/app.js to dist, you can define your launch configuration like this:
{
"type": "node",
"request": "launch",
"name": "Launch",
"program": "${workspaceRoot}/src/app.js",
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/dist/**/*.js"],
"preLaunchTask": "build"
}
You can read more in the VS Code documentation - Node.js Debugging in VS Code.
Related
I am trying to debug the code. Debugging my own code, which runs in Chrome, is possible. My code makes use of an external API and unfortunately i can not prevent my Debugger from stepping into the API's code.
My debugger always steps from my main.js to the Viewer3D.js file which is located at developer.api.autodesk.com/**/*.js. Then my callStack gets so big, that debugging is impossible.
I added
"developer.api.autodesk.com/**/*.js"
to my launch.json but it still doesn't work. I always get into this file.
This is how my launch.json 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": [
{
"name": "Clientseitiges Debuggen",
"port": 9222,
"request": "attach",
"type": "chrome",
"webRoot": "${workspaceFolder}/wwwroot",
"skipFiles": ["<node_internals>/**",
"developer.api.autodesk.com/**/*.js"],
"resolveSourceMapLocations": [
"${workspaceFolder}/**",
"!**/node_modules/**"
]
},
{
"name": "debug meinen viewer",
"port": 9229,
"request": "attach",
"skipFiles": ["<node_internals>/**"],
"type": "node"
},
{
"type": "node",
"request": "launch",
"name": "Launch meinen Viewer",
"runtimeExecutable": "npm",
"runtimeArgs": ["start"],
"envFile": "${workspaceFolder}/.env",
"skipFiles": ["<node_internals>/**/*.js"]
}
]
}
since half an hour I work on the electron-Quick-Start-Tutorial. Like the docs told me, I created the filestructure like this:
package.json
main.js
index.html
Departing from the docs I did changes on the launch.json to make my project start on F5 in Visual Studio Code:
"type": "node",
"request": "launch",
"name": "Programm starten",
"program": "${workspaceRoot}/main.js",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"runtimeArgs": [
"--enable-logging"
]
My oncklick()-functions reside in index.js, that is referenced in index.html:
<script src="index.js"></script>
It's all fine, but how can I make my index.js-breakpoints work within VSC?
Main.js-breakpoints stop as they should.
Thx
piccus
can you change your launch.json like this and check this document
http://electron.rocks/debugging-electron-in-vs-code-revised/
{
"name": "Debug",
"type": "chrome",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"runtimeArgs": [
"${workspaceRoot}",
"--enable-logging",
"--remote-debugging-port=9222"
],
"sourceMaps": false
}
btw if its not a typo can you change your oncKlick function to onclick()
I have started using Jasmine (not Karma yet) with Visual Studio Code.
Works nicely with the following config:
{
"version": "0.2.0",
"configurations": [
{
"name": "jasmine",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/jasmine/bin/jasmine.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
}
}
]
}
Now my tests are building up I wanted to know if there was a way to just run a specific test or a tests within a specific file? At the moment all my tests are running which take a while.
The same way as from the cli would be the simplest option
(since Jasmine 2.1: fit, fdescribe)
See How do I focus on one spec in jasmine.js?
Steps to Reproduce:
Create folder with app.js file (with several javascript lines).
Create default launch.json
Run debugger.
Visual Studio Code doesn't start debugger (seems, tries to execute node.exe from HPC package)
DEBUG CONSOLE output:
node --debug-brk=37183 --nolazy app.js
Node Commands
Syntax:
node {operator} [options] [arguments]
Parameters:
/? or /help - Display this help message.
list - List nodes or node history or the cluster
listcores - List cores on the cluster
view - View properties of a node
online - Set nodes or node to online state
offline - Set nodes or node to offline state
pause - Pause node [deprecated]
resume - Resume node [deprecated]
For more information about HPC command-line tools,
see http://go.microsoft.com/fwlink/?LinkId=120724.
launch.json content:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"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": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
},
{
"name": "Attach to Process",
"type": "node",
"request": "attach",
"processId": "${command.PickProcess}",
"port": 5858,
"sourceMaps": false,
"outDir": null
}
]
}
VSCode Version:
OS Version: windows7
VSC developer suggests next possible ways:
change your PATH so that the correct 'node' will be found first. You
can verify which node is found on the path by running where node in a
command prompt.
find the correct 'node' on your system and then add a
runtimeExecutable attribute with the absolute path to your 'node' to
your launch config
I updated launch.json file and it solved the issue
"runtimeExecutable": "C:\\Program Files\\nodejs\\node.exe",
https://github.com/Microsoft/vscode/issues/11540
I'm trying to setup Visual Studio Code for debugging Angular. If I just use the out-of-the-box version of launch.json and point it to the /js/app.js file, it returns:
ReferenceError: angular is not defined
So, I tried to use gulp-connect to start a server. This starts the app just fine, but the debugger isn't attached and it never stops at breakpoints.
Can someone show me how to debug an angular web with VS Code?
PS. Here is my launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Debug with gulp.js",
"type": "node",
"request": "launch",
"program": "js/app.js",
"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
}
]
}
Okay, with the help of the #code folks, I got it working. I'm now able to fully debug an Angular client from the IDE! Hopefully, this will help someone else...
First, you need to download the "Debugger for Chrome Extension." You do this by typing this:
F1
ext Install Extensions
debug (then select Debugger For Chrome)
Once that is installed, I used MSFT's instructions found here:
https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome
I only can get the "attach" method working, so I use that with Chrome. Here is the final version of the launch.son file I use:
{
"version": "0.2.0",
"configurations": [
{
// Use this to get debug version of Chrome running:
// /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
"name": "Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"webRoot": "./www"
}
]
}
Also, don't forget to start Chrome in debug mode with this (for Mac):
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222