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

How can I debug while using --host option on Vue 3 Vite so I can debug my phone instance for example. At the moment Im using visual studio code plugin "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",
}

Vite config options

enter image description here

with this I'm being able to run on lan and debug but only on my pc, if I try from my phone or other pc, it connects but it wont stop on any breakpoint.

debuggingvisual-studio-codevuejs3vite


Solution 1:[1]

In order to debug any web app, web browser running on your phone must support a debugging protocol. Chrome for Android for example does support what you need, see Remote debugging article.

As for another PC, you need to launch Chrome there with a remote debugging command line switch as well, and then edit your launch.json to attach your vs code instance to different host (ip and port). That is of course if you want to be able to set breakpoints in vs code on your developer machine and then reflect that on another PC.

Roughly saying, you need to point your vs code to a running target browser, for example, in your current config vs code launches instance of Chrome with a debugging switch enabled for you, behind the scenes

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions