【譯】你不知道的 Chrome 除錯工具技巧 第十三天：物件 & 方法

dendoink發表於2018-12-18
Chrome除錯物件

特別宣告

本文是作者 Tomek Sułkowski 釋出在 medium 上的一個系列。據作者透露一共有 24 篇，一直更新到 12 月 24 日
版權歸原作者所有。

作者在 Twitter 上推薦我們的中文翻譯啦,截圖在最後

譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀，授權的記錄在這裡

正文

在馬上就要迎來假期的這 24 天裡，我將會發布一系列短篇的文章，關於如何更加有意思的使用開發工具，昨天我們見過了條件斷點和 "ninja logs" ,今天我們繼續來看...

35. queryObjects function 物件查詢方法

【譯】你不知道的 Chrome 除錯工具技巧 第十三天：物件 & 方法

假如我們有這樣一段程式碼，我們在裡面定義了一些物件。

那麼特定的時刻，特定的執行上下文中，存在哪些物件呢？

DevTools 有一個 queryObjects 函式，向我們展示了這一點。

請注意，列表中建立的最後一個物件是不可用的：因為在程式碼執行後，對於它的引用並沒有留存下來，現在我們只有 3 個 person 物件：

【譯】你不知道的 Chrome 除錯工具技巧 第十三天：物件 & 方法

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 方法追蹤會產生什麼結果：

【譯】你不知道的 Chrome 除錯工具技巧 第十三天：物件 & 方法

這會讓我們少寫很多 console.logs !

今天的分享就到這裡~

我們注意到，

慣例： 如果你從這裡學到了一些新東西

→ 你可以點個贊再走嘛~
→ 關注我：Twitter：Tomek Sułkowski

其他系列

其他此係列的文章，馬上就會翻譯出來，到時會貼出對應的連結在此處。

寫在最後

如果你對我的翻譯表示肯定，也可以關注我一波哦~ 順便我的開源專案，求一波 star→ 看這裡, 美麗的部落格系統

作者在 Twitter 上推薦我們的中文翻譯啦

【譯】你不知道的 Chrome 除錯工具技巧 第十三天：物件 & 方法

相關文章