如何在 lan --host 上调试 Vue 3 Vite

Question

如何在 Vue 3 Vite 上使用 --host 选项进行调试，以便我可以调试我的 phone 实例。目前我正在使用 visual studio 代码插件“Vite”

launch.json:

 {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "pwa-chrome",
          "request": "launch",
          "name": "Launch Chrome against localhost",
          "url": "http://localhost:4000",
          "webRoot": "${workspaceFolder}/app",
        }
      ]
    }

package.json

  "scripts": {
    "dev": "vite --host --port 4000",
}

查看配置选项

有了这个，我可以运行在 LAN 上进行调试，但只能在我的电脑上进行调试，如果我从我的 phone 或其他电脑上尝试，它会连接，但不会在任何情况下停止断点。

Answer 1

为了调试任何网络应用程序，您 phone 上的网络浏览器运行必须支持调试协议。例如 Chrome for Android 确实支持您需要的内容，请参阅 Remote debugging 文章。

至于另一台 PC，您还需要使用 remote debugging command line switch 启动 Chrome，然后编辑您的 launch.json 以将您的 vs 代码实例附加到不同的主机（ip和端口）。当然，如果你希望能够在你的开发机器上的 vs 代码中设置断点，然后在另一台 PC 上反映它。

粗略地说，您需要将 vs 代码指向运行目标浏览器，例如，在您当前的配置中 vs 代码启动 Chrome 的实例，并在幕后为您启用调试开关

如何在 lan --host 上调试 Vue 3 Vite

How to debug Vue 3 Vite while on lan --host

debugging

visual-studio-code

vuejs3

vite