Unverified breakpoint debugging vue.js webpack app

[Michael-Liao]

Description

I followed this guide to setup debugging. However the breakpoints are not working.
this is my launch.json file

...
{
     "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "name": "Launch Vue App",
      "url": "http://localhost:8080/",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [
        { "url": "webpack:///src/*", "path": "${webRoot}/*" }
      ]
}
...

and my config/index.js

module.exports = {
  dev: {
    ...
    devtool: 'source-map',
    ...

Specifications

• vue-cli: 2.9
• firefox: 61.0.1 (Ubuntu edition)

[hbenl]

Your pathMappings are incorrect, this debug adapter doesn't use the same syntax as the Chrome debug adapter: remove the * at the end of url and path. In general, the most reliable way of creating pathMappings is through the "Map to local directory" context menu entry in the Loaded Scripts Explorer.

devtool: 'source-map'

I'm not sure what this means, but if this is the configuration of the webpack devtool (that's what it looks like), you should try switching to a different option because some webpack devtool options are broken, see webpack/webpack#5491.

[Michael-Liao]

thanks for the help, didn't know that some of the webpack source maps where broken. The following is a working example:
lauch.json

"version": "0.2.0",
  "configurations": [
    {
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "name": "Launch Vue App",
      "firefoxExecutable": "/home/michael/firefox-dev/firefox",
      "url": "http://localhost:8080/",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [
        {
          "url": "webpack:///src/",
          "path": "${webRoot}"
        }
      ],
      "skipFiles": [ // optional
        "${workspaceFolder}/node_modules/**"
      ]
    }
  ]

config/index.js shouldn't be modified.
While breakpoints work now, it still reacts weird in single file components.

[digitarald]

@Michael-Liao sounds like the main problem is fixed. For the JSX issue, can you re-test against the latest Firefox and re-open if the mapping issue persists?

[RemiDeWispelaere]

Hello

I have a similar issue and this solution does not work in my case. Here is some informations about my system :

firefox --version Mozilla Firefox 69.0.2

Visual Stdio Code Version : 1.38.1

And my projects :

.
├── e-learning-jooq-persistence
│   ├── pom.xml
│   ├── src
│   └── target
├── e-learning-jooq-strategy
│   ├── pom.xml
│   ├── src
│   └── target
├── e-learning-jooq-webservices
│   ├── pom.xml
│   ├── src
│   └── target
├── src
│   └── break.java

As you can see, I have multiple modules and a "src" folder for tests purpose. You can find in bold where are my breakpoints.

And here my .vscode/launch.json :

{
    // 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": [
        {
            "name": "Debug on Firefox",
            "type": "firefox",
            "request": "launch",
            "url": "http://localhost:4200/",
            "webRoot": "${workspaceFolder}/src",
            "pathMappings": [
                { 
                    "url": "webpack:///src/",
                    "path": "${webRoot}"
                }
            ]
        }
    ]
}

I've tried 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": [
        {
            "name": "Debug on Firefox",
            "type": "firefox",
            "request": "launch",
            "url": "http://localhost:4200/",
            "webRoot": "${workspaceFolder}/e-learning-jooq-webservices/src",
            "pathMappings": [
                { 
                    "url": "webpack:////e-learning-jooq-webservices/src/",
                    "path": "${webRoot}"
                }
            ]
        }
    ]
}

In both cases, all my breakpoints are mark "Unverified". I specify that I work on the backend with java code.

I guess the source-map cause that issue but I don't know what to do. If someone can help, I appreciate

[hbenl]

@RemiDeWispelaere try using the Loaded Scripts Explorer to add your pathMappings (and remove those that you already have) as described in the documentation.
If that doesn't work, please add "log": { "consoleLevel": { "PathConversion": "Debug" } } to your configuration and paste the log output here.

[RemiDeWispelaere]

I think I am missing something. I don't know wich url I need to map.
Here is some logs :

INFO |007.124|PathConversion: Can't convert url ng:///AppModule/NavigationBarComponent.html to path
INFO |007.125|PathConversion: Can't convert url ng:///AppModule/UpdateProfileComponent.html to path
INFO |007.125|PathConversion: Can't convert url ng:///AppModule/RecoveryPasswordComponent.html to path
INFO |007.125|PathConversion: Can't convert url ng:///AppModule/SocialSigninComponent.html to path
INFO |007.126|PathConversion: Can't convert url ng:///AppModule/ConfirmationDialogComponent.html to path
INFO |007.126|PathConversion: Can't convert url ng:///AppModule/QuizDialogModalComponent.html to path
INFO |007.126|PathConversion: Can't convert url ng:///RouterModule/ to path
INFO |007.127|PathConversion: Can't convert url ng:///AppModule/ to path
INFO |007.127|PathConversion: Can't convert url ng:///MatDialogModule/ to path
INFO |007.128|PathConversion: Can't convert url ng:///MatSnackBarModule/ to path
INFO |007.128|PathConversion: Can't convert url ng:///MatTooltipModule/ to path
INFO |007.128|PathConversion: Can't convert url ng:///MatDatepickerModule/ to path

And there are many others, with ng: and with webpack:.
I think I don't understand what I have to map with wich url

EDIT : I precise I am working on the backend code, the frontend code are in others folders

[hbenl]

look for URLs for files that contain javascript (usually files that end with .js or .ts), they probably start with webpack://.

EDIT : I precise I am working on the backend code, the frontend code are in others folders

when you say "backend code", do you mean code that runs on the server?

[StefanBrand]

This works for me, running Vue in a devcontainer:

        {
            "name": "Launch localhost",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "firefoxExecutable": "/usr/bin/firefox",
            "url": "http://localhost:8080/",
            "skipFiles": [
                "${workspaceFolder}/app/node_modules/**"
            ],
            "pathMappings": [
                {
                    "url": "webpack:///",
                    "path": "${workspaceFolder}/app/src/components/"
                }
            ]
        },