How to proper debug Ionic Vue in Chrome and VS Code

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:
image
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:
image
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}/*"
}