JS breakpoints not binding in Visual Studio Code + Chrome

Question

first question here...

I’m having a hard time with debugging JavaScript with VS Code and Chrome. I used to have the “Debugger for Chrome” extension installed and it worked perfectly. However, after VS Code embedded this functionality and deprecated the extension, my breakpoints are not binding anymore. Once the page is loaded, they are greyed out, showing as unbound. If I click the “Toggle Activate Breakpoints” icon, then they start to work. If the page is reloaded, I must do it again, quite a pain…

I tried both “launch” and “attach” in either Chrome or Edge, same problem.

I have a Win11 machine and my project runs on the “C:\wamp64\www\sistemas\felina\” folder. This is my launch.json:

"version": "0.2.0",
"console": "integratedTerminal",
"configurations": [
    {
        "name": "teste",
        "type": "pwa-chrome",
        "request": "launch",
        "url": "http://localhost/sistemas/felina/TESTE.html",
        "webRoot": "${workspaceFolder}",
    },
]

I went to the Command Palette and run “Debug: Diagnose Breakpoint Problems”, here is the result:

debugger diagnose result

I am curious why it shows

“C:/wamp64/www/sistemas/felina/C:/wamp64/www/sistemas/felina/js/teste.js:5:1”.

The path is duplicated.

It says "You may need to adjust the webRoot in your launch.json if you're building from a subfolder, or tweak your sourceMapPathOverrides." but I have no clue on what to do.

I am using VS Code version 1.62.3 (the latest one).

Answer 1

So I eventually managed it, it was indeed related to paths. Here is how I solved it:

First of all, in my local server all projects are in this folder structure:

C:/wamp64/www/sistemas/projectA/

C:/wamp64/www/sistemas/projectB/

(..)

C:/wamp64/www/sistemas/projectZ/

However, I use one single virtual host, which points to "C:/wamp64/www".

I noticed here that many people actually create one virtual host per project. So after some trial and error, I came to two solutions:

Solution A: create one virtual host per project, pointing to the same path as VS Code's {workspaceFolder}. In this case, the path would be C:/wamp64/www/sistemas/felina. Here, launch.json would be like this:

"version": "0.2.0",
"console": "integratedTerminal",
"configurations": [
    {
        "name": "Launch Felina Site",
        "type": "pwa-chrome",
        "request": "launch",
        "url": "http://felinavirtualhost/login.html",
        "webRoot": "${workspaceFolder}",
    },
]

Solution B: use the same virtual host for all projects and hard-code its path as the webRoot in launch.json:

"version": "0.2.0",
"console": "integratedTerminal",
"configurations": [
    {
        "name": "Launch Felina Site",
        "type": "pwa-chrome",
        "request": "launch",
        "url": "http://localhost/sistemas/felina/login.html",
        "webRoot": "C:/wamp64/www/",
    },
]

Just for the records, I chose solution B, seemd less work to implement...