javascript - 如何在运行实时服务器的情况下在 Visual Studio Code 中调试 JavaScript

Question

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

启动.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 文件上使用“live-server”并在 VS Code 中调试或设置断点？

Answer 1

对我有用:

1. 安装并激活 Live Server VS 代码上的扩展。
2. 按 F5 并选择 Chrome:

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

1. 设置断点，运行 Live Server 并按 F5:

1. 享受 :)

---

• 检查您的实时服务器端口:

1. 安装 Live Server 并重新加载 VS Code。
2. 转到首选项 > 扩展 > 实时服务器配置
3. 向下滚动找到设置:端口并点击“在 settings.json 中编辑”。然后您会看到端口号。