如何使用 live-server 运行在 Visual Studio 代码中调试 JavaScript

Question

尝试在 Visual Studio 代码中调试一个简单的 HTML 和 JavaScript 项目。在 VS Code 终端 window 中，'live-server' 用于启动 'index.html'。在 VS Code 中，安装并配置了 'Debugger for Chrome'。即使在 Chrome 浏览器中启动页面后，调试器也不会附加并给出错误消息 'Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect 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 文件上使用 'live-server' 并在 VS Code 中调试或设置断点？

Answer 1

适合我：

在您的 VS Code 上安装 Debugger for chrome 扩展。
在您的 VS Code 上安装并激活 Live Server 扩展。
按 F5 和 select Chrome:

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

设置你的断点，运行 Live Server 然后按 F5:

尽情享受吧:)

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

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

如何使用 live-server 运行在 Visual Studio 代码中调试 JavaScript

How to Debug JavaScript in Visual Studio Code with live-server Running

javascript

visual-studio-code

npm-live-server

如何使用 live-server 运行 在 Visual Studio 代码中调试 JavaScript

How to Debug JavaScript in Visual Studio Code with live-server Running

javascript

visual-studio-code

npm-live-server

如何使用 live-server 运行在 Visual Studio 代码中调试 JavaScript