【译】你不知道的 Chrome 调试工具技巧第十三天：对象 & 方法

特别声明

本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。据作者透露一共有 24 篇，一直更新到 12 月 24 日
版权归原作者所有。

作者在 Twitter 上推荐我们的中文翻译啦,截图在最后

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读，授权的记录在这里

正文

在马上就要迎来假期的这 24 天里，我将会发布一系列短篇的文章，关于如何更加有意思的使用开发工具，昨天我们见过了条件断点和 "ninja logs" ,今天我们继续来看...

35. `queryObjects function` 对象查询方法

假如我们有这样一段代码，我们在里面定义了一些对象。

那么特定的时刻，特定的执行上下文中，存在哪些对象呢？

DevTools 有一个 queryObjects 函数，向我们展示了这一点。

请注意，列表中创建的最后一个对象是不可用的：因为在代码执行后，对于它的引用并没有留存下来，现在我们只有 3 个 person 对象：

36. `monitor functions` 镜像函数

monitor 是 DevTools 的一个方法, 它能够让你 spy(潜入) 到任何 "function calls(方法的调用)" 中：每当一个 spied 被潜入 的方法运行的时候，console 控制台 会把它的实例打印出来，包含函数名以及调用它的参数。

让我们把前面例子里面的 Person 类拿过来并且扩展两个方法：

class Person {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }

  greet() {
    return this.getMessage('greeting');
  }
  getMessage(type) {
    if (type === 'greeting') {
      return `Hello, I'm ${this.name}!`;
    }
  }
}

如你所见，greet 方法通过一个特殊的参数来执行 getMessage 方法，让我们看看对 getMessage 方法追踪会产生什么结果：

这会让我们少写很多 console.logs !

今天的分享就到这里~

我们注意到，

惯例：如果你从这里学到了一些新东西

→ 你可以点个赞再走嘛~
→ 关注我：Twitter：Tomek Sułkowski

其他系列

其他此系列的文章，马上就会翻译出来，到时会贴出对应的链接在此处。

写在最后

如果你对我的翻译表示肯定，也可以关注我一波哦~ 顺便我的开源项目，求一波 star→ 看这里, 美丽的博客系统

作者在 Twitter 上推荐我们的中文翻译啦

【译】你不知道的 Chrome 调试工具技巧 第十三天：对象 & 方法