Vite F5 debug for both chrome and firefox with autostart/stop of devserver

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/dist",
    },
    {
      "name": "Debug Web",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      },
      "runtimeArgs": [
        "--remote-debugging-port=9222"
      ],
      "sourceMaps": true,
      "preLaunchTask": "vite: dev",
      "postDebugTask": "Terminate All Tasks",
    }
  ]
}

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "vite: dev",
      "type": "npm",
      "script": "dev",
      // Vite dev runs indefinitely in the background
      // Since it never exits, VS Code waits indefinitely for it to finish
      // This is a workaround to tell VS Code to not wait before launching the next task
      "isBackground": true,
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": ".",
              "file": 1,
              "location": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".",
            "endsPattern": "."
          }
        },
      ]
    },
    {
      "label": "Terminate All Tasks",
      "command": "echo ${input:terminate}",
      "type": "shell",
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "terminate",
      "type": "command",
      "command": "workbench.action.tasks.terminate",
      "args": "terminateAll"
    }
  ]
}