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. :)
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 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 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 )