【譯】你不知道的 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` 鏡像函數