vscode on WSL - Chrome debug failing

Question

I'm brand new to JS development and just started an introduction to JavaScript course.

I've edited this question as I have tried different approaches

I'm trying to use my Windows 10 machine with Windows Subsystem for Linux version 2 (WSL2) installed. I have a working python development setup but I've completely failed at getting a working JS dev setup where I can hit F5 and run a Chrome debugging session.

Having search around for hours, I when back to basics and all I'm not trying to do is get a working debug session for a basic index.html file. Can anyone spot what I have wrong?

Currently, the following launch.json does launch a Chrome browser but I see This site can't be reached in the browser window.

{
"version": "0.1.0",
"configurations": [
    {
        "name": "Launch localhost",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost/index.html",
        "webRoot": "${workspaceFolder}"
    }
]}

Also tried this config:

{
"version": "0.1.0",
"configurations": [
    {
        "name": "Launch localhost",
        "type": "chrome",
        "request": "launch",
        "file": "${workspaceFolder}/index.html"
    }
]

}

I have the Debugger for Chrome installed - v4.12.12

In vscode DEBUG CONSOLE I see this error when I hit run: crbug/1173575, non-JS module files deprecated..

I've also tried this with and without my Bitdefender firewall running just in case it was at fault, same result.

UPDATE

• Installed "Remote Development" extension in VSCode, in addition to "Remote - WSL".
• Node.js debug works fine... but I really want Chrome or FireFox to work
• Tried swapping the word localhost for the IP address... still nothing.
• New file launch config, see above, new error: Not allowed to load local resource: file:///__vscode-remote-uri__/home/USER/JS-dev/index.html

Answer 1

Solution is:

1. Install the Live Server extension. This installs it under the WSL: UBUNTU - INSTALLED section of the the VSCode extensions drop down area.
2. Edit the Live Server extension settings.json file to set chromeDebuggingAttachmentto true, like this: "liveServer.settings.ChromeDebuggingAttachment": true
3. Click "GoLive" from the status bar as noted in the Live Server readme. This puts my index.html file in a browser tab.
4. To run a Chrome debug session from the menu Run --> Start Debugging or F5 and it works.

Some useful notes:

• My settings.json is located here: C:/Users/<MY-USER>/AppData/Roaming/Code/User/settings.json.

• It works with the following launch.json file:

    {
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:5500/index.html",
            "webRoot": "${workspaceFolder}"
        }
    ]}
  

• The Live Server extension was last updated in 2019, so not great. I think this makes my solution a bit of a hack.

• Considering all the options I tried, my only explanation for this not working in my case is that the Remote Development extension currently states WSL2 support is experimental.