How do you use this extension to debug a vite app?

[TechWatching]

I cannot see how to break on breakpoints in the components code ? Is it possible with this extension ? Is there some configuration to add to vscode ?

[shanecav]

I've been trying to figure this out as well. Based on looking into the vscode-browse-lite that this extension depends on, I tried adding a configuration in launch.json that uses:

{
  "type": "browse-lite",
  "name": "Browse Lite: Attach",
  "request": "attach",
  "port": 9222
}

but it gives me the error:

Couldn't find a debug adapter descriptor for debug type 'chrome' (extension might have failed to activate).

I'm wondering if the values here need to be updated to "pwa-chrome" instead of "chrome". This is just a wild guess, I really don't know much about this.

[genericGenie]

In reality, you don't need this extension to perform debugging in VSCode. I used a Vite+React+Yarn project VSCode debugging is an annoying 3 step process. I wish there was just one button press after setting the break-point.

First save the launch.json file with the following:

{
    "type": "pwa-chrome",
    "request": "launch",
    "name": "open chrome debug",
    "url": "http://localhost:3000"
}

1. From the command line, run yarn dev
2. Place a break-point somewhere in your code.
3. Within VSCode, press the green arrow start debugging button or press F5 on the keyboard

[shanecav]

That launch.json config will open a new Chrome window (outside of VS Code), correct? I think the intention of this issue is to figure out how to attach the debugger to the embedded browser that this plugin opens within VS Code. The benefit being that you can interact with the app within the embedded browser to trigger breakpoints, etc.

[genericGenie]

yes, that will open a new external chrome browser window outside of VS Code. When you run your Vite project by command line, npm start or yarn dev, the Vite project will default to localhost:3000 Having set the url tolocalhost:3000 within the launch.json file, the VS Code debugger will auto-attach itself.

[shanecav]

I think we're talking about two different things 😄

The process you're describing is a way to attach a VS Code debugger to an external Chrome window, which is unrelated to this plugin.

But the question is, how do we attach the VS Code debugger to the embedded Chrome window that this plugin opens within a VS Code panel? That's a separate situation and requires a different launch.json config. My first comment covers my attempt to get that to work, but I haven't been successful.

(To be clear, the process you described is a great approach if you don't care about using this plugin. It's what I'm currently doing, too. But I'm still curious whether it's possible to attach the VS Code debugger to the embedded browser this plugin opens.)

[genericGenie]

I also couldn't attach the VS Code debugger to the embedded window. I think only the developer of the plugin will know how to properly configure the launch.json file.

[tim-hilt]

@antfu this might be very easy to answer for you!

I wasn't satisfied with the debugging-experience of the MS Edge Devtools Extension and came to vscode-vite to find a better experience. I'm sure this is possible, but I don't know how to configure my launch.json to do the right thing!

I'm getting the same error as @genericGenie:

Couldn't find a debug adapter descriptor for debug type 'chrome' (extension might have failed to activate).

with this as my launch.json (default-generated of browse-lite-extension):

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "browse-lite",
      "name": "Browse Lite: Attach",
      "request": "attach"
    },
    {
      "type": "browse-lite",
      "request": "launch",
      "name": "Browse Lite: Launch",
      "url": "http://localhost:4000"
    }
  ]
}

I've tested it with:

~ 
λ code --version
1.71.2
74b1f979648cc44d385a2286793c226e611f59e7
x64

~ 
λ code-insiders --version
1.72.0-insider
ba515cdbb48470c116884deb6de17981d341ec06
x64

[elloza]

Same here. Please @antfu, any suggestions on which launch.js to use?

[niklas-r]

I got this working. What I did:

1. Start Vite using the extension
2. Open the embedded browser
3. Attach a debugger using this config (auto-generated by Browse Lite)

   {
   "type": "browse-lite",
   "request": "attach",
   "name": "Browse Lite: Attach"
   }

No need for the "Browse Lite: Launch" configuration when starting the Vite server with the extension. I can place break points and step through the code as expected.

System info:

$ code --version
1.90.0
89de5a8d4d6205e5b11647eb6a74844ca23d2573
arm64

$ system_profiler SPSoftwareDataType SPHardwareDataType
Software:

    System Software Overview:

      System Version: macOS 14.3.1 (23D60)
      ....

Hardware:

    Hardware Overview:

      Model Name: MacBook Pro
      Chip: Apple M1 Pro
      Memory: 16 GB
      ...

[fairking]

The configuration with launch.json is very confusing in VSCode and I had problems with understanding it as well. I wish VSCode (VSCodium) team can improve it. There should be simply something like "Run" button which runs the server and a browser without all of that complicated stuff.

I use Vuejs and Vite project and my config is following. Please note I have a separated static port number for every my project, so I can run them in parallel and reference urls in other apps so the port number remains the same across all my use cases.

vite.config.json:

...
server: {
        port: 9001,
        strictPort: true
    },

/.vscode/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": [
        {
            "command": "npm run dev",
            "name": "Run dev server",
            "request": "launch",
            "type": "node-terminal",
            "sourceMaps": true
        },
        {
            "type": "msedge",
            "request": "launch",
            "name": "Launch Edge",
            "url": "http://localhost:9001",
            "webRoot": "${workspaceFolder}/src"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:9001",
            "webRoot": "${workspaceFolder}/src"
        }
    ],
    "compounds": [
        {
            "name": "Run Debug in Chrome",
            "configurations": [ "Run dev server", "Launch Chrome" ],
            "stopAll": true
        },
        {
            "configurations": [ "Run dev server", "Launch Edge" ],
            "name": "Run Debug in Edge",
            "stopAll": true
        }
  ]
}

And then you can run your project in Debug tab:

I wish there is a better way to do so, but so far it works.

I hope it helps.

BTW, I don't think this extension is useful to me.