vscode 在 WSL 上 - Chrome 调试失败

Question

我是 JS 开发的新手，刚刚开始介绍 JavaScript 课程。

我已经编辑了这个问题，因为我尝试了不同的方法

我正在尝试使用安装了 Windows Subsystem for Linux version 2 (WSL2) 的 Windows 10 机器。我有一个有效的 python 开发设置，但我完全无法获得一个有效的 JS 开发设置，我可以按 F5 和运行一个 Chrome 调试会话。

搜索了几个小时后，当我回到基础知识时，我不想做的只是为基本 index.html 文件获取一个有效的调试会话。任何人都可以发现我的错误吗？

目前，以下 launch.json 会启动 Chrome 浏览器，但我在 window.

浏览器中看到 This site can't be reached

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

也试过这个配置：

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

}

我安装了 Chrome 的调试器 - v4.12.12

在 vscode DEBUG CONSOLE 中，当我点击运行时看到这个错误：crbug/1173575, non-JS module files deprecated.。

我也尝试过使用和不使用我的 Bitdefender 防火墙运行ning 以防它出错，结果相同。

更新

除了“远程 - WSL”之外，还在 VSCode 中安装了“远程开发”扩展。
Node.js 调试工作正常...但我真的希望 Chrome 或 FireFox 工作
尝试将单词 localhost 换成 IP 地址...仍然没有。
新文件启动配置，见上文，新错误：Not allowed to load local resource: file:///__vscode-remote-uri__/home/USER/JS-dev/index.html

Answer 1

解决方法是：

安装 Live Server 扩展。这会将其安装在 VSCode 扩展下拉区域的 WSL: UBUNTU - INSTALLED 部分下。
编辑 Live Server 扩展 settings.json 文件以将 chromeDebuggingAttachment 设置为 true，如下所示： "liveServer.settings.ChromeDebuggingAttachment": true
如 Live Server 自述文件中所述，单击状态栏中的“GoLive”。这会将我的 index.html 文件放在浏览器选项卡中。
从菜单 Run --> Start Debugging 或 F5 到运行一个 Chrome 调试会话并且它有效。

一些有用的笔记：

我的 settings.json 位于：C:/Users/<MY-USER>/AppData/Roaming/Code/User/settings.json.

它适用于以下 launch.json 文件：

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

Live Server 扩展最后一次更新是在 2019 年，所以不是很好。我认为这使我的解决方案有点乱。
考虑到我尝试过的所有选项，我对此不起作用的唯一解释是远程开发扩展目前声明 WSL2 支持是实验性的。

vscode 在 WSL 上 - Chrome 调试失败

vscode on WSL - Chrome debug failing

javascript

visual-studio-code

windows-subsystem-for-linux

chrome-debugging

wsl-2