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 )
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 coding a CLI project in vue using VS code and trying to get my debugger setup properly, but I can't seem to get the proper overrides setup for webpack. My workspace folder is Project and I have two sub folders api for my server code and client for my vue code. The following launch.json setting seem to stop my code in the correct place, but the little debugger dots jump up 3 lines when I start it up.
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/client/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///*": "${webRoot}/*",
"webpack:///./*": "${webRoot}/*",
"webpack://./src/*": "${webRoot}/*"
}
}
]
}
I am also using vue router if that makes a difference.
My issues is, that VSC does not brake on a brake-point while debugging PhantomJS file..
There is only 1 js file. ! I did re-installed VSC, phantomjs, etc.. But no luck.?!
I did followed tutorial on GitHub, also googled about this issue, but still VSC just displays:
Unverified breakpoint, Breakpoint ignored because generated code not found (source map problem?)
My launch.json looks like this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "phantomjs",
"request": "launch",
"file": "C:/Users/TSS/Desktop/PhantomJS/bin/hello.js",
"webRoot": "C:/Users/TSS/Desktop/PhantomJS",
"runtimeExecutable": "C:/Users/TSS/Desktop/PhantomJS/bin/phantomjs.exe",
"runtimeArgs": [],
"scriptArgs": [],
"sourceMaps": true
}
]
}
Folders structure is also very simpple:
I just downgraded to older VSC version and it works.. For some reason !
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
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.