[Help] Vscode debugger for firefox is all buggy

I am trying to debug from vscode a vue 3 with TS and vite project using firefox

As stated in the Debugger for firefox extension page i did:

open the Developer Tools Settings and check the checkboxes labeled "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging"

and executed Firefox as follows

"C:\Program Files\Mozilla Firefox\firefox.exe" -start-debugger-server

The problem is that the debugger is all buggy and doesn't hit the correct line

Here is my launch.json (the one for chrome works perfectly well)

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}",
            "urlFilter": "http://127.0.0.1:4000/*"
        },
        {
            "name": "Attach to Firefox",
            "type": "firefox",
            "request": "attach",
            "url": "http://127.0.0.1:4000",
            "webRoot": "${workspaceFolder}",
            "pathMappings": [
                {
                    "url": "http://127.0.0.1:4000/src",
                    "path": "${workspaceFolder}/src"
                }
            ]
        }
    ]
}