Firefox 的全新内存工具

Firefox 开发版 44,上周发布,包含全新的 内存工具,帮助您了解您的 web 应用程序如何使用和保留内存。这对针对移动 web 的开发者尤其有用,因此他们需要处理受限的资源。 Baptiste Kaenel,来自法国的自由创意设计师,也是 Mozilla 社区成员,制作了一段精彩的视频演示了如何使用这个强大的新工具。

内存工具通过对内存中所有内容进行快照,并以树/表格的形式呈现,并提供各种分组设置来实现。默认情况下,内容按“粗略类型”分组,内存中的每个东西都属于四种分类之一

  • 对象:JavaScript 对象。根据每个对象的内部 [[Class]] 名称进一步分组。
  • 脚本:web 应用程序加载的 JavaScript 源代码文本及其由 SpiderMonkey 的 JIT 编译器 IonMonkey 生成的可执行机器代码。
  • 字符串:web 应用程序使用的 JavaScript 字符串。
  • 其他:不属于上述类别的各种结构。

您还可以按“对象类”分组快照,按它们的 JavaScript [[Object]] 类分组,或按“内部类型”分组,按它们的 C++ 类型名称分组。后者主要用于 Firefox 平台开发者。

也许最有趣的是第四种也是最后一种分组选项:“分配堆栈”。您需要手动启用此选项,方法是选中内存面板顶部的“记录分配堆栈”复选框,因为跟踪分配可能会降低应用程序的性能,尤其是在选中此复选框的情况下。但是,收益是值得的:此视图根据 JavaScript 代码中的源位置对堆中的内容进行分组。与其他分组不同,此视图将内存中的项目直接链接到实际创建它们的代码。

Screenshot of the Memory panel showing several heap snapshots

快照列表还包括快照中占用的内存总 MB 数。您可以拍摄多个快照,以便轻松地判断您的应用程序的内存使用量随着时间的推移是增加还是减少。

要了解更多信息,请查看 内存工具文档,并在 MDN 上查看,记住,我们希望听到您的意见!立即下载 Firefox 开发版,并通过评论或在 @FirefoxDevTools 上发布推文,告诉我们您希望在未来看到哪些工具或增强功能。

关于 Dan Callahan

Mozilla 开发者关系工程师,前 Mozilla Persona 开发人员。

Dan Callahan 的更多文章…

关于 Nick Fitzgerald

我喜欢计算、自行车、嘻哈、书籍和绘图仪。我的代词是 he/him。

Nick Fitzgerald 的更多文章…


4 个评论

  1. Valentin

    非常感谢这个工具!它已经帮助我找到了一些小型项目中的内存泄漏。

    快速问题:我想这并不容易,但计划添加内存使用情况的图形可视化(例如性能工具)吗?这可能很慢,但我的目标是确定内存大小如何随着实时操作而变化。

    2015 年 11 月 13 日 下午 07:46

    1. Dan Callahan

      是的!它现在正在进行中 :)

      2015 年 11 月 13 日 上午 08:29

  2. Francis Kim

    非常确定 Chrome 已经有了这个……对吧?

    2015 年 11 月 16 日 下午 18:09

  3. Rachatici

    非常感谢这个工具!我

    2015 年 11 月 24 日 上午 07:24

本文的评论已关闭。