Web Inspector ReferenceConsole Command Line API

Contents

• Getters
• Functions
• Saved Result Alias

One of the most useful parts of Web Inspector is being able to generate interactive visualizations of any value in the Console.

But the Console can do so much more than just visualize values.

There are a number of specially exposed getters and functions available for use when evaluating JavaScript from the Console that provide extra functionality which cannot be done through any other means.

These getters and functions are synchronously referenceable as if they were a defined variable in the current scope.

Getters

• $_ is equal to the result of the last Console evaluation.
• $0 is equal to the currently selected DOM node in the DOM Tree in the Elements Tab.
• $1 through $99 are all similar to $_, in that they are each equal to one of the last 99 Console evaluations.
• Each successive evaluation will be accessible from the “next” index.
• When there are more than 99 Console evaluations, the count “starts over” by replacing $1.
• Clearing the Console resets all saved values.
• Right-clicking on any object preview and selecting Log Value in the context menu will automatically log and save the value to the Console.
• Other versions of this also exist throughout Web Inspector, such as in the DOM Tree in the Elements Tab, where all DOM nodes have Log Element instead.
• $exception is equal to the current exception while JavaScript execution is paused after it has been thrown.
• $event is equal to the current DOM event while JavaScript execution is paused inside a DOM event listener.

Functions

• $(selector[, context]) is a shortcut for (context || document).querySelector(selector).
• $$(selector[, context]) is a shortcut for (context || document).querySelectorAll(selector).
• $x(xpath[, context]) is a shortcut for document.evaluate(xpath, (context || document), null, XPathResult.ANY_TYPE, null).

---

• keys(object) is a shortcut for Object.keys(object).
• values(object) is a shortcut for Object.values(object).

---

• queryInstances(prototypeOrConstructor) returns an array of all objects that inherit from the given prototypeOrConstructor.

class Animal {
    constructor(species) {
        this.species = species;
    }
};

class Pet extends Animal {
    constructor(name, species) {
        super(species);
        this.name = name;
    }
};

let cat = new Animal("Cat");
let spot = new Pet("Spot", "Dog");

queryInstances(Animal)            // [ spot, cat, Pet ]
queryInstances(Pet)               // [ spot ]

queryInstances(Animal.prototype)  // [ spot, cat, Pet ]
queryInstances(Pet.prototype)     // [ spot ]

---

• queryHolders(object) returns an array of all objects that reference the given object.

class Person {
    constructor(name) {
        this.name = name;
    }
};

let john = new Person("John");

let alice = new Person("Alice");
alice.parent = john;

queryHolders(john)  // [ alice ]

• queryHolders only considers objects that strongly reference the given object, so WeakMap/WeakSet are not considered.

---

• getEventListeners(eventTarget) returns an object mapping DOM event names to DOM event listeners for the given eventTarget.

{
    <eventName>: [
        {
            Function listener,
            boolean once,
            boolean passive,
            boolean useCapture,
        },
        ...
    ],
    ...
}

---

• monitorEvents(eventTarget[, types]) adds a DOM event listener that calls console.log for the given types (if provided).
• If types is not provided, a predetermined set of DOM events is used instead (abort, blur, change, control, devicemotion, deviceorientation, error, focus, key, load, mouse, reset, resize, scroll, search, select, submit, touch, and unload).
• There are also special strings that can be used as any value in types that represent a “group” of DOM events:
  

  mouse	mousedown mouseup click dblclick mousemove mouseover mouseout mousewheel
  key	keydown keyup keypress textInput
  touch	touchstart touchmove touchend touchcancel
  control	resize scroll zoom focus blur select change submit reset

• unmonitorEvents(eventTarget[, types]) removes any DOM event listeners that were previously added for the given types (if provided) via monitorEvents.

---

• copy(value) will copy a text representation (e.g. value.toString(), JSON.stringify(value), etc.) of the given value to the system clipboard.
• If value is a DOM node, it will copy value.outerHTML instead.

---

• inspect(value) will reveal the given value in the most relevant part of Web Inspector.
• If the given value is a Function, its source code location will be shown in the Sources Tab.
• If the given value is a DOM node, it will be revealed in the DOM Tree in the Elements Tab.
• If the given value is a Storage object, it will be revealed in the Storage Tab.

There is also a shortcut for every console method (e.g. console.log([...data]) is callable as log([...data])).

Saved Result Alias

The getters described above are referenced as a sort of “last resort”, meaning that if the inspected target defines it’s own globalThis.$0 or globalThis.$1, they will be used instead of the getter.

Web Inspector has an input in the Console pane in the Settings Tab for these cases that allows you to set an alias for each getter.

The value of the input replaces the “$” in the name of each getter. For example, an alias of “tmp” would result in $_, $0, and $exception also being referenceable via tmp_, tmp0, and tmpexception.

Keep in mind this only affects getters, so functions (like $x) would not be aliased.