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?

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?

• javascript
• visual-studio-code
• svelte
• vscode-debugger

• Are you using SvelteKit or plain svelte? – Judah Brown Commented May 2, 2022 at 17:02
• @JudahB. Plain Svelte – Lecdi Commented May 2, 2022 at 17:03
• Have you tried running npm dev --open? I'm not 100% percent sure if this will work since I've only used SvelteKit, but it's worth a try. – Judah Brown Commented May 2, 2022 at 17:05

4 Answers 4

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"

Instead of having it run npx vite dev (which is the npm: dev task), have it run npx vite dev --open :)

The accepted answer didn't work for me (perhaps because I do remote development in vscode).

Here is what works for me:

1. Edit 'launch.json' to contain the following:

   {
     // 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": [
       {
         "type": "chrome",
         "request": "launch",
         "name": "Launch Chrome",
         "url": "http://localhost:5173",
         "webRoot": "${workspaceFolder}",
         "sourceMaps": true,
         "resolveSourceMapLocations": [
             "${workspaceFolder}/**",
             "!**/node_modules/**"
         ],
       },
     ]
   }
   

2. Edit the "scripts" element of 'package.json' so that the "dev" item contains the following:

   "dev": "vite --host --open",
   

3. Since I develop on a remote system running Rocky Linux, I have to do the following (once) from a shell:

   sudo firewall-cmd --permanent --add-port=5173/tcp
   

   Then restart the remote system (to make sure the port is actually open)

   sudo shutdown -r now
   

With the above changes, type the following command in the embedded terminal window to start the server:

yarn dev

This starts the development server, which listens on port 5173, and opens a Chrome development browser.

You can close the development browser and then reopen it with a click on the "Launch Chrome" button at the top of the "Run" view.

This solved the problem for me. I use remote development for everything, so I need a local Chrome development browser to connect (through its special VSCode port) to the remote server.

Good luck!

FYI, newer versions of vite add color to the output which breaks the regex expression matching.

I had to add:

"env": {
   "NO_COLOR": "1"
},

to my launch configuration.