Hi, i created a new app using ionic start foo blank --type vue. After serving it using ionic serve I try to debug it using Chrome, and i can’t figure out the proper way to do it. Here is the scenario:
- There is no source code below localhost:8100, except for the generated JS files and an html
home file.
- I found my source code below
webpack://./src, but there is a lot of files with the name i’m looking for, as seen in the image (lots of Home.vue and App.vue). Only one of each really have the code i’m looking for and I can set breakpoints in these two files in order to debug. Is this correct? Why are there so many files in my tree?
When trying to use VS Code to debug, i installed ‘Debugger for Chrome’ extension, and created the following launch configuration:
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8100",
"webRoot": "${workspaceFolder}"
},
When I start this config, browser opens with my app, but I just can’t set breakpoints in order to debug. The breakpoints are shown as “Unbound breakpoint”
I already tried to follow the instructions under Docs/Troubleshooting/Debugging without success.
Anyone can help me?
Hi @aaronksaunders , sorry if i did a mistake. It´s my first post here and if I withdrawn it, it wasnt on purpose. I just edit it to correct some spelling.
By the way, I found a solution for my problem inside Vue.js docs
When using Ionic Vue it is necessary to set devtool parameter inside vue.config.js, as follows:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
Now, I have source maps inside webpack and can set my breakpoints.
you can debug straight in chrome without modifying anything… not sure why VS Code requires that?
I think it is because the file names. This is my Webpack by default, using Chrome Debugger:
Note that there is no Home.vue file in it. Instead, there are multiple Home.vue?xxxx. I can manually find which one has my source code and start debugging in Chrome, but VS Code can’t do it automatically because it is looking for Home.vue.
When I set the vue.config.js file properly, my Webpack becomes this:
Note that now I have a file named exactly Home.vue, so now I can map it inside VS Code using this directive under my launch configuration:
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
I have the same issue, but on a fresh Ionic project there is not any vue.config.js though. Where have you put that configuration?
The question still stands though, why all those files?
You have to put it at project root, as the following image. And about all the .vue?xxxx files, its a Vue business. They show up even in a brand new project generated with vue-cli wihtout ionic.
I did:
ionic start foo blank --type vue
cd foo
ionic serve
but no sourcemaps, see screenshot:
If I add a vue.config.js file with your code:
module.exports = {
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
}
I get an error:
[vue-cli-service] ERROR Invalid options in vue.config.js: "sourceMapPathOverrides" is not allowed
[ERROR] vue-cli-service has unexpectedly closed (exit code 1).
I tried both ts and js, what am I missing?
@dmedina2015 after hours of tinkering I improved the source maps with the following config in vue.config.js
let path = require('path')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'development') {
// See available sourcemaps:
// https://webpack.js.org/configuration/devtool/#devtool
config.devtool = 'eval-source-map'
// console.log(`NOTICE: vue.config.js directive: ${config.devtool}`)
config.output.devtoolModuleFilenameTemplate = info => {
let resPath = path.normalize(info.resourcePath)
let isVue = resPath.match(/\.vue$/)
let isGenerated = info.allLoaders
let generated = `webpack-generated:///${resPath}?${info.hash}`
let vuesource = `vue-source:///${resPath}`
return isVue && isGenerated ? generated : vuesource
}
config.output.devtoolFallbackModuleFilenameTemplate =
'webpack:///[resource-path]?[hash]'
}
}
}
No more duplicates in vue-source://
I followed your instructions and this is the result, with Ionic + React
I have no problems and do not have to change anything going crazy to chase advice left and right
I think I will abandon Vue, it is probably not a mature framework yet
this is the funniest thing I have read all day…
1 Like
if I have to go crazy to get debugging with vue I go back to React🙂
