网页检查器参考 控制台命令行 API

获取器

$_ 等于上次控制台评估的结果。
$0 等于**元素**选项卡中DOM 树中当前选定的 DOM 节点。
$1 到 $99 都与 $_ 类似，它们分别等于最近 99 次**控制台**评估中的一个。

每次后续评估都将从“下一个”索引访问。
当**控制台**评估超过 99 次时，计数会通过替换 $1 而“重新开始”。
清除**控制台**会重置所有保存的值。
右键单击任何对象预览并在上下文菜单中选择“记录值”将自动记录并保存该值到**控制台**。

网页检查器中还存在此功能的其他版本，例如在**元素**选项卡中的DOM 树中，所有 DOM 节点都有“记录元素”选项。

$exception 等于 JavaScript 执行在被抛出后暂停时的当前异常。
$event 等于 JavaScript 执行在 DOM 事件监听器内部暂停时的当前 DOM 事件。

函数

$(selector[, context]) 是 (context || document).querySelector(selector) 的快捷方式。
$$(selector[, context]) 是 (context || document).querySelectorAll(selector) 的快捷方式。
$x(xpath[, context]) 是 document.evaluate(xpath, (context || document), null, XPathResult.ANY_TYPE, null) 的快捷方式。

keys(object) 是 Object.keys(object) 的快捷方式。
values(object) 是 Object.values(object) 的快捷方式。

queryInstances(prototypeOrConstructor) 返回一个数组，其中包含所有继承自给定 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) 返回一个数组，其中包含所有引用给定 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 只考虑强引用给定 object 的对象，因此 WeakMap/WeakSet 不被考虑在内。

getEventListeners(eventTarget) 返回一个对象，该对象将 DOM 事件名称映射到给定 eventTarget 的 DOM 事件监听器。

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

monitorEvents(eventTarget[, types]) 添加一个 DOM 事件监听器，它会为给定 types（如果提供）调用 console.log。

如果未提供 types，则会使用一组预设的 DOM 事件代替（abort、blur、change、control、devicemotion、deviceorientation、error、focus、key、load、mouse、reset、resize、scroll、search、select、submit、touch 和 unload）。

还有一些特殊字符串可用作 types 中的任何值，它们代表一组 DOM 事件：

`鼠标事件`	`mousedown` `mouseup` `click` `dblclick` `mousemove` `mouseover` `mouseout` `mousewheel`
`键盘事件`	`keydown` `keyup` `keypress` `textInput`
`触摸事件`	`touchstart` `touchmove` `touchend` `touchcancel`
`控制事件`	`resize` `scroll` `zoom` `focus` `blur` `select` `change` `submit` `reset`

unmonitorEvents(eventTarget[, types]) 移除通过 monitorEvents 为给定 types（如果提供）之前添加的任何 DOM 事件监听器。

copy(value) 会将给定 value 的文本表示形式（例如 value.toString()、JSON.stringify(value) 等）复制到系统剪贴板。

如果 value 是一个 DOM 节点，它将复制 value.outerHTML。

inspect(value) 会在网页检查器最相关的部分显示给定 value。

如果给定 value 是一个函数，其源代码位置将显示在**源**选项卡中。
如果给定 value 是一个 DOM 节点，它将在**元素**选项卡中的DOM 树中显示。
如果给定 value 是一个 Storage 对象，它将在**存储**选项卡中显示。

每个 console 方法都有一个快捷方式（例如 console.log([...data]) 可以调用为 log([...data])）。

保存结果别名

上面描述的获取器被视为一种“最后手段”引用，这意味着如果被检查的目标定义了自己的 globalThis.$0 或 globalThis.$1，则将使用它们而不是获取器。

网页检查器在**设置**选项卡的**控制台**面板中提供了一个输入框，用于这些情况，允许您为每个获取器设置一个别名。

输入框的值会替换每个获取器名称中的“$”符号。例如，别名为“tmp”会导致 $_、$0 和 $exception 也可以通过 tmp_、tmp0 和 tmpexception 引用。

请记住，这只影响获取器，因此函数（如 $x）不会被别名化。

为 Safari 技术预览更新。试用它以获取最新的网页检查器功能，包括上述所有功能及更多。

撰写于 2020 年 1 月 14 日，作者：Brian Burg、Devin Rousso、Joseph Pecoraro 和 Timothy Hatcher

最后更新于 2022 年 7 月 5 日，作者 Devin Rousso

网页检查器参考控制台命令行 API

目录

获取器

函数

保存结果别名