阅读 1803

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

特别声明

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

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

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

正文

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

35. queryObjects function 对象查询方法

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

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

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

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

36. monitor functions 镜像函数

monitorDevTools 的一个方法, 它能够让你 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 上推荐我们的中文翻译啦

关注下面的标签,发现更多相似文章
评论