I am using Babel in my Mocha tests. To run the test in terminal I use following command:
mocha --debug --compilers js:babel/register
Then I can use VS Code "Attach" debugging option to attach to the test process. I can set breakpoints and it stops, but because original code is in ES6 VS Code gets confused about line numbers and such.
Is there anyway to make VS Code work with this setup?
My "Attach" config:
{
"name": "Attach",
"type": "node",
// TCP/IP address. Default is "localhost".
"address": "localhost",
// Port to attach to.
"port": 5858,
"sourceMaps": false
}
"sourceMaps": true doesn't make any difference
The project I'm trying to run the test is open source. GitHub repo: https://github.com/mohsen1/yawn-yaml/
I got mocha running with babel locally using this config:
"configurations": [
{
"name": "Debug Mocha",
"type": "node",
"program": "./node_modules/.bin/_mocha",
"stopOnEntry": false,
"args": ["--compilers", "js:babel-register"],
"cwd": ".",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": true,
"outDir": null
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}
]
Which uses the _mocha executable since node is already invoked by Code. Also, make sure you have sourceMaps set to true.
Related
I have been using VSCode for a few months and have not been able to find a way to consistently debug a simple VueJS app. The main issue I keep encountering is the Unbound breakpoint whereby the breakpoints I set are unreachable.
I have tried the many launch.json configs including the ones below with no success:
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"name": "Attach hm",
"port": 9229,
"request": "attach",
"skipFiles": ["<node_internals>/**"],
"type": "pwa-node",
"address": "localhost:8080",
"localRoot": "${workspaceFolder}/src"
}
A few weeks ago I stumbled on the following config which magically solved my problem and I was happily debugging for days:
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMaps": true
}
After taking a few days off coding, I came back to VSCode yesterday, there was the 1.47.2 update waiting. Did that, wrote a few lines of code, tried debugging like i was doing before and boom! the Unbound breakpoint problem from hell returned.
Check my commits, no changes to launch.json, no new install, updates whatsoever.
Why on Earth diid this thing stop working???
One thing to note is that I can perfectly debug in VSCode the server portion of my app (a node/express REST server) with no problem at all.
Very frustrating and I really do not want to go back to debugging using Chrome's DevTools.
Could anyone help?
thank you.
I experienced may times similar issues.
Have you found a solution?
My launch.json file is:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"pathMapping": {
"/_karma_webpack_": "${workspaceFolder}"
},
"sourceMapPathOverrides": {
"webpack:/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
}
}
]
}
Most of times it works but I still experience weird behaviors.
Also you should always start VS Code from within the folder containing the VUE project (outside /src).
I am developing some vue cli plugins like vuetify's to create a boilerplate to other developers, but sometimes I need to debug it. I am really tired of using console.log. How can I debug this kind of plugins especially with vscode?
Ok it's done.
I just added to main project's package.json > scripts object these lines (not the cli plugin's itself package.json)
"debug:cli": "node --inspect-brk --preserve-symlinks ./node_modules/.bin/vue invoke vue-cli-plugin-hello-world",
"debug:vueui": "node --inspect --preserve-symlinks ./node_modules/.bin/vue ui"
(Also you can use local vue cli service with ./node_modules/.bin/vue-cli-service path. Global vue cli service is different.)
When I trigger it via yarn run debug:cli or debug:vueui, I can debug them with chrome://inspect or vscode (cmd shift p > attach node process)
Also if you want to debug it with vscode directly, here is my vscode launch.json file.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug my vue cli plugin",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"debug:cli"
],
"console": "integratedTerminal",
"port": 9229
},
{
"type": "node",
"request": "launch",
"name": "Debug Vue UI",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"debug:vueui"
],
"console": "integratedTerminal",
"port": 9229
}
]
}
I'm working on my React Native app in VS Code, with the React Native Tools debugger running on "Debug in Exponent". Live reloading works, but when I enable hot reloading (after disabling live reload), hot reloading doesn't happen.
I'm sure you'd like to see various settings. Not sure what's important so here's some things:
// relevant debug config from launch.json
{
"name": "Debug in Exponent",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "exponent",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
}
// .expo/packager-info.json
{
"devToolsPort": 19002,
"expoServerPort": 19000,
"packagerPort": 8081,
"packagerPid": null,
"expoServerNgrokUrl": "https://zr-j4p.tuzmusic.tuz1app.exp.direct",
"packagerNgrokUrl": "https://packager.zr-j4p.tuzmusic.tuz1app.exp.direct",
"ngrokPid": 5404
}
// .expo/settings.json
{
"hostType": "lan",
"lanType": "ip",
"dev": true,
"minify": false,
"urlRandomness": "zr-j4p"
}
Is it possible to configure VS code to debug seamlessly solutions with server code in ASP.NET Core and JS files in Chrome.
Something available in full VS (unfortunately only in IE).
I can put breakpoints on both JS files and CS files.
Thanks for help!
Create one configuration for the ASP.NET Core application and another one for Chrome (you need the Debugger for Chrome extension). Then create a composite launch configuration.
When you start debugging using the composite configuration you will be able to debug the ASP.NET code as well as the Javascript/Typescript code in the same Visual Studio Code instance. You can also launch each configuration manually and it should work.
Your launch.json file should look something like this (with an ASP.NET Core application called myapp):
{
"version": "0.2.0",
"compounds": [
{
"name": "Browser/Server",
"configurations": [
"Server",
"Browser"
]
}
],
"configurations": [
{
"name": "Server",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
"program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/myapp.dll",
"args": [],
"cwd": "${workspaceRoot}",
"env": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"sourceFileMap": {
"/Views": "${workspaceRoot}/Views"
}
},
{
"name": "Browser",
"type": "chrome",
"request": "launch",
"url": "http://localhost:5000",
"webRoot": "${workspaceRoot}/wwwroot"
},
]
}
Simple way :
Close IE but debuging are Running
Choose Lunch Chrome (must config lunch.json URL same )
i have made a simple CRUD app using
express: 4.13.4
gulp: 3.9.1
mongodb :v3.0.6
reactjs : 15.0.2.
node : 4.0.0
For server side code i hear it is possible to debug via Visual Studio Code (v1.1.1.).
From git bash i start the app via gulp serve.But i am at a loss to find out how to Start debugging!
A snippet of my gulp task.
gulp.task('serve',['bundle','start-server'],function(){
browserSync.init({
proxy:'http://localhost:3000',
port:9001
});
});
When we click the debug button on VS Code to launch the debug interface, we r presented with a launch.json , where we have two configuration options.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}",
"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": 3000,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
}
]
}
i am guessing these are launch and attach configs. But how do we actually lauch gulp via debug.
i have seen people launch grunt process by modifying the "program" key as "program": "/usr/local/bin/grunt". But it seems i am not able to do that for gulp
Even when i have launched my app via git bash and try to 'attach' the debugger as mentioned here , vs code just shows an error message saying 'Cancelled' !
TLDR;
how do we kick start gulp (or) grunt (or) start the server when we launch debugging in VS code?
is it possible to launch the app externally via cmd or bash and still be able to debug server side code using the debugger? if so , what changes are needed in launch.json?
Allrighty, numerous bookmarks and links later i have finally succeeded in debugging via launch and attach.
Debug via launch config:
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/server.js",
"stopOnEntry": true,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
}
on pressing the green > button on the VSC debug view with launch option selected in the dropdown, you should see something like this in the VSC console.
node --debug-brk=21735 --nolazy server.js
And a the debugger should pause on the first line of your server.js file.
Debug away with breakpoints ! :)
Debug via attach config:
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
}
Start your server externally
$node --debug-brk server.js
You prompt should be paused at
Debugger listening on port 5858
Press the green > button on the VSC debug view with attach option selected in the dropdown , the debugger should automatically attach itself and pause at the first line of server.js
Debug Ad nauseam