net::ERR_UNKNOWN_URL_SCHEME Vue.js devtools (beta) 7.0.0 beta 3 in Ionic App

Hi, the error appears if I try to inspect remotely the Webview of my Ionic-Vue app from chrome://inspect/#devices.

package.json:

"dependencies": {
    "@capacitor/android": "^6.1.0",
    "@capacitor/app": "6.0.0",
    "@capacitor/core": "6.1.0",
    "@capacitor/haptics": "6.0.0",
    "@capacitor/keyboard": "6.0.1",
    "@capacitor/status-bar": "6.0.0",
    "@ionic/vue": "^8.0.0",
    "@ionic/vue-router": "^8.0.0",
    "axios": "^1.7.2",
    "croppie": "^2.6.5",
    "flowbite": "^2.3.0",
    "ionicons": "^7.0.0",
    "pinia": "^2.1.7",
    "sweetalert2": "^11.11.1",
    "swiper": "^11.1.4",
    "toastr": "^2.1.4",
    "vanilla-lazyload": "^19.1.3",
    "vue": "^3.3.0",
    "vue-router": "^4.2.0",
    "vue3-nl2br": "^0.1.5"
  },
  "devDependencies": {
    "@capacitor/cli": "6.1.0",
    "@vitejs/plugin-legacy": "^5.0.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/test-utils": "^2.3.0",
    "autoprefixer": "^10.4.19",
    "cypress": "^13.5.0",
    "eslint": "^8.35.0",
    "eslint-plugin-vue": "^9.9.0",
    "jsdom": "^22.1.0",
    "postcss": "^8.4.38",
    "sass": "^1.77.5",
    "tailwindcss": "^3.4.4",
    "terser": "^5.4.0",
    "typescript": "^5.1.6",
    "vite": "~5.2.0",
    "vite-plugin-vue-devtools": "^7.3.5",
    "vitest": "^0.34.6",
    "vue-tsc": "^1.0.24"
  },

vite.config.ts:

/// <reference types="vitest" />

import legacy from "@vitejs/plugin-legacy";
import vue from "@vitejs/plugin-vue";
import path from "path";
import { defineConfig } from "vite";
import vueDevTools from "vite-plugin-vue-devtools";

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [vue(), legacy(), vueDevTools()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  test: {
    globals: true,
    environment: "jsdom",
  },
  build: {
    sourcemap: true,
  },
});

In the inspect window of Chrome I can see the Vue tab but it keeps showing the Vue logo, and in console I get the error:

/// <reference types="vitest" />

import legacy from "@vitejs/plugin-legacy";
import vue from "@vitejs/plugin-vue";
import path from "path";
import { defineConfig } from "vite";
import vueDevTools from "vite-plugin-vue-devtools";

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [vue(), legacy(), vueDevTools()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  test: {
    globals: true,
    environment: "jsdom",
  },
  build: {
    sourcemap: true,
  },
});

Start by reproducing the error from chrome://inspect/#devices with the package.json dependencies and vite.config.ts configuration shown in the report. Check why the Vue devtools tab remains on its logo in the Ionic WebView, and consider the issue resolved when remote inspection loads the devtools without net::ERR_UNKNOWN_URL_SCHEME.