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

特别声明

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

做者在 Twitter 上推荐咱们的中文翻译啦,截图在最后
vue

译者在翻译前已经和做者沟通获得了翻译整个系列的受权。
为了避免影响你们阅读，受权的记录在这里
java

正文

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

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

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

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

DevTools 有一个 queryObjects 函数，向咱们展现了这一点。编辑器

请注意，列表中建立的最后一个对象是不可用的：由于在代码执行后，对于它的引用并无留存下来，如今咱们只有 3 个 person 对象：函数

36. `monitor functions` 镜像函数

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

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

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→ 看这里, 美丽的博客系统

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

特别声明

正文

35. queryObjects function 对象查询方法

36. monitor functions 镜像函数

其余系列

写在最后

做者在 Twitter 上推荐咱们的中文翻译啦

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

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

36. `monitor functions` 镜像函数