Home Articles

如何使用实时服务器运行在Visual Studio代码中调试JavaScript

Asked
Viewed 675 times
2

尝试在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”并调试或设置断点?

1 Answer

  • 0

    适合我:

    • 在VS代码上安装[Debugger for chrome]扩展 .

    • 在VS代码上安装并激活[Live Server]扩展 .

    • 按F5并选择Chrome:

    enter image description here

    • 检查[Live Server]端口并更改生成的lauch.json

    enter image description here

    • 设置断点,运行[Live Server]并按F5:

    enter image description here

    • 享受:)

Related