Unable to launch debugger

[skysantoroa]

🐛 bug report

I'm unable to attach a debugger via VSCode launch configuration using Edge or Firefox.

🤔 Expected Behavior

The debugger should hit the breakpoints.

😯 Current Behavior

When launching Firefox by adding a new breakpoint VSCode will create a pop up message saying

This file's path isn't mapped to any url that was loaded by Firefox. Either this file hasn't been loaded by Firefox yet or your debug configuration needs a pathMapping for this file - do you think the file has already been loaded and want to let the Path Mapping Wizard try to create a pathMapping for you?

If you click Yes it will add the following lines to the configuration

"pathMappings": [
                {
                    "url": "http://localhost:1234/__parcel_source_root/src",
                    "path": "${workspaceFolder}/src"
                }
            ]

Both with Edge and Firefox all breakpoints are greyed out.

💻 Code Sample

To reproduce clone this repo https://github.com/skysantoroa/parcel-hmr-not-working and start the application with npm start

🌍 Your Environment

Software	Version(s)
Parcel	2.5.0
Node	16.14.0
npm/Yarn	8.3.1
Operating System	Windows 11
Firefox	100.0 (64-bit)
Edge	101.0.1210.32 (Official build) (64-bit)

[mischnic]

Does this help? https://parceljs.org/recipes/debugging/#visual-studio-code

[skysantoroa]

Does this help? https://parceljs.org/recipes/debugging/#visual-studio-code

It doesn't. I'm using the exact same configuration https://github.com/skysantoroa/parcel-hmr-not-working/blob/master/.vscode/launch.json

[skysantoroa]

I switched to Ubuntu 22.04. Using this configuration:

{
            "name": "local: launch client debug",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "url": "https://localhost:1234/ponos-be",
            "webRoot": "${workspaceFolder}/component/ponos/client",
            "skipFiles": [
                "<node_internals>/**/*.js"
            ],
            "pathMappings": [
                {
                    "url": "file:///__parcel_source_root/src",
                    "path": "${workspaceFolder}/component/ponos/client/src"
                }
            ]
        }

The breakpoints are ~no more~ still greyed out and the debugger won't hit them. Getting no errors from VSCode.

[skysantoroa]

This configuration works for Chrome

        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:1234",
            "webRoot": "${workspaceFolder}",
            "pathMapping": {
                "/__parcel_source_root/src": "${workspaceFolder}/src"
            }
        }

[skysantoroa]

After several trials this is a working Firefox configuration

        {
            "name": "Launch Firefox debug",
            "type": "firefox",
            "request": "launch",
            "url": "http://localhost:1234/",
            "pathMappings": [
                {
                    "url": "file:///__parcel_source_root/src",
                    "path": "${workspaceFolder}/src"
                }
            ]
        }

If VSCode isn't hitting the breakpoints delete them, reapply after launch and then refresh the page. Unfortunately I'm not sure if on Windows 11 this is working as I have no longer access to that environment.