How to configure VS Code to run npx vite dev when debugging

Question

I am new to VS Code and JavaScript, and I am trying to make a simple app using Vite and Svelte, but I have a problem which I can't seem to resolve. (My code is currently just the default code given when a new project is created; I haven't changed it at all.)

When I run my app through Windows Terminal (by navigating to the project root directory and running npx vite dev), the app runs fine and my browser can connect to localhost:3000.

However, when I press on either:

• Run > Start Debugging, or
• Run > Run Without Debugging

in Visual Studio Code, it opens up Chrome to localhost:3000 but I just see localhost refused to connect. I think VS Code is never actually running the command npx vite dev, but I don't know how to change this.

When I open up .vscode/launch.json, I see this:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug with Chrome",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            
        }
    ]
}

And I am not sure what I should add here to get this to work. Any help would be appreciated, and sorry if this is a bit of a stupid question, but I couldn't fund any help searching Google or SO.

EDIT:

I have almost got this working by adding a preLaunchTask, but now chrome no longer automatically opens when I start debugging, so I might as well just run npm: dev on its own.

Here is .vscode/launch.json now:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug with Chrome",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "npm: dev"
        }
    ]
}

I think this might be because the npm: dev task (which effectively runs npx vite dev) is blocking, and only finishes when I press the stop button (or double-click ctrl+c), so chrome is not opened because VS Code thinks the pre-launch task is still running.

If there any way I can tell VS Code to open Chrome while continuing to run npm: dev?

Answer 1

Here's the VSCode way to start the Vite Dev server (npx vite) and then automatically open Chrome and attach a debug session to it.

// launch.json
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Vite DEV server",
      "request": "launch",
      "runtimeExecutable": "npx",
      "runtimeArgs": [
        "vite",
      ],
      "type": "node",
      "serverReadyAction": {
        "action": "debugWithChrome",
        "pattern": "Local: http://localhost:([0-9]+)",
        "uriFormat": "http://localhost:%s"
      }
    },
  ],
}

Many things can be customized in the launch.json. I recommend you to read the documentation linked above.

The "magic" happends in "serverReadyAction" where you set the "action" to "debugWithChrome" to open chrome.

The "pattern" is a regex used to capture the port on which the server have been launched.

Finally, you add the port to the URL in the "uriFormat" by using %s. %s represent the capture done with the regex in "pattern"