如何在运行实时服务器的 Visual Studio Code 中调试 JavaScript

Question

尝试在 Visual Studio Code 中调试一个简单的 HTML 和 JavaScript 项目。在 VS Code 终端窗口中，“live-server”用于启动“index.html”。在 VS Code 中，安装并配置了“Debugger for Chrome”。即使在 Chrome 浏览器中启动页面后，调试器也不会附加并给出错误消息“无法连接到运行时进程，10000 毫秒后超时 - （原因：无法连接到目标：连接 ECONNREFUSED 127.0.0.1:9222） .'.

launch.json

"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "attach",
        "name": "Attach to Chrome",
        "port": 9222,
        "webRoot": "${workspaceRoot}",
        "urlFilter": "http://localhost:8080"
    },
    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against index.html",
        "file": "${workspaceRoot}/index.html"
    }
]

Chrome 的快捷方式被修改为包含--remote-debugging-port=9222

是否可以在 JavaScript 文件的 VS Code 中使用“live-server”并调试或设置断点？

Answer 1

为我工作：

1. 在你的 VS Code 上安装 Debugger for chrome 扩展。
2. 在您的 VS Code 上安装并激活 Live Server 扩展。
3. 按 F5 并选择 Chrome：

4. 检查您的Live Server端口*并更改生成的launch.json

5. 设置断点，运行 Live Server 并按 F5：

6. 享受:)

---

• 检查您的 Live Server 端口：

1. 安装 Live Server 并重新加载 VS Code。
2. 转到首选项 > 扩展 > Live Server 配置
3. 向下滚动以找到设置：端口，然后单击“在 settings.json 中编辑”。然后你会看到端口号。