diff --git a/packages/client/src/components/WaitForConnection.vue b/packages/client/src/components/WaitForConnection.vue
index 27ce74eb..75ea2a19 100644
--- a/packages/client/src/components/WaitForConnection.vue
+++ b/packages/client/src/components/WaitForConnection.vue
@@ -1,5 +1,21 @@
 <script setup lang="ts">
+import { VueInput } from '@vue-devtools-next/ui'
 import AppConnecting from '~/components/AppConnecting.vue'
+
+const props = defineProps<{
+  local?: string
+  network?: string
+}>()
+
+function scriptWrapper(str: string) {
+  return `\<script src="${str}"\>\</script\>`
+}
+
+const _local = scriptWrapper(props.local!)
+const _network = scriptWrapper(props.network!)
+
+const local = ref(_local)
+const network = ref(_network)
 </script>
 
 <template>
@@ -8,6 +24,17 @@ import AppConnecting from '~/components/AppConnecting.vue'
       <p class="pt-5 font-bold text-base">
         Waiting for connection...
       </p>
+      <div v-if="props.local && props.network" class="mt-5">
+        <p class="text-center text-sm op80 text-base">
+          Add one of the following to the top of your page 👇:
+        </p>
+        <div class="mt-3 $ui-fcc flex-row">
+          <VueInput v-model="local" left-icon="i-carbon-copy" class="w-400px!" />
+        </div>
+        <div class="mt-3 $ui-fcc flex-row">
+          <VueInput v-model="network" left-icon="i-carbon-copy" class="w-400px!" />
+        </div>
+      </div>
     </AppConnecting>
   </div>
 </template>
diff --git a/packages/client/src/composables/state-tab.ts b/packages/client/src/composables/state-tab.ts
index 4e88c2f4..44248f5b 100644
--- a/packages/client/src/composables/state-tab.ts
+++ b/packages/client/src/composables/state-tab.ts
@@ -1,6 +1,8 @@
 import { useDevToolsBridgeRpc, useDevToolsState } from '@vue-devtools-next/core'
 import type { MaybeRef } from 'vue'
 import type { CustomTab } from '@vue-devtools-next/kit'
+import { isInElectron } from '@vue-devtools-next/shared'
+
 import type { ModuleBuiltinTab } from '~/types/tab'
 
 export interface TabSettings {
@@ -31,7 +33,9 @@ export function useAllTabs() {
       if (currentTab) {
         if (currentTab[1].some(t => t.name === tab.name))
           return
-        if (!vitePluginDetected && viteOnlyTabs.includes(tab.name))
+
+        // @TODO: electron app support vite only tabs
+        if ((!vitePluginDetected || isInElectron) && viteOnlyTabs.includes(tab.name))
           return
 
         currentTab[1].push({
diff --git a/packages/client/src/constants/tab.ts b/packages/client/src/constants/tab.ts
index 06c56732..ca7ab387 100644
--- a/packages/client/src/constants/tab.ts
+++ b/packages/client/src/constants/tab.ts
@@ -1,5 +1,5 @@
 import type { DevtoolsBridgeAppRecord } from '@vue-devtools-next/core'
-import { deepClone } from '@vue-devtools-next/shared'
+import { deepClone, isInElectron } from '@vue-devtools-next/shared'
 import type { ModuleBuiltinTab } from '~/types'
 
 // @unocss-include
@@ -93,7 +93,9 @@ export function getBuiltinTab(viteDetected: boolean, moduleDetectives?: Devtools
     if (item[0] === 'modules')
       item[1] = item[1].filter(t => moduleDetectives ? isDetected(moduleDetectives, t) : true)
   })
-  return viteDetected
+
+  // @TODO: electron app support vite only tabs
+  return (viteDetected && !isInElectron)
     ? tab
     : tab.map(([_, tabs]) => [_, tabs.filter(t => !viteOnlyTabs.includes(t.name))])
 }
diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts
index c6b4a7cb..e809a4a5 100644
--- a/packages/client/src/main.ts
+++ b/packages/client/src/main.ts
@@ -105,8 +105,10 @@ export async function initDevTools(shell, options: { viewMode?: 'overlay' | 'pan
   })
 }
 
-export function createConnectionApp(container: string = '#app') {
-  const app = createApp(WaitForConnection)
+export function createConnectionApp(container: string = '#app', props?: Record<string, string>) {
+  const app = createApp(WaitForConnection, {
+    ...props,
+  })
   app.mount(container)
   return app
 }
diff --git a/packages/electron/app.html b/packages/electron/app.html
index 9f71a9e5..9cffc795 100644
--- a/packages/electron/app.html
+++ b/packages/electron/app.html
@@ -11,6 +11,14 @@
         display: flex;
         height: 100%;
       }
+      .loading {
+        width: 100vw;
+        height: 100vh;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     </style>
     <link rel="stylesheet" type="text/css" href="./client/devtools-panel.css" />
     <script>
@@ -19,7 +27,9 @@
   </head>
   <body>
     <div id="container">
-      <div id="app"></div>
+      <div id="app">
+        <p class="loading">Loading DevTools Client...</p>
+      </div>
     </div>
     <script src="./dist/devtools.js"></script>
   </body>
diff --git a/packages/electron/package.json b/packages/electron/package.json
index 9217d01b..16f1e2a1 100644
--- a/packages/electron/package.json
+++ b/packages/electron/package.json
@@ -34,6 +34,7 @@
     "electron": "^28.0.0",
     "execa": "^8.0.1",
     "h3": "^1.9.0",
+    "ip": "^1.1.8",
     "socket.io": "^4.7.2",
     "socket.io-client": "^4.7.2"
   },
diff --git a/packages/electron/src/app.ts b/packages/electron/src/app.ts
index 029940fd..1a8bdac0 100644
--- a/packages/electron/src/app.ts
+++ b/packages/electron/src/app.ts
@@ -15,7 +15,8 @@ function createWindow() {
       webSecurity: false,
       nodeIntegration: true,
       contextIsolation: false,
-      devTools: true,
+      // @TODO: enabled in dev mode
+      devTools: false,
     },
   })
   const appEntryPath = path.join(__dirname, '../app.html')
diff --git a/packages/electron/src/devtools.ts b/packages/electron/src/devtools.ts
index 21c5368c..4706843a 100644
--- a/packages/electron/src/devtools.ts
+++ b/packages/electron/src/devtools.ts
@@ -1,13 +1,19 @@
 import io from 'socket.io-client/dist/socket.io.js'
+import ip from 'ip'
 import { createConnectionApp, initDevTools } from '../client/devtools-panel'
 import { Bridge } from '../../core/src/bridge'
 
 const port = window.process.env.PORT || 8098
 
 function init() {
-  const socket = io(`http://localhost:${port}`)
+  const localhost = `http://localhost:${port}`
+  const socket = io(localhost)
   let reload: Function | null = null
-  const app = createConnectionApp()
+
+  const app = createConnectionApp('#app', {
+    local: localhost,
+    network: `http://${ip.address()}:${port}`,
+  })
 
   socket.on('vue-devtools:init', () => {
     app.unmount()
diff --git a/packages/electron/src/server.ts b/packages/electron/src/server.ts
index 2c500edb..1b560305 100644
--- a/packages/electron/src/server.ts
+++ b/packages/electron/src/server.ts
@@ -11,7 +11,8 @@ export function init() {
     '/',
     eventHandler(() => {
       const userAppContent = fs.readFileSync(path.join(__dirname, './user-app.js'), 'utf-8')
-      return userAppContent
+      const processSyntaxPolyfill = `if(!window.process){window.process={env:{}}};`
+      return processSyntaxPolyfill + userAppContent
     }),
   )
 
diff --git a/packages/electron/src/user-app.ts b/packages/electron/src/user-app.ts
index 80853e02..5fd2f538 100644
--- a/packages/electron/src/user-app.ts
+++ b/packages/electron/src/user-app.ts
@@ -4,13 +4,6 @@ import { Bridge } from '../../core/src/bridge'
 import { prepareInjection } from '../../core/src/injection'
 import { devtools } from '../../devtools-kit/src/index'
 
-if (!window.process) {
-// @ts-expect-error expected type
-  window.process = {
-    env: {},
-  }
-}
-
 const createSocket = io
 const host = target.__VUE_DEVTOOLS_HOST__ || 'http://localhost'
 const port = target.__VUE_DEVTOOLS_PORT__ !== undefined ? target.__VUE_DEVTOOLS_PORT__ : 8098
diff --git a/packages/playground/index.html b/packages/playground/index.html
index 4045e2b1..09ee9c37 100644
--- a/packages/playground/index.html
+++ b/packages/playground/index.html
@@ -5,7 +5,10 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vue DevTools Playground</title>
-    <!-- <script src="http://localhost:8098"></script> -->
+    <!-- <script>
+      window.__VUE_DEVTOOLS_PORT__ = 8080
+    </script>
+    <script src="http://localhost:8080"></script> -->
   </head>
   <body>
     <div id="app2"></div>
diff --git a/packages/playground/src/main.ts b/packages/playground/src/main.ts
index 86dbd8a0..2e4c79f1 100644
--- a/packages/playground/src/main.ts
+++ b/packages/playground/src/main.ts
@@ -12,7 +12,7 @@ import Hey from './pages/Hey.vue'
 import './style.css'
 
 // connect to remote devtools
-// devtools.connect('http://localhost', 8098)
+// devtools.connect('http://localhost', 8080)
 
 const pinia = createPinia()
 const pinia2 = createPinia()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 73bdb2f7..d9e07b72 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -336,6 +336,9 @@ importers:
       h3:
         specifier: ^1.9.0
         version: 1.9.0
+      ip:
+        specifier: ^1.1.8
+        version: 1.1.8
       socket.io:
         specifier: ^4.7.2
         version: 4.7.2
@@ -7230,6 +7233,10 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /ip@1.1.8:
+    resolution: {integrity: sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==}
+    dev: false
+
   /ip@2.0.0:
     resolution: {integrity: sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==}
     dev: true