javascriptvisual-studio-codewindows-subsystem-for-linuxchrome-debugging

vscode on WSL - Chrome debug failing


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


Solution

  • 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: