feat(extension): inspect dom

Author: webfansplz

packages/applet/src/modules/components/index.vue

@@ -234,6 +234,13 @@ function scrollToComponent() {
   rpc.value.scrollToComponent(activeComponentId.value)
 }
 
+function inspectDOM() {
+  rpc.value.inspectDOM(activeComponentId.value).then(() => {
+    // @ts-expect-error skip type check
+    chrome.devtools.inspectedWindow.eval('inspect(window.__VUE_DEVTOOLS_INSPECT_DOM_TARGET__)')
+  })
+}
+
 function getComponentRenderCode() {
   rpc.value.getComponentRenderCode(activeComponentId.value).then((data) => {
     componentRenderCode.value = data!
@@ -297,6 +304,7 @@ function closeComponentRenderCode() {
             <div class="flex items-center gap-2 px-1">
               <i v-tooltip.bottom="'Scroll to component'" class="i-material-symbols-light:eye-tracking-outline h-4 w-4 cursor-pointer hover:(op-70)" @click="scrollToComponent" />
               <i v-tooltip.bottom="'Show render code'" class="i-material-symbols-light:code h-5 w-5 cursor-pointer hover:(op-70)" @click="getComponentRenderCode" />
+              <i v-if="isInChromePanel" v-tooltip.bottom="'Inspect DOM'" class="i-material-symbols-light:menu-open h-5 w-5 cursor-pointer hover:(op-70)" @click="inspectDOM" />
               <i v-if="activeTreeNodeFilePath && !isInChromePanel" v-tooltip.bottom="'Open in Editor'" class="i-carbon-launch h-4 w-4 cursor-pointer hover:(op-70)" @click="openInEditor" />
             </div>
           </div>

packages/core/src/rpc/global.ts

@@ -84,6 +84,9 @@ export const functions = {
   scrollToComponent(id: string) {
     return devtools.ctx.api.scrollToComponent(id)
   },
+  inspectDOM(id: string) {
+    return devtools.ctx.api.inspectDOM(id)
+  },
   getInspectorNodeActions(id: string) {
     return getInspectorNodeActions(id)
   },

packages/devtools-kit/src/ctx/api.ts

@@ -1,8 +1,10 @@
 import type { HookKeys, Hookable } from 'hookable'
+import { target } from '@vue/devtools-shared'
 import type { CustomInspectorState } from '../types'
 import { StateEditor } from '../core/component/state/editor'
 import { cancelInspectComponentHighLighter, inspectComponentHighLighter, scrollToComponent } from '../core/component-highlighter'
 import { getComponentInstance } from '../core/component/utils'
+import { getRootElementsFromComponentInstance } from '../core/component/tree/el'
 import { openInEditor } from '../core/open-in-editor'
 import { normalizeRouterInfo } from '../core/router'
 import { getComponentInspector } from '../core/component-inspector'
@@ -108,6 +110,16 @@ export function createDevToolsApi(hooks: Hookable<DevToolsContextHooks & DevTool
         callInspectorUpdatedHook()
       }
     },
+    // inspect dom
+    inspectDOM(instanceId: string) {
+      const instance = getComponentInstance(activeAppRecord.value, instanceId)
+      if (instance) {
+        const [el] = getRootElementsFromComponentInstance(instance)
+        if (el) {
+          target.__VUE_DEVTOOLS_INSPECT_DOM_TARGET__ = el
+        }
+      }
+    },
   }
 }