QueryObjects is a new Command Line API in Chrome 62.

The API is described on the official website

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 details

QueryObjects (Constructor) can find all instances of the Constructor specified in the currently-selected execution context.

execution context

  • execution contextIs the execution environment of the code, which defaults totop. The rest of theexecution contextCan come from an embedded iframe,Extensions,Service Worker

Constructor

  • Actually,queryObjectsThe value type of the first argument accepted can be a function or an object; in the case of a function, the function’s Prototype property value is used as the lookupA prototype object.
  • So use it in the consolequeryObjects(RegExp)andqueryObjects(RegExp.prototype)You end up with the same result.

The instance

  • preciselyqueryObjectsFrom the currentexecution contextFilter out all objects in the prototype chain containing the specifiedA prototype objectThe object. So here’s what happens.

The result of queryObjects(Object) contains the result of queryObjects(Array)

Use case

For the production environmentprojectDebug to get a specific instance object

  • Hope to get.shoplistCorresponding Vue component instance.
  • Through the firstqueryObjects(Object)Get all the objects that the Vue component instance must contain, storing the asynchronous result value as a global variabletemp1.
  • throughtemp1.filter(a=>a.shopList)Filter out the results.

Gets other commonly used objects

  • Get all ofRegExp,DateObject,
queryObjects(RegExp);
queryObjects(Date);
Copy the code
  • Get all theThe Generator function.Async function
queryObjects(Function) // Store the asynchronous result value as the global variable temp1

----------
temp1.filter(item= > {
  return foo[Symbol.toStringTag] === 'GeneratorFunction'
});
temp1.filter(item= > {
  return foo[Symbol.toStringTag] === 'AsyncFunction'
});
Copy the code
  • Get the Webpacked esModule
queryObjects(Object) // Store the asynchronous result value as the global variable temp1

----------
temp1.filter(a= >a.__esModule)
Copy the code