🌼 🐕 ⛹🏿 您可能从未使用过的Chrome控制台功能 👨🏽‍🎤 🤖 🏟️

Chrome开发者工具控制台可能是使用最广泛，最有用的专用浏览器工具之一。该控制台为程序员提供了许多有趣的功能。它有助于调试，分析和监视页面代码。我们今天翻译的材料专用于向您介绍Chrome控制台的某些功能，这些功能并未广为人知。

监控功能

该功能monitor用于组织对其他功能的监视。特别是，它允许您找出何时调用了某个函数以及调用了什么参数。考虑一个示例（其代码在Chrome控制台中输入）：

function traceFunc (arg) { }
monitor(traceFunc)

该函数作为参数traceFunc传递给该函数monitor。现在，当traceFunc调用该函数时，我们将再次收到有关此操作的通知（再次在控制台中）：

traceFunc(90)
function traceFunc was called with arguments: 90

使用监控功能

取消监控功能

该功能unmonitor允许您禁用对以前使用该功能监视的功能的监视monitor。为了停止监视功能traceFunc，我们使用以下构造：

unmonitor(traceFunc)

如果您在此traceFunc之后致电，那么控制台中将不会显示任何通知。

traceFunc(90)

调用禁用了监视的功能不会导致将有关此调用的信息输出到控制台

MonitorEvents功能

使用该函数的方案monitorEvents如下所示：

monitorEvents(object,[,events])

使用此功能可以跟踪对象事件的发生，并在控制台中显示有关这些事件的信息。

假设页面上有一个由以下代码描述的按钮：

<button id="button">Button</button>

让我们开始跟踪click此按钮的事件：

monitorEvents(button, "click")

如果开始观察事件后，click单击按钮-有关事件的信息将显示在控制台中。

单击按钮并开始监视事件，您

可以通过将monitorEvents数组作为第二个参数的函数传递来监视多个事件：

monitorEvents(button, ["click", "mouseover"])

现在正在观察的事件click和事件mouseover。结果，控制台收到有关单击按钮的消息，并且该消息已被鼠标按住。

监视单击和鼠标悬停按钮

的事件您可以组织对事件组的监视：

monitorEvents(button, ["click", "mouse"])

字符串mouse是一组与鼠标相关的事件的通用标识符。例如- ，mouseover，。mousemove mouseout就像订阅特定事件一样，订阅通用事件标识符将导致在此类事件发生时发出通知。

监视与单击鼠标和鼠标有关的按钮事件

当然，该功能monitorEvents适用于其他对象，而不仅仅是按钮。这同样适用于可以观看的事件。这些不仅是click鼠标事件。

UnmonitorEvents函数

该功能unmonitorEvents允许您取消对该功能启动的对象事件的监视monitorEvents。

假设我们决定跟踪按钮的点击次数：

monitorEvents(button, "click")

结果，当单击按钮时，有关这些事件的信息将到达控制台。为了停止监视，我们需要以下设计：

unmonitorEvents(button, "click")

现在，系统停止监视click按钮事件。

拒绝监视单击事件后，有关按钮单击的报告不再到达控制台

$ _建筑

该设计$_使您可以访问在控制台中执行的最后一个表达式的结果。

假设我们在控制台中输入了一个表达式2 + 2并执行了它。它给了我们4。

然后我们输入并执行表达式3*2。它给了我们6。

事实证明，我们执行了两个表达式，最近的一个是3*2。如果现在进入控制台$_并单击Enter-，将显示表达式的结果3*2，即- 6。

使用$ _构造

复制功能

该功能copy允许您将传输的数据复制到剪贴板。

让我们执行例如以下命令：

copy("nnamdi")

这会将行复制到剪贴板nnamdi。为了对此进行检查，请在控制台中执行上述命令，然后尝试将剪贴板上的内容粘贴到浏览器的地址栏中。您应该获得类似于下图的内容。

软件将数据复制到剪贴板

清除功能

该功能clear使您可以清除控制台中命令执行的历史记录。如果控制台中充满了其中显示的各种内容，并且您想从中删除其中显示的所有内容，则此功能很有用。

按键功能

keys(object)与方法一样，该函数Object.keys返回对象属性键的数组：

const obj = {prop1: 0, prop2: 1, prop3: 2}
keys(obj)

使用按键功能

价值观功能

功能values类似于一种方法Object.values。它返回对象属性值的数组。

const obj = {prop1: 0, prop2: 1, prop3: 2}
values(obj)

使用值功能

GetEventListeners函数

该函数getEventListeners返回有关为该对象注册的事件的信息。例如，如果您为按钮注册了某些事件，则getEventListeners传递给该按钮的函数将返回一个对象，该对象以数组的形式包含按钮事件的描述。

假设页面具有以下代码：

<button id="button" 
    onclick="clickHandler()" 
    onmousedown="mousedownHandler()" 
    onmouseover="mouseoverHandler()">
        Button
</button>
<script>
    function clickHandler() {
    }
    function mousedownHandler() {
    }
    function mouseoverHandler() {
    }
</script>

这个代码描述按钮和三个事件：click，onmousedown，和onmouseover。为事件分配了处理程序clickHandler，mousedownHandler和mouseoverHandler。

在控制台中调用以下命令：

getEventListeners(button)

有关按钮事件处理信息

的命令执行后，发行对象getEventListeners(button)具有的属性click，mousedown并且mouseover，他们的名字对应，其处理程序被分配到按钮事件的名称。属性包含对象数组，这些对象包含有关事件的详细信息。

功能$

该函数$返回与传递给它的选择器匹配的第一个DOM元素。函数调用图如下所示：

$(elementName, [,node])

假设页面具有以下代码：

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>

此代码描述了四个按钮。

让我们执行以下命令：

$("button")

下面显示了执行后进入控制台的内容。

$（“ button”）

命令的结果，如您所见，该命令返回了buttonButton1。此按钮是button文档中的第一个元素。在我们拥有元素的DOM节点后，我们可以引用其属性和方法。

例如，为了找出按钮的标识符，可以使用以下构造：

$("button").id

明确按钮的标识符

使用函数$，您可以指定DOM节点，这是我们感兴趣的第一个元素。

假设按钮Button2，Button3并Button4从前面的例子中被放置在一个元素<div>：

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
    <button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
    <button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
    <button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>

要从嵌套的按钮中选择第一个按钮<div>，可以使用以下命令：

$("button", document.querySelector("div"))

访问嵌套在另一个元素中的元素

如您所见，它现在$返回一个buttonButton2，因为这是button嵌套在该元素中的第一个元素<div>

功能$$

该功能$$与上述功能相同$。但是它返回所有匹配的元素。它的名称如下：

$$(element, [,node])

像前面的示例一样，假设页面上有四个按钮。

调用以下命令：

$$("button")

使用$$函数，如上图所示，

在调用之后$$，我们可以使用元素数组button。

也可以从调用$$DOM节点时指定的元素中选择元素。例如，如果页面中包含多个按钮<div>，我们可以使用以下设计来选择所有这些按钮：

$$("button", document.querySelector("div"))

使用$$功能选择嵌套在另一个项目中的项目

摘要

Chrome控制台是一个有用的工具。随着新版本的Chrome可用，其控制台的功能也随之扩展。因此，定期查找此处以寻找新颖有趣的内容很有用。

亲爱的读者们！您最常使用哪些Chrome控制台工具？

您可能从未使用过的Chrome控制台功能