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

[beliven-davide-lorigliola]

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,
  },
});