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.
Related
Probelm Statement:
I am trying to debug my vue application in VSCode.
The breakpoints are working for js files but in .vue files, they are marked as "Unbound breakpoints" and aren't working, that the debugger is not stopping there.
What I have done:
I have searched a lot of launch.js files settings and followed these two following stackoverflow questions:
Debugger settings for Chrome in VS Code with Vue.js
Debugging Vue in VScode and Chrome, unbound breakpoint
The best solution I found was to have the following launch.json file, but it claims to work for both js and other (including .vue) files,
BUT for me it is only working for js files NOT for .vue files:
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*",
}
}
]
}
Other Variations
I have also tried some other variations to above "sourceMapPathOverrides" property of launch.js file.
"sourceMapPathOverrides": {
"webpack:///src/*.vue": "${webRoot}/*.vue",
"webpack:///./src/*.js": "${webRoot}/*.js"
}
And
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*.js": "${webRoot}/*.js"
}
BUT ALL HAVE NO EFFECT. In each configuration, .js files are working fine with breakpoints but .vue files fiving unbound breakpoints.
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 generated an app using vue-cli 3.0.0-rc.3
Now I want to debug it using Visual Studio Code (Debugger for Chrome) however I can't seem to find the option to turn on sourceMaps.
I set the breakpoint in VSCode but it is not hit.
If I specify: "sourceMaps: true" in vue.config.js, I got an error "Invalid options in vue.config.js: "sourceMaps" is not allowed"
What option needs to be set for debugging to work?
According to the Official cookbook these steps needs to be done:
vue.config.js file has to be edited and add:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
then launch.json should look like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
After these steps breakpoints started to work as expected.
In addition to the above, I also had to follow the steps in this post: Visual Studio Code breakpoint appearing in wrong place
In particular, setting the sourceMapPathOverrides property. Finally got my breakpoints to work in Visual Studio Code using Vue.js. :)
I started moving from coding directly react-native project with Haxe.
Therefore the folder-structure has changed, that the react-native project files are in a subfolder of the current project.
When i do want to use the launch.json the output tells me (correctly) that there is no react-native npm package installed at root.
my launch.json looks like this now (tried to add rn-project-name) as a subfolder
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug iOS",
"program": "${workspaceRoot}/rn-project-name/.launch/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"target": "iPhone 5s",
"sourceMaps": true,
"outDir": "${workspaceRoot}/rn-project-name/.vscode/.react"
}
]
}
Has anyone ever had to solve something like this?
(I somehow do not understand how the launch.json sets up all neccessary file references)
I've managed to get it working. Just edit .vscode/settings.json adding the project root path:
{
...
"react-native-tools": {
"projectRoot": "path-to-your-rn-project"
}
}
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 )