Question

queryObjects函数返回给定原型的实例。我想检查那些实例的固定器。为此，我需要在devtools内存快照中找到它们。这些实例类型之一是“对象”，因此按类类型搜索没有帮助。他们太多了。

如何在快照中找到该特定实例？

Answer 1

如果可以修改这些对象，则可以尝试以下技巧。

将您从queryObjects获得的数组存储到temp变量中。您可以通过上下文菜单来实现。然后运行以下代码，为每个对象赋予唯一的ID：

temp1.forEach((t, i) => t.__id = String(i))

然后拍摄一个堆快照。现在，每个对象都应该可以通过该__id字符串进行识别。

Answer 2

添加显式字符串属性，例如let o = {type:'myType'}，然后在快照中使用ctrl + F。

所有您的o对象都有保留器。

Answer 3

很难将 queryObjects 返回的普通“对象”与堆快照中的所有普通对象区分开来

这是我为“标记”对象所做的工作，以便我可以轻松区分它们：

创建一个可以在开发工具中轻松找到的 TaggedItem 类
创建一个包装函数来代替 queryObjects
包装函数将返回值保存在 WeakMap 中

key为原始返回值
值为 TaggedItem
当原始值不再保留在任何地方时 - 它会自动从 WeakMap 中垃圾收集

在 queryObjects 上应用装饰器

function queryObjects { /* Implementation */ }

// or process.env.NODE_ENV == 'development'
if (__DEV__) {
  export default wrapWithObjectTagging(queryObjects);
}
else {
  export default queryObjects;
}

装饰器实现

function wrapWithObjectTagging(func) {
  function withObjectTagging(...args) {
     const originalReturnValue = func.apply(this, args);

     /* We're using Promise.resolve in case the original function returns a promise */
     Promise.resolve(originalReturnValue)
       .then((data) => {
         // Weak map keys can be objects only
         if (typeof data == 'object') {
           const tag = new TaggedItem(data);
           taggedItems.set(data, tag);
         }
     });

     return originalReturnValue;
  }

  return withObjectTagging;
}

/**
 * Capture tags in a weak map
 * When the original object (key) is no longer used anywhere in app - the data (TaggedItem)
 * is free for garbage collection and removed
 * Using dev tools we see which TaggedItems are still retained and what's using them - preventing GC
 * @type {WeakMap<object, TaggedItem>}
 */
const taggedItems = new WeakMap();

/**
 * Class instances are easily tracked by Dev tools memory snapshots
 * Wrapping a result with such instance allows us to track it without
 * incurring extra weight
 */
class TaggedItem {
  constructor(data) {
    // This ref helps us inspect what is retaining the original data
    this.ref = data;

    /* This is not really necessary but makes the TaggedItem represent 
       Retained Memory more accurately */
    Object.assign(this, data);    
  }
}

TaggedItem 直接引用原始数据，但由于没有引用 TaggedItem - 我们从不公开它 - 它不会阻止 WeakMap 垃圾收集原始数据和捕获它的 TaggedItem

以下是 Chrome 开发工具中工作原理的示例：

拍摄堆快照
搜索对象类名（TaggedItem）
选择一个项目
查看固定器

例子

我们正在观察一个 TaggedItem
它由另一个使用原始数据的对象的 report 属性保留

更简单的方法是在原始对象上附加一个键

通过附加自定义字段进行装饰

function wrapWithObjectTagging(func) {
  function withObjectTagging(...args) {
     const originalReturnValue = func.apply(this, args);
     if (typeof originalReturnValue == 'object') {
       originalReturnValue.__tag = new TaggedItem();
     }

     return originalReturnValue;
  }

  return withObjectTagging;
}

class TaggedItem {}

通过这种方式，您仍然可以在开发工具中通过 TaggedItem 进行过滤，并查看保留 TaggedItem 以及父对象的内容

第一种方法可以更好地估计总保留内存，而简单的方法只允许您跟踪保留原始内存的内容

如果对象的类型只是“对象”，如何在DevTools内存快照中找到特定的对象？

3 个答案: