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

尝试在 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

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

对我有用：

1. 安装并激活实时服务器 https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServerVS Code 上的扩展。
2. Press F5并选择Chrome:

3. 检查你的实时服务器port* 并更改生成的launch.json

4. 设置断点，运行实时服务器并按F5:

5. Enjoy :)

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

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