如何在运行实时服务器的情况下在 Visual Studio Code 中调试 JavaScript [英] How to Debug JavaScript in Visual Studio Code with live-server Running

问题描述

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

launch.json

"version": "0.2.0",配置":[{类型":铬"，"请求": "附加","name": "附加到 Chrome",端口":9222，"webRoot": "${workspaceRoot}","urlFilter": "http://localhost:8080"},{类型":铬"，请求":启动"，"name": "针对 index.html 启动 Chrome","file": "${workspaceRoot}/index.html"}]

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

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

解决方案

为我工作:

1. 安装
   4. 检查您的 Live Server 端口*并更改生成的 launch.json
   5. 设置断点，运行Live Server并按F5:
   6. 享受吧:)

   ---

   • 要检查您的 Live Server 端口:
   1. 安装 Live Server &重新加载 VS Code.
   2. 转到首选项 >扩展 >实时服务器配置
   3. 向下滚动以找到设置:端口并单击在 settings.json 中编辑".然后你会看到端口号.

   Trying to debug a simple HTML and JavaScript project in Visual Studio Code. In the VS Code terminal window, 'live-server' is used to launch the 'index.html'. In VS Code, the 'Debugger for Chrome' is installed and configured. Even after the page is launched in the Chrome browser, the debugger will not attach and give the error message '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"
       }
   ]
   

   The shortcut to Chrome is modified to include --remote-debugging-port=9222

   Is it possible to use 'live-server' and debug or set breakpoints in VS Code on the JavaScript file?

   解决方案

   Works for me:

   1. Install Debugger for chrome extension on your VS Code.
   2. Install and activate Live Server extension on your VS Code.
   3. Press F5 and select Chrome:
   4. Check your Live Server port* and change the generated launch.json
   5. Set your break points, run Live Server and press F5:
   6. Enjoy :)

   ---

   • To check your Live Server port:
   1. Install Live Server & reload VS Code.
   2. Go to Preferences > Extensions > Live Server Config
   3. Scroll down to find Settings: Port and click "Edit in settings.json". Then you'll see the port number.

   这篇关于如何在运行实时服务器的情况下在 Visual Studio Code 中调试 JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！