Web應用調試利器：queryObjects

queryObjects是Chrome 62新增的一個Command Line API。

官網這樣介紹該API

A new API for querying heap objects

Call queryObjects(Constructor) from the Console to return an array of objects that were created with the specified constructor. For example:

• queryObjects(Promise). Returns all Promises.
• queryObjects(HTMLElement). Returns all HTML elements.
• queryObjects(foo), where foo is a function name. Returns all objects that were instantiated via new foo().
• The scope of queryObjects() is the currently-selected execution context in the Console. See Selecting execution context.

API具體介紹

queryObjects(Constructor) 能夠去查找currently-selected execution context中指定Constructor的全部實例。

execution context

• execution context是代碼的執行環境，默認爲top。其餘的execution context能夠來自內嵌的iframe、Extensions、Service Worker

Constructor

• 其實queryObjects接受的第一個參數的值類型能夠是函數也能夠是對象，當是函數時，是使用函數的prototype屬性值做爲查找的原型對象。
• 因此在控制檯中使用queryObjects(RegExp)和queryObjects(RegExp.prototype)最終獲得的結果是相同的。

實例

• 準確來講 queryObjects從當前execution context中的全部對象中過濾出原型鏈中包含指定原型對象的對象。 因此有如下狀況。

queryObjects(Object)的結果會包含queryObjects(Array)的結果

使用案例

對生產環境的項目進行調試，獲取特定的實例對象

• 但願獲取.shoplist對應的Vue組件實例。
• 先經過queryObjects(Object)獲取全部的對象，Vue組件實例一定包含在其中，將異步結果值存爲全局變量temp1。
• 再經過temp1.filter(a=>a.shopList)過濾出結果。

獲取其餘經常使用對象

• 獲取全部的RegExp、Date對象,

queryObjects(RegExp);
queryObjects(Date);
複製代碼

• 獲取全部Generator 函數，async 函數

queryObjects(Function) // 將異步結果值存爲全局變量temp1

----------
temp1.filter(item => {
  return foo[Symbol.toStringTag] === 'GeneratorFunction'
});
temp1.filter(item => {
  return foo[Symbol.toStringTag] === 'AsyncFunction'
});
複製代碼

• 獲取通過webpack打包的esModule

queryObjects(Object) // 將異步結果值存爲全局變量temp1

----------
temp1.filter(a=>a.__esModule)
複製代碼