diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index af467e2f6..4e4050eab 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import { defineDevToolsAction, useDevToolsBridge, useDevToolsState } from '@vue/devtools-core'
+import { checkVueInspectorDetected, enableVueInspector, useDevToolsBridge, useDevToolsState } from '@vue/devtools-core'
 import { isInChromePanel } from '@vue/devtools-shared'
 import { Pane, Splitpanes } from 'splitpanes'
 
@@ -70,16 +70,6 @@ watchEffect(() => {
 const { copy } = useCopy()
 const eyeDropper = useEyeDropper({})
 
-const checkVueInspectorDetected = defineDevToolsAction<boolean>('devtools:check-vue-inspector-detected', async (devtools) => {
-  return !!await devtools?.api?.getVueInspector?.()
-})
-
-const enableVueInspector = defineDevToolsAction('devtools:enable-vue-inspector', async (devtools) => {
-  const inspector = await devtools?.api?.getVueInspector?.()
-  if (inspector)
-    await inspector.enable()
-})
-
 checkVueInspectorDetected().then((detected) => {
   if (detected) {
     vueInspectorDetected.value = true
diff --git a/packages/client/src/components/assets/AssetDetails.vue b/packages/client/src/components/assets/AssetDetails.vue
index fc0daf657..545653402 100644
--- a/packages/client/src/components/assets/AssetDetails.vue
+++ b/packages/client/src/components/assets/AssetDetails.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTimeAgo } from '@vueuse/core'
 import type { AssetInfo, CodeSnippet, ImageMeta } from '@vue/devtools-core'
-import { callViteServerAction, useDevToolsState } from '@vue/devtools-core'
+import { callViteServerAction, openInEditor, useDevToolsState } from '@vue/devtools-core'
 import { VueButton, VueIcon, VTooltip as vTooltip } from '@vue/devtools-ui'
 
 const props = defineProps<{
@@ -15,7 +15,6 @@ const getImageMeta = callViteServerAction<ImageMeta>('assets:get-image-meta')
 const getTextAssetContent = callViteServerAction<string>('assets:get-text-asset-content')
 const asset = useVModel(props, 'modelValue', emit, { passive: true })
 
-const _openInEditor = openInEditor
 const _vueInspectorDetected = computed(() => vueInspectorDetected.value)
 const imageMeta = computedAsync(() => {
   if (asset.value.type !== 'image')
@@ -139,7 +138,7 @@ const supportsPreview = computed(() => {
                 icon="i-carbon-launch"
                 action flex-none
                 :border="false"
-                @click="_openInEditor(asset.filePath)"
+                @click="openInEditor(asset.filePath)"
               />
             </div>
           </td>
diff --git a/packages/client/src/components/common/DockingPanel.vue b/packages/client/src/components/common/DockingPanel.vue
index af9255e45..1edb23bb8 100644
--- a/packages/client/src/components/common/DockingPanel.vue
+++ b/packages/client/src/components/common/DockingPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { VueButton, VueDarkToggle, VueIcon, VueSelect } from '@vue/devtools-ui'
 import { isInChromePanel } from '@vue/devtools-shared'
-import { defineDevToolsAction, useDevToolsState } from '@vue/devtools-core'
+import { toggleApp, useDevToolsState } from '@vue/devtools-core'
 
 // #region view mode
 const viewMode = inject<Ref<'overlay' | 'panel'>>('viewMode', ref('overlay'))
@@ -35,10 +35,6 @@ const appRecords = computed(() => devtoolsState.appRecords.value.map(app => ({
 const activeAppRecordId = ref(devtoolsState.activeAppRecordId.value)
 const activeAppRecordName = computed(() => appRecords.value.find(app => app.value === activeAppRecordId.value)?.label ?? '')
 
-const toggleApp = defineDevToolsAction('devtools:toggle-app', async (devtools, id: string) => {
-  await devtools.api.toggleApp(id)
-})
-
 watch(activeAppRecordId, (id) => {
   toggleApp(`${id}`).then(() => {
     router.push('/overview').then(() => {
diff --git a/packages/client/src/components/graph/GraphDrawer.vue b/packages/client/src/components/graph/GraphDrawer.vue
index 34e6761e0..bc7cd8493 100644
--- a/packages/client/src/components/graph/GraphDrawer.vue
+++ b/packages/client/src/components/graph/GraphDrawer.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { VueButton, VueDrawer, showVueNotification } from '@vue/devtools-ui'
-import { useDevToolsState } from '@vue/devtools-core'
+import { openInEditor, useDevToolsState } from '@vue/devtools-core'
 
 defineProps<{
   top?: HTMLElement
diff --git a/packages/client/src/components/inspector/InspectorDataField/Actions.vue b/packages/client/src/components/inspector/InspectorDataField/Actions.vue
index ff1b5ea0a..222c16733 100644
--- a/packages/client/src/components/inspector/InspectorDataField/Actions.vue
+++ b/packages/client/src/components/inspector/InspectorDataField/Actions.vue
@@ -4,7 +4,7 @@ import { VueButton, VueDropdown, VueDropdownButton, VueIcon, VTooltip as vToolti
 import { getRaw } from '@vue/devtools-kit'
 import type { InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
 import type { ButtonProps } from '@vue/devtools-ui/dist/types/src/components/Button'
-import { defineDevToolsAction } from '@vue/devtools-core'
+import { editInspectorState } from '@vue/devtools-core'
 import type { EditorAddNewPropType, EditorInputValidType } from '../../../composables/inspector'
 
 const props = withDefaults(defineProps<{
@@ -22,10 +22,6 @@ defineEmits<{
   addNewProp: [type: EditorAddNewPropType]
 }>()
 
-const editInspectorState = defineDevToolsAction('devtools:edit-inspector-state', (devtools, payload: InspectorStateEditorPayload) => {
-  devtools.api.editInspectorState(payload)
-})
-
 const state = useStateEditorContext()
 
 const { copy, isSupported } = useClipboard()
diff --git a/packages/client/src/components/inspector/InspectorStateField.vue b/packages/client/src/components/inspector/InspectorStateField.vue
index 9cbe0c862..4bf08b267 100644
--- a/packages/client/src/components/inspector/InspectorStateField.vue
+++ b/packages/client/src/components/inspector/InspectorStateField.vue
@@ -2,7 +2,7 @@
 import type { InspectorCustomState, InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
 import { isArray, isObject, sortByKey } from '@vue/devtools-shared'
 import { formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit, toSubmit } from '@vue/devtools-kit'
-import { defineDevToolsAction } from '@vue/devtools-core'
+import { editInspectorState } from '@vue/devtools-core'
 import { VueButton, VueIcon, VTooltip as vTooltip } from '@vue/devtools-ui'
 import Actions from './InspectorDataField/Actions.vue'
 import type { EditorAddNewPropType } from '~/composables/inspector'
@@ -115,10 +115,6 @@ watch(() => editing.value, (v) => {
   }
 })
 
-const editInspectorState = defineDevToolsAction('devtools:edit-inspector-state', (devtools, payload: InspectorStateEditorPayload) => {
-  devtools.api.editInspectorState(payload)
-})
-
 function submit() {
   const data = props.data
   editInspectorState({
diff --git a/packages/client/src/components/pages/RoutesTable.vue b/packages/client/src/components/pages/RoutesTable.vue
index 8f76df135..280ff497b 100644
--- a/packages/client/src/components/pages/RoutesTable.vue
+++ b/packages/client/src/components/pages/RoutesTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { VueBadge } from '@vue/devtools-ui'
 import type { RouteRecordNormalized } from 'vue-router'
-import { useDevToolsState } from '@vue/devtools-core'
+import { openInEditor, useDevToolsState } from '@vue/devtools-core'
 
 const props = defineProps<{
   pages: RouteRecordNormalized[]
@@ -17,7 +17,6 @@ const sorted = computed(() => {
   return [...props.pages].sort((a, b) => a.path.localeCompare(b.path))
 })
 
-const _openInEditor = openInEditor
 const _vueInspectorDetected = computed(() => vueInspectorDetected.value)
 const state = useDevToolsState()
 </script>
@@ -67,7 +66,7 @@ const state = useDevToolsState()
                   v-if="(item.file || item.meta?.file) && state.vitePluginDetected.value && _vueInspectorDetected"
                   text-sm op40 hover="op100 text-primary-400"
                   title="Open in editor"
-                  @click="_openInEditor((item.file || item.meta?.file) as string)"
+                  @click="openInEditor((item.file || item.meta?.file) as string)"
                 >
                   <div i-carbon-script-reference />
                 </button>
diff --git a/packages/client/src/composables/open-in-editor.ts b/packages/client/src/composables/open-in-editor.ts
index 1105d4dcb..6680a2eac 100644
--- a/packages/client/src/composables/open-in-editor.ts
+++ b/packages/client/src/composables/open-in-editor.ts
@@ -1,6 +1 @@
-import { defineDevToolsAction } from '@vue/devtools-core'
-
 export const vueInspectorDetected = ref(false)
-export const openInEditor = defineDevToolsAction('devtools:open-in-editor', (devtools, file: string) => {
-  devtools.api.openInEditor({ file })
-})
diff --git a/packages/client/src/composables/state-commands.ts b/packages/client/src/composables/state-commands.ts
index 7220b1cb1..2e494bc8e 100644
--- a/packages/client/src/composables/state-commands.ts
+++ b/packages/client/src/composables/state-commands.ts
@@ -1,7 +1,7 @@
 import { randomStr } from '@vue/devtools-shared'
 import { CustomCommand } from '@vue/devtools-kit'
 import { MaybeRefOrGetter } from 'vue'
-import { defineDevToolsListener, useDevToolsState } from '@vue/devtools-core'
+import { onCustomCommandsUpdated, useDevToolsState } from '@vue/devtools-core'
 
 export interface CommandItem {
   id: string
@@ -21,12 +21,6 @@ function uniqueById(items: CommandItem[]): CommandItem[] {
 const registeredCommands = reactive(new Map<string, MaybeRefOrGetter<CommandItem[]>>())
 let removeCommandsUpdatedListener: (() => void) | null = null
 
-const onCustomCommandsUpdated = defineDevToolsListener<CustomCommand[]>((devtools, callback) => {
-  devtools.api.on.customCommandsUpdated((payload) => {
-    callback(payload)
-  })
-})
-
 // @unocss-include
 export function useCommands() {
   const { enabledFlattenTabs } = useAllTabs()
diff --git a/packages/client/src/composables/state-tab.ts b/packages/client/src/composables/state-tab.ts
index 15fecfd5d..9e059fce6 100644
--- a/packages/client/src/composables/state-tab.ts
+++ b/packages/client/src/composables/state-tab.ts
@@ -1,4 +1,4 @@
-import { defineDevToolsListener, useDevToolsState } from '@vue/devtools-core'
+import { onCustomTabsUpdated, useDevToolsState } from '@vue/devtools-core'
 import type { MaybeRef } from 'vue'
 import type { CustomTab } from '@vue/devtools-kit'
 import { isInElectron } from '@vue/devtools-shared'
@@ -22,11 +22,6 @@ export interface CategorizedCategory {
 
 export type CategorizedTabs = [CategorizedCategory, CategorizedTab[]][]
 
-const onCustomTabsUpdated = defineDevToolsListener<CustomTab[]>((devtools, callback) => {
-  devtools.api.on.customTabsUpdated((payload) => {
-    callback(payload)
-  })
-})
 let removeTabsUpdatedListener: (() => void) | null = null
 
 export function useAllTabs() {
diff --git a/packages/client/src/pages/components.vue b/packages/client/src/pages/components.vue
index c0ae22a5d..36d662e0d 100644
--- a/packages/client/src/pages/components.vue
+++ b/packages/client/src/pages/components.vue
@@ -1,5 +1,18 @@
 <script setup lang="ts">
-import { defineDevToolsAction, defineDevToolsListener, useDevToolsBridge, useDevToolsState } from '@vue/devtools-core'
+import {
+  getComponentBoundingRect as getComponentBoundingRectAction,
+  getInspectorState,
+  getInspectorTree,
+  inspectComponentInspector as inspectComponentInspectorAction,
+  onInspectorStateUpdated,
+  onInspectorTreeUpdated,
+  openInEditor,
+  scrollToComponent as scrollToComponentAction,
+  toggleComponentInspector as toggleComponentInspectorAction,
+  updateInspectorTreeId,
+  useDevToolsBridge,
+  useDevToolsState,
+} from '@vue/devtools-core'
 
 import type { ComponentBoundingRect, ComponentTreeNode, InspectorState } from '@vue/devtools-kit'
 import { parse } from '@vue/devtools-kit'
@@ -12,47 +25,6 @@ const bridge = useDevToolsBridge()
 const treeNode = ref<ComponentTreeNode[]>([])
 const activeComponentId = ref('')
 
-const getInspectorTree = defineDevToolsAction('devtools:inspector-tree', (devtools, payload) => {
-  return devtools.api.getInspectorTree(payload)
-})
-
-const getComponentBoundingRectAction = defineDevToolsAction('devtools:get-component-bounding-rect', (devtools, payload) => {
-  return devtools.api.getComponentBoundingRect(payload)
-})
-
-const inspectComponentInspectorAction = defineDevToolsAction('devtools:inspect-component-inspector', (devtools) => {
-  return devtools.api.inspectComponentInspector()
-})
-
-const toggleComponentInspectorAction = defineDevToolsAction('devtools:toggle-component-inspector', (devtools, payload) => {
-  return devtools.api.toggleComponentInspector(payload)
-})
-
-const scrollToComponentAction = defineDevToolsAction('devtools:scroll-to-component', (devtools, payload) => {
-  return devtools.api.scrollToComponent(payload)
-})
-
-const getInspectorState = defineDevToolsAction('devtools:inspector-state', (devtools, payload) => {
-  return devtools.api.getInspectorState(payload)
-})
-
-const updateInspectorTreeId = defineDevToolsAction('devtools:update-inspector-tree-id', (devtools, payload) => {
-  devtools.context.activeInspectorTreeId = payload
-})
-
-const onInspectorTreeUpdated = defineDevToolsListener<string>((devtools, callback) => {
-  devtools.api.on.sendInspectorTree((payload) => {
-    callback(payload)
-  })
-})
-
-const onInspectorStateUpdated = defineDevToolsListener<string>((devtools, callback) => {
-  devtools.api.on.sendInspectorState((payload) => {
-    callback(payload)
-  })
-})
-
-const _openInEditor = openInEditor
 const _vueInspectorDetected = computed(() => vueInspectorDetected.value)
 
 // UX related state
@@ -125,7 +97,7 @@ function initSelectedComponent(treeNode: ComponentTreeNode[]) {
 function getComponentBoundingRect(id: string) {
   return new Promise<ComponentBoundingRect>((resolve) => {
     getComponentBoundingRectAction({ inspectorId: 'components', instanceId: id }).then((data) => {
-      resolve(parse(data))
+      resolve(parse(data!))
     })
   })
 }
@@ -147,7 +119,7 @@ function getComponentTree(filterText?: string) {
   return new Promise<void>((resolve) => {
     getInspectorTree({ inspectorId: 'components', filter: filterText }).then((_data) => {
       const isNoComponentTreeCollapsed = !Object.keys(componentTreeCollapseMap.value).length
-      const data = parse(_data)
+      const data = parse(_data!)
       treeNode.value = data
       isNoComponentTreeCollapsed && (componentTreeCollapseMap.value = normalizeComponentTreeCollapsed(data))
       initSelectedComponent(data)
@@ -182,7 +154,7 @@ function scrollToComponent(id: string) {
 function inspectComponentInspector() {
   bridge.value.emit('toggle-panel', false)
   inspectComponentInspectorAction().then((_data) => {
-    const data = JSON.parse(_data)
+    const data = JSON.parse(_data!)
     selectedComponentTree.value = data.id
     selectComponentTree(data.id)
     const linkedList = componentTreeLinkedList.value[data.id]
@@ -333,7 +305,7 @@ const devtoolsState = useDevToolsState()
               icon="i-carbon-launch"
               action flex-none
               :border="false"
-              @click="_openInEditor(selectedComponentFilePath)"
+              @click="openInEditor(selectedComponentFilePath)"
             />
           </div>
         </div>
diff --git a/packages/client/src/pages/i18n.vue b/packages/client/src/pages/i18n.vue
index 40e739973..84559308d 100644
--- a/packages/client/src/pages/i18n.vue
+++ b/packages/client/src/pages/i18n.vue
@@ -1,5 +1,11 @@
 <script setup lang="ts">
-import { defineDevToolsAction, defineDevToolsListener } from '@vue/devtools-core'
+import {
+  getInspectorState,
+  getInspectorTree,
+  onInspectorStateUpdated,
+  onInspectorTreeUpdated,
+  unhighlightElement,
+} from '@vue/devtools-core'
 
 // eslint-disable-next-line ts/no-import-type-side-effects
 import { type InspectorNodeTag, type InspectorState } from '@vue/devtools-kit'
@@ -16,36 +22,12 @@ const state = ref<{
   getters?: InspectorState[]
 }>({})
 
-const unhighlightElement = defineDevToolsAction('devtools:unhighlight-element', (devtools, payload) => {
-  return devtools.api.unhighlightElement()
-})
-
-const getInspectorTree = defineDevToolsAction('devtools:inspector-tree', (devtools, payload) => {
-  return devtools.api.getInspectorTree(payload)
-})
-
-const getInspectorState = defineDevToolsAction('devtools:inspector-state', (devtools, payload) => {
-  return devtools.api.getInspectorState(payload)
-})
-
 function getI18nState(nodeId: string) {
   getInspectorState({ inspectorId: INSPECTOR_ID, nodeId }).then((data) => {
-    state.value = parse(data)
+    state.value = parse(data!)
   })
 }
 
-const onInspectorTreeUpdated = defineDevToolsListener<string>((devtools, callback) => {
-  devtools.api.on.sendInspectorTree((payload) => {
-    callback(payload)
-  })
-})
-
-const onInspectorStateUpdated = defineDevToolsListener<string>((devtools, callback) => {
-  devtools.api.on.sendInspectorState((payload) => {
-    callback(payload)
-  })
-})
-
 function clearI18nState() {
   state.value = {}
 }
@@ -59,7 +41,7 @@ createCollapseContext('inspector-state')
 
 onDevToolsClientConnected(() => {
   getInspectorTree({ inspectorId: INSPECTOR_ID, filter: '' }).then((_data) => {
-    const data = parse(_data)
+    const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
       selected.value = data[0].id
diff --git a/packages/client/src/pages/overview.vue b/packages/client/src/pages/overview.vue
index 6f9f6d27b..83deb99d6 100644
--- a/packages/client/src/pages/overview.vue
+++ b/packages/client/src/pages/overview.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { isMacOS } from '@vue/devtools-shared'
-import { defineDevToolsAction, defineDevToolsListener, useDevToolsState } from '@vue/devtools-core'
-import type { ComponentTreeNode, RouterInfo } from '@vue/devtools-kit'
+import { getInspectorTree, getRouterInfo, onInspectorTreeUpdated, onRouterInfoUpdated, useDevToolsState } from '@vue/devtools-core'
+import type { ComponentTreeNode } from '@vue/devtools-kit'
 import { parse } from '@vue/devtools-kit'
 import { VueButton } from '@vue/devtools-ui'
 
@@ -11,26 +11,6 @@ const { vueVersion } = useDevToolsState()
 const pageCount = ref(1)
 const componentCount = ref(0)
 
-const getRouterInfo = defineDevToolsAction('devtools:router-info', (devtools) => {
-  return JSON.stringify(devtools.context.routerInfo)
-})
-
-const getInspectorTree = defineDevToolsAction('devtools:inspector-tree', (devtools, payload) => {
-  return devtools.api.getInspectorTree(payload)
-})
-
-const onInspectorTreeUpdated = defineDevToolsListener<string>((devtools, callback) => {
-  devtools.api.on.sendInspectorTree((payload) => {
-    callback(payload)
-  })
-})
-
-const onRouterInfoUpdated = defineDevToolsListener<RouterInfo>((devtools, callback) => {
-  devtools.api.on.routerInfoUpdated((payload) => {
-    callback(payload)
-  })
-}, { parser: 'json' })
-
 function normalizeComponentCount(data: ComponentTreeNode[]) {
   let count = 0
   for (const node of data) {
@@ -44,7 +24,7 @@ function normalizeComponentCount(data: ComponentTreeNode[]) {
 onDevToolsClientConnected(() => {
   // page count getter
   getRouterInfo().then((_data) => {
-    const data = JSON.parse(_data)
+    const data = JSON.parse(_data!)
     pageCount.value = data?.routes?.length || 1
   })
   onRouterInfoUpdated((data) => {
@@ -53,7 +33,7 @@ onDevToolsClientConnected(() => {
 
   // component count getter
   getInspectorTree({ inspectorId: 'components', filter: '' }).then((_data) => {
-    const data = parse(_data)
+    const data = parse(_data!)
     componentCount.value = normalizeComponentCount(data)
   })
   onInspectorTreeUpdated((_data) => {
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 151401dd4..8d0ee3012 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { RouterInfo } from '@vue/devtools-kit'
 import { VueInput } from '@vue/devtools-ui'
-import { defineDevToolsAction, defineDevToolsListener } from '@vue/devtools-core'
+import { getMatchedRoutes, getRouterInfo, navigateAction, onRouterInfoUpdated } from '@vue/devtools-core'
 import type { RouteLocationNormalizedLoaded, RouteRecordNormalized } from 'vue-router'
 
 const routeInput = ref('')
@@ -28,30 +28,6 @@ function navigate() {
     navigateToRoute(routeInput.value)
 }
 
-const navigateAction = defineDevToolsAction('devtools:router-navigate', (devtools, payload) => {
-  devtools.context.router?.push(payload).catch(e => e)
-})
-
-const getRouterInfo = defineDevToolsAction('devtools:router-info', (devtools) => {
-  return JSON.stringify(devtools.context.routerInfo)
-})
-
-const getMatchedRoutes = defineDevToolsAction('devtools:matched-routes', (devtools, path) => {
-  const c = console.warn
-  console.warn = () => {}
-  const matched = devtools.context.router?.resolve({
-    path: path || '/',
-  }).matched ?? []
-  console.warn = c
-  return JSON.stringify(matched)
-})
-
-const onRouterInfoUpdated = defineDevToolsListener<RouterInfo>((devtools, callback) => {
-  devtools.api.on.routerInfoUpdated((payload) => {
-    callback(payload)
-  })
-}, { parser: 'json' })
-
 function navigateToRoute(path: string) {
   navigateAction({
     path,
@@ -60,7 +36,7 @@ function navigateToRoute(path: string) {
 
 onDevToolsClientConnected(() => {
   getRouterInfo().then((data) => {
-    init(JSON.parse(data))
+    init(JSON.parse(data!))
   })
   onRouterInfoUpdated((data) => {
     init(data)
@@ -71,7 +47,7 @@ watchDebounced(routeInput, () => {
   if (routeInput.value === currentRoute.value?.path)
     return
   getMatchedRoutes(routeInput.value).then((data) => {
-    matchedRoutes.value = JSON.parse(data)
+    matchedRoutes.value = JSON.parse(data!)
   })
 })
 </script>
diff --git a/packages/client/src/pages/pinia.vue b/packages/client/src/pages/pinia.vue
index 07edcd5ab..55955d66f 100644
--- a/packages/client/src/pages/pinia.vue
+++ b/packages/client/src/pages/pinia.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineDevToolsAction, defineDevToolsListener } from '@vue/devtools-core'
+import { getInspectorState, getInspectorTree, onInspectorStateUpdated, onInspectorTreeUpdated } from '@vue/devtools-core'
 
 import type { InspectorNodeTag, InspectorState } from '@vue/devtools-kit'
 import { parse } from '@vue/devtools-kit'
@@ -15,29 +15,9 @@ const state = ref<{
   getters?: InspectorState[]
 }>({})
 
-const getInspectorTree = defineDevToolsAction('devtools:inspector-tree', (devtools, payload) => {
-  return devtools.api.getInspectorTree(payload)
-})
-
-const getInspectorState = defineDevToolsAction('devtools:inspector-state', (devtools, payload) => {
-  return devtools.api.getInspectorState(payload)
-})
-
-const onInspectorTreeUpdated = defineDevToolsListener<string>((devtools, callback) => {
-  devtools.api.on.sendInspectorTree((payload) => {
-    callback(payload)
-  })
-})
-
-const onInspectorStateUpdated = defineDevToolsListener<string>((devtools, callback) => {
-  devtools.api.on.sendInspectorState((payload) => {
-    callback(payload)
-  })
-})
-
 function getPiniaState(nodeId: string) {
   getInspectorState({ inspectorId, nodeId }).then((data) => {
-    state.value = parse(data)
+    state.value = parse(data!)
   })
 }
 
@@ -54,7 +34,7 @@ createCollapseContext('inspector-state')
 
 onDevToolsClientConnected(() => {
   getInspectorTree({ inspectorId, filter: '' }).then((_data) => {
-    const data = parse(_data)
+    const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
       selected.value = data[0].id
diff --git a/packages/client/src/pages/router.vue b/packages/client/src/pages/router.vue
index a31a85359..0ebc59cb9 100644
--- a/packages/client/src/pages/router.vue
+++ b/packages/client/src/pages/router.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineDevToolsAction, defineDevToolsListener, useDevToolsState } from '@vue/devtools-core'
+import { getInspectorState, getInspectorTree, onInspectorStateUpdated, onInspectorTreeUpdated, useDevToolsState } from '@vue/devtools-core'
 
 import type { InspectorState } from '@vue/devtools-kit'
 import { parse } from '@vue/devtools-kit'
@@ -18,32 +18,12 @@ const inspectorId = computed(() => {
 })
 createCollapseContext('inspector-state')
 
-const getInspectorTree = defineDevToolsAction('devtools:inspector-tree', (devtools, payload) => {
-  return devtools.api.getInspectorTree(payload)
-})
-
-const getInspectorState = defineDevToolsAction('devtools:inspector-state', (devtools, payload) => {
-  return devtools.api.getInspectorState(payload)
-})
-
 function getRouterState(nodeId: string) {
   getInspectorState({ inspectorId: inspectorId.value, nodeId }).then((data) => {
-    state.value = parse(data)
+    state.value = parse(data!)
   })
 }
 
-const onInspectorTreeUpdated = defineDevToolsListener<string>((devtools, callback) => {
-  devtools.api.on.sendInspectorTree((payload) => {
-    callback(payload)
-  })
-})
-
-const onInspectorStateUpdated = defineDevToolsListener<string>((devtools, callback) => {
-  devtools.api.on.sendInspectorState((payload) => {
-    callback(payload)
-  })
-})
-
 function clearRouterState() {
   state.value = {}
 }
@@ -55,7 +35,7 @@ watch(selected, () => {
 
 onDevToolsClientConnected(() => {
   getInspectorTree({ inspectorId: inspectorId.value, filter: '' }).then((_data) => {
-    const data = parse(_data)
+    const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
       selected.value = data[0].id
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index e670892de..fa10a1a07 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -3,7 +3,7 @@ import { UNDEFINED } from '@vue/devtools-kit'
 import { Pane, Splitpanes } from 'splitpanes'
 
 import type { InspectorState, TimelineEvent } from '@vue/devtools-kit'
-import { defineDevToolsAction, defineDevToolsListener } from '@vue/devtools-core'
+import { getTimelineLayer, onAddTimelineEvent } from '@vue/devtools-core'
 
 const layers = ref<{
   color: number
@@ -25,7 +25,7 @@ const normalizedEventInfo = computed(() => {
       key,
       type: key,
       editable: false,
-      value: selectedEventInfo.value[key],
+      value: selectedEventInfo.value[key]!,
     })
   }
   return info
@@ -66,25 +66,15 @@ function normalizeGroupInfo(layerId: string, event: TimelineEvent['event']) {
   }
 }
 
-const getTimelineLayer = defineDevToolsAction('devtools:get-timeline-layer', (devtools) => {
-  return devtools.context.timelineLayer
-})
-
-const onAddTimelineEvent = defineDevToolsListener<TimelineEvent>((devtools, callback) => {
-  devtools.api.on.addTimelineEvent((payload) => {
-    callback(payload)
-  })
-})
-
 onDevToolsClientConnected(() => {
   getTimelineLayer().then((data) => {
-    layers.value = data
+    layers.value = data!
     layers.value.forEach((layer) => {
       timelineEvent.value[layer.id] = []
       layer.groups = {}
     })
     if (!selectedLayer.value)
-      selectedLayer.value = data.length ? data[0].id : ''
+      selectedLayer.value = data?.length ? data[0].id : ''
   })
   onAddTimelineEvent((payload) => {
     if (!payload)
diff --git a/packages/core/src/bridge-events/devtools-actions.ts b/packages/core/src/bridge-events/devtools-actions.ts
new file mode 100644
index 000000000..bb8133e12
--- /dev/null
+++ b/packages/core/src/bridge-events/devtools-actions.ts
@@ -0,0 +1,97 @@
+import type { InspectorStateEditorPayload } from '@vue/devtools-kit'
+import { defineDevToolsAction } from '../bridge'
+
+export const checkVueInspectorDetected = defineDevToolsAction<boolean>('devtools:check-vue-inspector-detected', async (devtools) => {
+  return !!await devtools?.api?.getVueInspector?.()
+})
+
+export const enableVueInspector = defineDevToolsAction('devtools:enable-vue-inspector', async (devtools) => {
+  const inspector = await devtools?.api?.getVueInspector?.()
+  if (inspector)
+    await inspector.enable()
+})
+
+export const toggleApp = defineDevToolsAction('devtools:toggle-app', async (devtools, id: string) => {
+  await devtools.api.toggleApp(id)
+})
+
+export const editInspectorState = defineDevToolsAction('devtools:edit-inspector-state', (devtools, payload: InspectorStateEditorPayload) => {
+  devtools.api.editInspectorState(payload)
+})
+
+export const openInEditor = defineDevToolsAction('devtools:open-in-editor', (devtools, file: string) => {
+  devtools.api.openInEditor({ file })
+})
+
+export const getInspectorTree = defineDevToolsAction('devtools:inspector-tree', (devtools, payload) => {
+  return devtools.api.getInspectorTree(payload)
+})
+
+export const getComponentBoundingRect = defineDevToolsAction('devtools:get-component-bounding-rect', (devtools, payload) => {
+  return devtools.api.getComponentBoundingRect(payload)
+})
+
+export const inspectComponentInspector = defineDevToolsAction('devtools:inspect-component-inspector', (devtools) => {
+  return devtools.api.inspectComponentInspector()
+})
+
+export const toggleComponentInspector = defineDevToolsAction('devtools:toggle-component-inspector', (devtools, payload) => {
+  return devtools.api.toggleComponentInspector(payload)
+})
+
+export const scrollToComponent = defineDevToolsAction('devtools:scroll-to-component', (devtools, payload) => {
+  return devtools.api.scrollToComponent(payload)
+})
+
+export const getInspectorState = defineDevToolsAction('devtools:inspector-state', (devtools, payload) => {
+  return devtools.api.getInspectorState(payload)
+})
+
+export const updateInspectorTreeId = defineDevToolsAction('devtools:update-inspector-tree-id', (devtools, payload) => {
+  devtools.context.activeInspectorTreeId = payload
+})
+
+export const unhighlightElement = defineDevToolsAction('devtools:unhighlight-element', (devtools, payload) => {
+  return devtools.api.unhighlightElement()
+})
+
+export const getRouterInfo = defineDevToolsAction('devtools:router-info', (devtools) => {
+  return JSON.stringify(devtools.context.routerInfo)
+})
+
+export const navigateAction = defineDevToolsAction('devtools:router-navigate', (devtools, payload) => {
+  devtools.context.router?.push(payload).catch(e => e)
+})
+
+export const getMatchedRoutes = defineDevToolsAction('devtools:matched-routes', (devtools, path) => {
+  const c = console.warn
+  console.warn = () => {}
+  const matched = devtools.context.router?.resolve({
+    path: path || '/',
+  }).matched ?? []
+  console.warn = c
+  return JSON.stringify(matched)
+})
+
+export const getTimelineLayer = defineDevToolsAction('devtools:get-timeline-layer', (devtools) => {
+  return devtools.context.timelineLayer
+})
+
+export const getDevToolsState = defineDevToolsAction('devtools:get-state', (devtools) => {
+  return {
+    connected: devtools.state.connected,
+    clientConnected: devtools.state.clientConnected,
+    vueVersion: devtools.state?.activeAppRecord?.version || '',
+    tabs: devtools.state.tabs,
+    commands: devtools.state.commands,
+    vitePluginDetected: devtools.state.vitePluginDetected,
+    appRecords: devtools.state.appRecords.map(item => ({
+      id: item.id,
+      name: item.name,
+      version: item.version,
+      routerId: item.routerId,
+      moduleDetectives: item.moduleDetectives,
+    })),
+    activeAppRecordId: devtools.state.activeAppRecordId,
+  }
+})
diff --git a/packages/core/src/bridge-events/devtools-listeners.ts b/packages/core/src/bridge-events/devtools-listeners.ts
new file mode 100644
index 000000000..3830fe97a
--- /dev/null
+++ b/packages/core/src/bridge-events/devtools-listeners.ts
@@ -0,0 +1,77 @@
+import type { CustomCommand, CustomTab, DevToolsState, RouterInfo, TimelineEvent } from '@vue/devtools-kit'
+import { defineDevToolsListener } from '../bridge'
+
+export const onDevToolsStateUpdated = defineDevToolsListener<DevToolsState & { vueVersion: string }>('devtools:on-state-updated', (devtools, callback) => {
+  function setPayload(payload: DevToolsState & { vueVersion?: string }) {
+    return {
+      vueVersion: payload?.activeAppRecord?.version || '',
+      connected: payload.connected,
+      clientConnected: payload.clientConnected,
+      tabs: payload.tabs,
+      commands: payload.commands,
+      vitePluginDetected: payload.vitePluginDetected,
+      appRecords: payload.appRecords.map(item => ({
+        id: item.id,
+        name: item.name,
+        version: item.version,
+        routerId: item.routerId,
+        moduleDetectives: item.moduleDetectives,
+      })),
+      activeAppRecordId: payload.activeAppRecordId,
+    }
+  }
+  function subscribe() {
+    devtools.api.on.devtoolsStateUpdated((payload) => {
+      callback(setPayload(payload))
+    })
+  }
+  if (devtools?.api) {
+    subscribe()
+  }
+  else {
+    const timer = setInterval(() => {
+      if (devtools.state.connected) {
+        const payload = devtools.state
+        callback(setPayload(payload))
+        subscribe()
+        clearInterval(timer)
+      }
+    }, 10)
+  }
+})
+
+export const onCustomTabsUpdated = defineDevToolsListener<CustomTab[]>('devtools:on-custom-tabs-updated', (devtools, callback) => {
+  devtools.api.on.customTabsUpdated((payload) => {
+    callback(payload)
+  })
+})
+
+export const onCustomCommandsUpdated = defineDevToolsListener<CustomCommand[]>('devtools:on-custom-commands-updated', (devtools, callback) => {
+  devtools.api.on.customCommandsUpdated((payload) => {
+    callback(payload)
+  })
+})
+
+export const onInspectorTreeUpdated = defineDevToolsListener<string>('devtools:on-inspector-tree-updated', (devtools, callback) => {
+  devtools.api.on.sendInspectorTree((payload) => {
+    callback(payload)
+  })
+})
+
+export const onInspectorStateUpdated = defineDevToolsListener<string>('devtools:on-inspector-state-updated', (devtools, callback) => {
+  devtools.api.on.sendInspectorState((payload) => {
+    callback(payload)
+  })
+})
+
+export const onRouterInfoUpdated = defineDevToolsListener<RouterInfo>('devtools:on-router-info-updated', (devtools, callback) => {
+  devtools.api.on.routerInfoUpdated((payload) => {
+    callback(payload)
+  })
+}, { parser: 'json' })
+
+export const onAddTimelineEvent = defineDevToolsListener<TimelineEvent>('devtools:on-add-timeline-event', (devtools, callback) => {
+  devtools.api.on.addTimelineEvent((payload) => {
+    callback(payload)
+  })
+})
diff --git a/packages/core/src/bridge-events/index.ts b/packages/core/src/bridge-events/index.ts
new file mode 100644
index 000000000..17fe635d8
--- /dev/null
+++ b/packages/core/src/bridge-events/index.ts
@@ -0,0 +1,11 @@
+import * as devtoolsActions from './devtools-actions'
+import * as devtoolsListeners from './devtools-listeners'
+
+export function initDevToolsAEvent() {
+  Object.values(devtoolsActions).forEach((action) => {
+    action()
+  })
+  Object.values(devtoolsListeners).forEach((action) => {
+    action(() => {})
+  })
+}
diff --git a/packages/core/src/bridge/api.ts b/packages/core/src/bridge/api.ts
index dfa842a1a..83683e352 100644
--- a/packages/core/src/bridge/api.ts
+++ b/packages/core/src/bridge/api.ts
@@ -1,46 +1,57 @@
 import { DevToolsType, parse } from '@vue/devtools-kit'
 import { nanoid } from 'nanoid'
-import { BRIDGE_DEVTOOLS_ACTION_KEY, BRIDGE_DEVTOOLS_LISTENER_KEY, getBridgeInstance } from './shared'
+import { BRIDGE_DEVTOOLS_ACTION_KEY, BRIDGE_DEVTOOLS_LISTENER_KEY, devtoolsActionEvents, devtoolsListenerEvents, getBridgeInstance, getBridgeTarget } from './shared'
 
 export function defineDevToolsAction<T>(name: string, action: (devtools: DevToolsType, ...args: any[]) => T | Promise<T>) {
   return async (...args: any[]) => {
-    const bridge = getBridgeInstance()
-    const uniqueEventKey = nanoid()
+    const target = getBridgeTarget()
+    if (target === 'devtools') {
+      const bridge = getBridgeInstance()
+      const uniqueEventKey = nanoid()
+      return await new Promise<T>((resolve) => {
+        bridge.once(uniqueEventKey, (e: T) => {
+          resolve(e)
+        })
 
-    return await new Promise<T>((resolve) => {
-      bridge.once(uniqueEventKey, (e: T) => {
-        resolve(e)
+        bridge.emit(BRIDGE_DEVTOOLS_ACTION_KEY, {
+          name,
+          key: uniqueEventKey,
+          args,
+        })
       })
-
-      bridge.emit(BRIDGE_DEVTOOLS_ACTION_KEY, {
-        name,
-        key: uniqueEventKey,
-        action: `${action}`,
-        args,
-      })
-    })
+    }
+    else {
+      devtoolsActionEvents.set(name, action)
+    }
   }
 }
 
-export function defineDevToolsListener<T>(fn: (devtools: DevToolsType, callback: Function) => void, options: { parser?: 'json' | 'devtools' } = {}) {
+export function defineDevToolsListener<T>(name: string, fn: (devtools: DevToolsType, callback: Function) => void, options: { parser?: 'json' | 'devtools' } = {}) {
   return (listener: (payload: T) => void) => {
-    const {
-      parser = 'devtools',
-    } = options
-    const parserFn = parser === 'devtools' ? parse : JSON.parse
-    const bridge = getBridgeInstance()
-    const uniqueEventKey = nanoid()
+    const target = getBridgeTarget()
+    if (target === 'devtools') {
+      const {
+        parser = 'devtools',
+      } = options
+      const parserFn = parser === 'devtools' ? parse : JSON.parse
+      const bridge = getBridgeInstance()
+      const uniqueEventKey = nanoid()
 
-    const off = bridge.on(uniqueEventKey, (e) => {
-      listener(parserFn(e))
-    })
+      const off = bridge.on(uniqueEventKey, (e) => {
+        listener(parserFn(e))
+      })
 
-    bridge.emit(BRIDGE_DEVTOOLS_LISTENER_KEY, {
-      key: uniqueEventKey,
-      action: `${fn}`,
-      parser,
-    })
+      bridge.emit(BRIDGE_DEVTOOLS_LISTENER_KEY, {
+        key: uniqueEventKey,
+        name,
+        parser,
+      })
 
-    return off
+      return off
+    }
+    else {
+      devtoolsListenerEvents.set(name, fn)
+      return () => {}
+    }
   }
 }
diff --git a/packages/core/src/bridge/app.ts b/packages/core/src/bridge/app.ts
index bb0d06a16..ca8dd0a74 100644
--- a/packages/core/src/bridge/app.ts
+++ b/packages/core/src/bridge/app.ts
@@ -1,22 +1,29 @@
 import { devtools, stringify } from '@vue/devtools-kit'
+import { initDevToolsAEvent } from '../bridge-events'
 import { BridgeInstanceType } from './core'
-import { BRIDGE_DEVTOOLS_ACTION_KEY, BRIDGE_DEVTOOLS_LISTENER_KEY } from './shared'
+import { BRIDGE_DEVTOOLS_ACTION_KEY, BRIDGE_DEVTOOLS_LISTENER_KEY, devtoolsActionEvents, devtoolsListenerEvents, setBridgeTarget } from './shared'
 
 export function setupAppBridge(bridge: BridgeInstanceType) {
+  setBridgeTarget('app')
+
+  initDevToolsAEvent()
+
   bridge.on(BRIDGE_DEVTOOLS_ACTION_KEY, async (payload) => {
-  // eslint-disable-next-line no-new-func
-    const action = new Function('devtools', '...args', `return (${payload.action})(devtools, ...args)`)
-    const result = await action(devtools, ...payload.args)
-    bridge.emit(payload.key, result)
+    const action = devtoolsActionEvents.get(payload.name)!
+    if (action) {
+      const result = await action(devtools, ...payload.args)
+      bridge.emit(payload.key, result)
+    }
   })
 
   bridge.on(BRIDGE_DEVTOOLS_LISTENER_KEY, async (payload) => {
-  // eslint-disable-next-line no-new-func
-    const action = new Function(`return ${payload.action}`)
-    const callback = action()
-    callback(devtools, (res) => {
-      const stringifyFn = payload.parser === 'devtools' ? stringify : JSON.stringify
-      bridge.emit(payload.key, stringifyFn(res))
-    })
+    const listener = devtoolsListenerEvents.get(payload.name)!
+
+    if (listener) {
+      listener(devtools, (res: any) => {
+        const stringifyFn = payload.parser === 'devtools' ? stringify : JSON.stringify
+        bridge.emit(payload.key, stringifyFn(res))
+      })
+    }
   })
 }
diff --git a/packages/core/src/bridge/devtools.ts b/packages/core/src/bridge/devtools.ts
index f29c13928..3793fc583 100644
--- a/packages/core/src/bridge/devtools.ts
+++ b/packages/core/src/bridge/devtools.ts
@@ -1,6 +1,7 @@
 import { BridgeInstanceType } from './core'
-import { setBridgeInstance } from './shared'
+import { setBridgeInstance, setBridgeTarget } from './shared'
 
 export function setupDevToolsBridge(bridge: BridgeInstanceType) {
   setBridgeInstance(bridge)
+  setBridgeTarget('devtools')
 }
diff --git a/packages/core/src/bridge/shared.ts b/packages/core/src/bridge/shared.ts
index 325d36654..8266a5796 100644
--- a/packages/core/src/bridge/shared.ts
+++ b/packages/core/src/bridge/shared.ts
@@ -5,6 +5,13 @@ export const BRIDGE_DEVTOOLS_ACTION_KEY = 'devtools:bridge-action'
 export const BRIDGE_DEVTOOLS_LISTENER_KEY = 'devtools:bridge-listener'
 
 export const BRIDGE_GLOBAL_VAR_KEY = '__vue_devtools_bridge__'
+export const BRIDGE_TARET_KEY = '__vue_devtools_bridge_target__'
+
+export const BRIDGE_DEVTOOLS_ACTION_EVENTS_KEY = 'devtools:bridge-action-events'
+export const BRIDGE_DEVTOOLS_LISTENER_EVENTS_KEY = 'devtools:bridge-listener-events'
+
+export const devtoolsActionEvents = target[BRIDGE_DEVTOOLS_ACTION_EVENTS_KEY] = new Map<string, Function>()
+export const devtoolsListenerEvents = target[BRIDGE_DEVTOOLS_LISTENER_EVENTS_KEY] = new Map<string, Function>()
 
 export function getBridgeInstance(): BridgeInstanceType {
   return target[BRIDGE_GLOBAL_VAR_KEY]
@@ -13,3 +20,11 @@ export function getBridgeInstance(): BridgeInstanceType {
 export function setBridgeInstance(instance: BridgeInstanceType) {
   target[BRIDGE_GLOBAL_VAR_KEY] = instance
 }
+
+export function setBridgeTarget(t: 'devtools' | 'app') {
+  target[BRIDGE_TARET_KEY] = t
+}
+
+export function getBridgeTarget(): 'devtools' | 'app' {
+  return target[BRIDGE_TARET_KEY]
+}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index c70e13896..02e1ad81c 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -4,3 +4,5 @@ export * from './handshake'
 export * from './client'
 export * from './bridge'
 export * from './vite-bridge'
+export * from './bridge-events/devtools-actions'
+export * from './bridge-events/devtools-listeners'
diff --git a/packages/core/src/vue-plugin.ts b/packages/core/src/vue-plugin.ts
index ffc5a0259..f33126b48 100644
--- a/packages/core/src/vue-plugin.ts
+++ b/packages/core/src/vue-plugin.ts
@@ -1,8 +1,10 @@
 import type { App, InjectionKey, Plugin, Ref } from 'vue'
 import { inject, ref } from 'vue'
-import type { AppRecord, CustomCommand, CustomTab, DevToolsState } from '@vue/devtools-kit'
+import type { AppRecord, CustomCommand, CustomTab } from '@vue/devtools-kit'
 import type { BridgeInstanceType } from './bridge'
-import { defineDevToolsAction, defineDevToolsListener } from './bridge/api'
+
+import { onDevToolsStateUpdated } from './bridge-events/devtools-listeners'
+import { getDevToolsState } from './bridge-events/devtools-actions'
 
 export interface DevToolsPluginOptions {
   bridge: BridgeInstanceType
@@ -23,66 +25,8 @@ function initDevToolsState() {
   const activeAppRecordId = ref('')
 
   function init() {
-    // @TODO: refactor
-    const getDevToolsState = defineDevToolsAction('devtools:get-state', (devtools) => {
-      return {
-        connected: devtools.state.connected,
-        clientConnected: devtools.state.clientConnected,
-        vueVersion: devtools.state?.activeAppRecord?.version || '',
-        tabs: devtools.state.tabs,
-        commands: devtools.state.commands,
-        vitePluginDetected: devtools.state.vitePluginDetected,
-        appRecords: devtools.state.appRecords.map(item => ({
-          id: item.id,
-          name: item.name,
-          version: item.version,
-          routerId: item.routerId,
-          moduleDetectives: item.moduleDetectives,
-        })),
-        activeAppRecordId: devtools.state.activeAppRecordId,
-      }
-    })
-
-    const onDevToolsStateUpdated = defineDevToolsListener<DevToolsState & { vueVersion: string }>((devtools, callback) => {
-      function setPayload(payload: DevToolsState & { vueVersion?: string }) {
-        return {
-          vueVersion: payload?.activeAppRecord?.version || '',
-          connected: payload.connected,
-          clientConnected: payload.clientConnected,
-          tabs: payload.tabs,
-          commands: payload.commands,
-          vitePluginDetected: payload.vitePluginDetected,
-          appRecords: payload.appRecords.map(item => ({
-            id: item.id,
-            name: item.name,
-            version: item.version,
-            routerId: item.routerId,
-            moduleDetectives: item.moduleDetectives,
-          })),
-          activeAppRecordId: payload.activeAppRecordId,
-        }
-      }
-      function subscribe() {
-        devtools.api.on.devtoolsStateUpdated((payload) => {
-          callback(setPayload(payload))
-        })
-      }
-      if (devtools?.api) {
-        subscribe()
-      }
-      else {
-        const timer = setInterval(() => {
-          if (devtools.state.connected) {
-            const payload = devtools.state
-            callback(setPayload(payload))
-            subscribe()
-            clearInterval(timer)
-          }
-        }, 10)
-      }
-    })
-
-    getDevToolsState().then((data) => {
+    getDevToolsState().then((_data) => {
+      const data = _data!
       connected.value = data.connected
       clientConnected.value = data.clientConnected
       vueVersion.value = data.vueVersion || ''