I create a directory test and npm init in it. I write a simple code to index.js:
'use strict';
let i = 3*4;
console.log("HELLO TEST");
console.log("HELLO TEST");
With this in package.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/index.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
}
]
}
Now, I put a breakpoint at line two and run the code. Everything works as expected, I can step through the code line by line and see the values update (in this case, the value i updates) and write to the console after
Now I install npm install --save-dev babel-cli and modify the launch.json: "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node",
Now the debug line isn't aligned, it starts off here, and i isn't defined
The problem worsens when I add more lines:
i is still not defined!
A few days ago, I didn't have problems like this. I didn't change node versions. I might have changed VS code versions. Currently, I installed the latest version (1.3.1) and I get this problem. I also tried to revert to 1.2.1 and still have this problem.
I don't understand how I can get this to work again. It was perfect before! It's a big pain not to be able to debug correctly.
Related
I am working on the Odin project and I have arrived at the test driven part.
I am on windows, installed everything as instructed and I use VS code as my IDE.
Now, I use VS code debugger to run the tests i.e. for the first case hello world I run the debugger on the helloWorld.spec.js file.
The tests runs as expected ... but in fact it runs all the 14 tests not only the one I am working on. As I am curious to understand how it works I would like to succeed running only the test I am working on.
I searched on Google but I couldn't find an answer that make my quest a success.
Do you know how to achieve this ? My configuration is shown herebelow.
First, my structure :
Then, my debug config file
"version": "1.0.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest: current file",
//"env": { "NODE_ENV": "test" },
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": ["--runInBand", "--no-cache", "--watchAll=false"],
"console": "integratedTerminal",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest"
}
}
]
}
I also installed jest extension in VS code, in the hope to solve my issues and here are the settings for that extension :
"jest.autoRun": {
"watch": false,
"onSave": "test-src-file",
"onStartup": [
"all-tests"
]
},
"jest.debugCodeLens.showWhenTestStateIn": [
"pass",
"fail",
"unknown"
],
"jest.coverageFormatter": "GutterFormatter",
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.
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?
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