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
localhost
for the IP address... still nothing.Not allowed to load local resource: file:///__vscode-remote-uri__/home/USER/JS-dev/index.html
Solution is:
WSL: UBUNTU - INSTALLED
section of the the VSCode extensions drop down area.settings.json
file to set chromeDebuggingAttachment
to true, like this: "liveServer.settings.ChromeDebuggingAttachment": true
index.html
file in a browser tab.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.