5

I have recently moved over to Vuejs3 and my debugging setup stopped working. The breakpoints don't get triggered. I am using the same config files as before and not sure if something changed with this release.

  • Debugger for Chrome Extension: v4.12.12
  • VsCode: 1.56.2
  • Vue CLI v3
  • Platform: Ubuntu 20.04.2 LTS

launch.json

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "vuejs: pwa-chrome",
        "type": "pwa-chrome",
        "request": "launch",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*"
        }
      },
      {
        "name": "vuejs: chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*"
        }
      }
    ]
}

vue.config.js

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}
ucipass
  • 923
  • 1
  • 8
  • 21
  • Setting breakpoints in Chrome works and triggers a break in vscode. However vscode still claims for its breakpoint that "Breakpoint set but not yet bound" – ucipass Jun 12 '21 at 14:37

5 Answers5

9

I had to change my launch.json file to the below. Apparently the pwa- prefix is a way to target VS Code's new JavaScript debugger. See stackoverflow discussion. The old debugger no longer works on this platform. Hope this will help somebody.

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
    }
    ]
}
ucipass
  • 923
  • 1
  • 8
  • 21
0

I was in similar situation and couldn't find relevant resolutions:

Quick Answer: After upgrade to VS Code 1.56.2, make sure to remove old breakpoints and create new breakpoint and at-least have 1 breakpoint and launch.json available.

Lengthy details:

I have similar issue for python scripts when I start the "debugger bar" I see it for a couple of seconds the top debugging bar and then it disappears. Bu then no message on the console, nothing. I tried reinstalling VS Code, enabling/disabling extension, various restart.

  • OS and Version: Mac OSX Version 11.4 (20F71)
  • VS Code Version: 1.56.2
  • Extension: Python v2021.5.842923320 by Microsoft

RootCause:

What I did know for sure that I updated my VS Code, and after that this mysterious issue start happening, so when to release log of VS Code 1.56.2. I found below release log

Debug view displayed on break#

The default value of the debug.openDebug setting is now openOnDebugBreak so that on every breakpoint hit, VS Code will open the Debug view. The Debug view is also displayed on first session start.

So VS code Version 1.56 release, debugger will only show when at-least 1 breakpoint is found. However, looks like there is issue with their internal code checking for historical breakpoint data after VS Code upgrade..

https://code.visualstudio.com/updates/v1_56#_debug-view-displayed-on-break

user2577923
  • 206
  • 1
  • 5
  • I have removed all breakpoints restarted everything and reset the breakpoints. Still does not work. When I set the breakpoint in Chrome it actually triggers the hold. Also my breakpoint claims "Breakpoint set but not yet bound" – ucipass Jun 12 '21 at 14:36
0

Add 2 paths in the sourceMapPathOverrides. It is working for me.

"sourceMapPathOverrides": {
  "webpack:///./src/*": "${webRoot}/*",
  "webpack:///src/*": "${webRoot}/*",
}
Rishi
  • 1
0

Works after removing sourceMapPathOverrides:

            // "sourceMapPathOverrides": {
            //   "webpack:///src/*.vue": "${webRoot}/*.vue",
            //   "webpack:///./src/*.js": "${webRoot}/*.js",
            // }
dandan
  • 123
  • 1
  • 6
0

Since everyone uses different vue-cli versions and webpack versions, I will provide a more efficient solution here. You can configure the writeToDisk field in your devServer to be true, like this:

webpack5:

devServer: {
    devMiddleware: {
      writeToDisk: true,
    },
  },

webpack < 5:

devServer: {
    writeToDisk: true
  }

You also need to change your source-map configuration to devtool: 'source-map' instead of devtool: 'cheap-module-eval-source-map' The faster sourceMap format will cause more information to be lost, making your VScode unable to determine the resource path.

Then, after you execute npm run dev, there will be an extra dist folder in your project which contains source-map files,

the source-map files Include the following fields:

 "sources": [
        "webpack://mydeb/./src/App.vue?01fe",
        "webpack://mydeb/./src/components/HelloWorld.vue?774b",
        "webpack://mydeb/./src/App.vue?763f",
        "webpack://mydeb/./src/components/HelloWorld.vue?6c98",
        "webpack://mydeb/src/App.vue",
        "webpack://mydeb/src/components/HelloWorld.vue",
        "webpack://mydeb/./src/App.vue",
        "webpack://mydeb/./src/components/HelloWorld.vue",
        "webpack://mydeb/./src/main.js",
        "webpack://mydeb/./src/App.vue?81d5",
    ]

mydeb is the name field I configured in the package, According to this information, I configure launch.json like this:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack://mydeb/src/*.vue": "${webRoot}/src/*.vue",
                "webpack://mydeb/./src/*.js": "${webRoot}/src/*.js",
            }
        }
    ]
}
BIUBIU UP
  • 1
  • 1