Vue component unverified breakpoints

[Metal-spoon]

Breakpoints in my vue component are all unverified launch.json is as follows:

"version": "0.2.0",
"configurations": [
    {
        "type": "firefox",
        "request": "launch",
        "name": "vuejs: firefox",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}",
        "log": {
            "fileName": "${workspaceFolder}/log.txt",
            "fileLevel": {
                "default": "Debug"
            }
        },
        "pathMappings": [
            {
              "url": "webpack:///src",
              "path": "${webRoot}"
            }
          ],
          "skipFiles": [ // optional
            "${workspaceFolder}/node_modules/**"
          ]
    }
]

Tried numerous pathmapping configs but none seem to work with any component. Using the loaded scripts tab and checking the logs it seems everything is being mapped correctly, even without pathMappings being set.

Oddly enough if i set a breakpoint in app.vue in the src folder it does actually work but no breakpoints in any file in the components folder work. Log attached for your pleasure.

log.txt

Other relevant info:

• using vue 3, whole app is typescript
• firefox 93.0
• extension version 2.9.4
• npm version 8.1.0
• everything on pop!_os 21.04 (basically ubuntu 21.04)

edit: forgot to mention, vue.config.js is set correctly to: module.exports = { configureWebpack: { devtool: 'source-map' } }

[JSteitz]

I have a similar issue. They are all unverified, but partially work.

In my tests, I noticed that all the breakpoints that are meant for a page load do not work. All the others work, although they are unverified.

Further I noticed that the breakpoint is removed on page load and later set again. The way I see it, however, they are set too late. In the logs you can see that.

Steps to reproduce:

1. set a breakpoint in any line
2. then add debugger; in a line after the breakpoint
3. reload/open page
4. breakpoint is skipped, but not debugger.

With this scenario, you can see in the logs that the breakpoint is not set again until after the pause event.

Line 79: breakpoint removal request Line 104: pause event received (for debugger) Line 133: setting breakpoint request

Log file: log.txt

[karelkral]

The same with React and Firefix greater then 93. Breakpoints do not work.

[TriMoon]

Are you guys using sourcemaps? See: Debugging in VS Code

@plastic-fork i just noticed your edit at end... Which bundler are you using?

• (rollup fe. needs different stuff)

  export default {
  	....
  	,output: [{
  		....
  		,sourcemap: true
  	}
  	,{
  		....
  		,sourcemap: true
  	}]
  }
  

[karelkral]

I am using WebPack 5.65.0 and devtool: "inline-source-map".

The debugger is broken in Firefox 98. It was working fine with older versions, I am stuck at Firefox 93. Not sure the exact version of Firefox when the debugger is broken.

[JSteitz]

@karelkral The debugger works. Please check that you use version 2.9.6 I had the same issue, because only 2.9.4 was downloaded for me. The tags are also missing in github.

[karelkral]

@JSteitz Yes, I have 2.9.6 version. Are you working with Webpack and Firefox 98 and debugger is ok? I have to downgrade to FF 93 4 days before. Not sure when the debugger stops working, I am switching from C# to Typescript after 2 months.

[JSteitz]

I'm using Rollup with source maps as a file. Shouldn't matter whether it is webpack or not. Maybe your path mappings are incorrect.

Did you try the path mappings wizard to set them?

[sxc731]

I had a similar issue and eventually became a little suspicious over the fact that my IDE was reporting Debugger for Firefox version as v2.9.1 (in the top header); even though further down in the README.md (ostensibly fetched from Github), the badge says v2.9.6!

I am using VSCodium and rather a noob at this IDE. I eventually figured out that it's using a different extensions marketplace to VSCode. I raised the issue with OpenVSX registry.

If you are in the same case, you can manually install the correct version by downloading a .vsix archive from the M$ marketplace and install it manually into VSCodium.