Match-id-3623217ead4919cd5624a24a69e6e6612df52506

libs/extension/src/components/ComponentInfo.tsx

@@ -1,13 +1,12 @@
 import styles from './ComponentsInfo.less';
 import Eye from '../svgs/Eye';
 import Debug from '../svgs/Debug';
-import Copy from '../svgs/Copy';
 import Triangle from '../svgs/Triangle';
 import { useState, useEffect } from 'horizon';
 import { IData } from './VTree';
 import { buildAttrModifyData, IAttr } from '../parser/parseAttr';
 import { postMessageToBackground } from '../panelConnection';
-import { ModifyAttrs } from '../utils/constants';
+import { InspectDom, LogComponentData, ModifyAttrs } from '../utils/constants';
 
 type IComponentInfo = {
   name: string;
@@ -122,9 +121,6 @@ function ComponentAttr({ attrsName, attrsType, attrs, id }: {
     <div className={styles.attrContainer}>
       <div className={styles.attrHead}>
         <span className={styles.attrType}>{attrsName}</span>
-        <span className={styles.attrCopy}>
-          <Copy />
-        </span>
       </div>
       <div className={styles.attrDetail}>
         {showAttr}
@@ -141,10 +137,14 @@ export default function ComponentInfo({ name, attrs, parents, id, onClickParent
           <span className={styles.name}>
             {name}
           </span>
-          <span className={styles.eye} >
+          <span className={styles.eye} title={'Inspect dom element'} onClick={() => {
+            postMessageToBackground(InspectDom, id);
+          }}>
             <Eye />
           </span>
-          <span className={styles.debug}>
+          <span className={styles.debug} title={'Log this component data'} onClick={() => {
+            postMessageToBackground(LogComponentData, id);
+          }}>
             <Debug />
           </span>
         </>}

libs/extension/src/components/ComponentsInfo.less

@@ -20,11 +20,13 @@
     .eye {
       flex: 0 0 1rem;
       padding-right: 1rem;
+      cursor: pointer;
     }
 
     .debug {
       flex: 0 0 1rem;
       padding-right: 1rem;
+      cursor: pointer;
     }
   }
 
@@ -71,7 +73,7 @@
         }
 
         .attrValue {
-          margin-left: 4px;
+          margin: 0 0 0 4px;
         }
       }
     }

libs/extension/src/injector/index.ts

@@ -11,6 +11,8 @@ import {
   ModifyHooks,
   ModifyState,
   ModifyProps,
+  InspectDom,
+  LogComponentData
 } from '../utils/constants';
 import { VNode } from '../../../horizon/src/renderer/vnode/VNode';
 import { parseVNodeAttrs } from '../parser/parseAttr';
@@ -54,7 +56,7 @@ function parseCompAttrs(id: number) {
     console.error('Do not find match vNode, this is a bug, please report us');
     return;
   }
-  const parsedAttrs = parseVNodeAttrs(vNode);
+  const parsedAttrs = parseVNodeAttrs(vNode, helper.getHookInfo);
   postMessage(ComponentAttrs, parsedAttrs);
 }
 
@@ -120,6 +122,14 @@ function modifyVNodeAttrs(data) {
   }
 }
 
+function logComponentData(id: number) {
+  const vNode = queryVNode(id);
+  if (vNode) {
+    const info = helper.getComponentInfo(vNode);
+    console.log('Component Info: ', info);
+  }
+}
+
 let helper;
 
 function init(horizonHelper) {
@@ -154,6 +164,12 @@ function injectHook() {
         parseCompAttrs(data);
       } else if (type === ModifyAttrs) {
         modifyVNodeAttrs(data);
+      } else if (type === InspectDom) {
+        console.log(data);
+      } else if (type === LogComponentData) {
+        logComponentData(data);
+      } else {
+        console.warn('unknown command', type);
       }
     }
   });

libs/extension/src/utils/constants.ts

@@ -19,6 +19,11 @@ export const ModifyState = 'modify state';
 
 export const ModifyHooks = 'modify hooks';
 
+export const InspectDom = 'inspect component dom';
+
+export const LogComponentData = 'log component data';
+
+export const CopyComponentAttr = 'copy component attr';
 
 // 传递消息来源标志
 export const DevToolPanel = 'dev tool panel';