how to use Chrome Debugger with live server in Visual Studio Code

Question

I am currently using Visual Code Studio and I have Live Server and Debugger for Chrome extensions installed.

I am testing a simple.html file to see how the debug is working on VS Code as I am newly switching to.

I changed the url to "url": "http://localhost:5500" in launch.json file to use the Live Server port.

Now the issue: when I click go live, the browser opens http://127.0.0.1:5500/debug.html but when I click F5 to debug I am redirected only to http://127.0.0.1:5500 . Is there a way to redirect to full path in debug mode instead of adjusting the url manually each time to http://127.0.0.1:5500/'File Path' ? and if it's possible the page will be opened in new tab not new chrome window.

Any suggestions please what am I missing in my setup? I followed multiple threads and documentations but still can't make it work, example this and this .

Answer 1

Maybe you should define the .html file.

Here is an example:

{
    "port": 8181,
    "host": "0.0.0.0",
    "root": "/public",
    "open": false,
    "ignore": "scss,my/templates",
    "file": "index.html",
    "wait": 1000,
    "mount": [
        ["/components", "./node_modules"],
        ["/image", "./myImageFolder"]
    ],
    "logLevel": 2
}

I hope that helps, Please let me know if there is anything else. I can help you with.