update

Author: MrWangJustToDo

chrome/public/bundle/hook.js

@@ -2091,6 +2091,7 @@
     		    return PlainNode;
     		}());
 
+    		/* eslint-disable max-lines */
     		var treeMap = new Map();
     		var detailMap = new Map();
     		var fiberStore = new Map();
@@ -2279,8 +2280,22 @@
     		        return created;
     		    }
     		};
-    		var getComponentFiberByDom = function (dom) {
+    		var getFiberByDom = function (dom) {
     		    var fiber = domToFiber.get(dom);
+    		    if (!fiber) {
+    		        if (dom.parentElement) {
+    		            return getFiberByDom(dom.parentElement);
+    		        }
+    		        else {
+    		            return null;
+    		        }
+    		    }
+    		    else {
+    		        return fiber;
+    		    }
+    		};
+    		var getComponentFiberByDom = function (dom) {
+    		    var fiber = getFiberByDom(dom);
     		    if (!fiber)
     		        return;
     		    var r = fiber;
@@ -4545,6 +4560,7 @@
     		exports.getDetailNodeByFiber = getDetailNodeByFiber;
     		exports.getElementName = getElementName;
     		exports.getElementNodesFromFiber = getElementNodesFromFiber;
+    		exports.getFiberByDom = getFiberByDom;
     		exports.getFiberName = getFiberName;
     		exports.getFiberNodeById = getFiberNodeById;
     		exports.getFiberTag = getFiberTag;

chrome/public/bundle/proxy.js

@@ -1991,6 +1991,7 @@
     		    return PlainNode;
     		}());
 
+    		/* eslint-disable max-lines */
     		var treeMap = new Map();
     		var detailMap = new Map();
     		var fiberStore = new Map();
@@ -2179,8 +2180,22 @@
     		        return created;
     		    }
     		};
-    		var getComponentFiberByDom = function (dom) {
+    		var getFiberByDom = function (dom) {
     		    var fiber = domToFiber.get(dom);
+    		    if (!fiber) {
+    		        if (dom.parentElement) {
+    		            return getFiberByDom(dom.parentElement);
+    		        }
+    		        else {
+    		            return null;
+    		        }
+    		    }
+    		    else {
+    		        return fiber;
+    		    }
+    		};
+    		var getComponentFiberByDom = function (dom) {
+    		    var fiber = getFiberByDom(dom);
     		    if (!fiber)
     		        return;
     		    var r = fiber;
@@ -4445,6 +4460,7 @@
     		exports.getDetailNodeByFiber = getDetailNodeByFiber;
     		exports.getElementName = getElementName;
     		exports.getElementNodesFromFiber = getElementNodesFromFiber;
+    		exports.getFiberByDom = getFiberByDom;
     		exports.getFiberName = getFiberName;
     		exports.getFiberNodeById = getFiberNodeById;
     		exports.getFiberTag = getFiberTag;

chrome/src/components/NodeValue.tsx

@@ -127,13 +127,13 @@ export const NodeValue = ({
     if (expand && cData) {
       if (Array.isArray(cData)) {
         cData.forEach((i) => {
-          if (i.e && i.i && !i.l && !useChunk.getReadonlyState().data?.[i.i]?.loaded) {
+          if (i && i.e && i.i && !i.l && !useChunk.getReadonlyState().data?.[i.i]?.loaded) {
             useChunk.getActions().setLoading(i.i);
           }
         });
       } else {
         Object.values(cData).forEach((i: any) => {
-          if (i.e && i.i && !i.l && !useChunk.getReadonlyState().data?.[i.i]?.loaded) {
+          if (i && i.e && i.i && !i.l && !useChunk.getReadonlyState().data?.[i.i]?.loaded) {
             useChunk.getActions().setLoading(i.i);
           }
         });
@@ -171,7 +171,7 @@ export const NodeValue = ({
 
     const isElement = item.t === "Element";
 
-    const isFunction = item.t === "Function" || item.t === 'AsyncFunction' || item.t === 'GeneratorFunction';
+    const isFunction = item.t === "Function" || item.t === "AsyncFunction" || item.t === "GeneratorFunction";
 
     const element = (
       <span className={`hook-${item.t} ${isReadError ? "text-red-300" : ""} ${isElement || isFunction ? "text-teal-600" : ""}`}>{textContent}</span>

packages/core/src/tree.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { include, STATE_TYPE, type ListTree } from "@my-react/react-shared";
 
 import { getValueById } from "./data";
@@ -291,9 +292,23 @@ export const getDetailNodeByFiber = (fiber: MyReactFiberNode) => {
   }
 };
 
-export const getComponentFiberByDom = (dom: HTMLElement) => {
+export const getFiberByDom = (dom: HTMLElement) => {
   const fiber = domToFiber.get(dom);
 
+  if (!fiber) {
+    if(dom.parentElement) {
+      return getFiberByDom(dom.parentElement as HTMLElement);
+    } else {
+      return null;
+    }
+  } else {
+    return fiber;
+  }
+}
+
+export const getComponentFiberByDom = (dom: HTMLElement) => {
+  const fiber = getFiberByDom(dom);
+
   if (!fiber) return;
 
   let r = fiber;