Cannot use Vue DevTool despite multiple configuring attempts

Question

I'm developing a mini board game with Vue.js frontend and Django backend. Currently, I use Django to serve the static files under a /static directory, and I configured vite.config.js to output the build result to that directory under Django's base directory.

Now I want to use DevTools to debug the frontend. I've got the frontend to run successfully with npm run dev. However, now I want to test the interoperability with backend, and due to the Same-Origin Policy, it needs to be served by the source as the api endpoints. So I made the following configurations:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  build: {
    define: {
      '__VUE_PROD_DEVTOOLS__': true, // Force Vue DevTools to be available
    },
    sourcemap: true,
    watch: true,
    minify: false,
    rollupOptions: {
      output: {
        entryFileNames: 'src/[name].js',
        chunkFileNames: 'chunks/[name].js',
        assetFileNames: 'assets/[name].[ext]'
      }
    },
    outDir: '../backend/static'
  }
})

import './assets/main.css'

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Game from './Game.vue'
import Login from './Login.vue'
import Register from './Register.vue'

const routes = [
    { path: '/', component: Game },
    { path: '/loginpage', component: Login },
    { path: '/registerpage', component: Register },
];

const router = createRouter({
    history: createWebHistory(),
    routes: routes
});


const app = createApp(App);

app.config.devtools = true;

app.use(router);
app.mount('#app');

But the devtools extension for firefox complains about Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

How can I fix it? Thanks!