vscode debug vue-cli app cant set breakpoints in vscode

Udders 0
Viewed 26

I have a monorepo that looks similar to this,

- myapp
   - packages
     - web
     - components
     - libraries

The webroot of the app is myapp/packages/web when I run yarn serve in that file path I get the vue app running, what I want to do is debug the code in my vscode, but I can't seem to set breakpoints.

My launch.json looks like this,

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "webapp",
            "url": "http://localhost:8081",
            "webRoot": "${workspaceFolder}",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                    "webpack:///./*": "${webRoot}/*"
            },
            "skipFiles": [
                    "${workspaceFolder}/node_modules/**/*"
            ]
        }
    ]
}

If I set a breakpoint in myapp/packages/web/src/components/MyComponent.vue vscode tells me,

Some of your breakpoints could not be set

Is there a reason why? The project is a lerna mono repo so I pull in code from packages/components & packages/library also.

vue-cli debugging visual-studio-code vue.js
1 Answers

The structure and the website paths are different in a monorepo, in my case I got it working in TypeScript lib using WebPack and it took a lot of trials and errors. There's multiple things that can affect the debugger and I followed these

  1. I use the Chrome Debugger (even though it's deprecated, I still love it) and if you follow the instruction for this VSCode Chrome Debugger sourcemaps docs, I found that running .scripts in the VSCode debug console helped me a lot to find the correct path overrides
    • if you're confused on how to run the .scripts, you can check this old comment I posted a while ago which has a print screen of it
  2. if you're using TypeScript then the step 1 might not be enough and in my case it wasn't fully working until I added the browser property in my package.json and also make sure you also set the mainFields (see docs) property defined in webpack.config.js
    • note: the browser property can cause problems with some web applications (it did in my case) and I have a script that removes this property when publishing a new release and putting it back after the publish
// package.json
"browser": "src/index.ts",

// webpack.config.js
resolve: {
    extensions: ['.ts', '.js'],
    mainFields: ['browser', 'module', 'main'], // the order is important
}

My monorepo structure is different than yours, but my final launch.json setup can be seen below

my structure

root
 |- examples
    |- webpack-demo
 |- packages
    |- common
    |- graphql
    |- odata
    |- ...

and my launch.json config is the following (here is my own launch.json setup)

{
      "name": "Chrome Debugger",
      "type": "chrome",
      "request": "launch",
      "breakOnLoad": false,
      "url": "http://localhost:8888",
      "webRoot": "${workspaceRoot}",
      "userDataDir": "${workspaceRoot}/.chrome",
      "trace": true,
      "sourceMapPathOverrides": {
        "webpack:///${workspaceRoot}/packages/*": "${webRoot}/packages/*",
        "webpack://webpack-demo/../../packages/*": "${webRoot}/packages/*",
        "webpack:///./src/*": "${webRoot}/examples/webpack-demo/src/*",
        "webpack://webpack-demo/./src/*": "${webRoot}/examples/webpack-demo/src/*"
      }
    },

In summary, your config will be different than mine and running the .scripts should really help to find the correct override paths, I don't know any other ways of finding them. To see all of that in a real project, you can take a look at my open source project Slickgrid-Universal which is a TypeScript/WebPack Lerna monorepo (Lerna-Lite monorepo to be more precised). Hopefully this help a bit

ghiscoding0
Related