控制台命令指南

多年来，开发人员的调试控制台以某种形式或另一种形式存在于 Web 浏览器中。 它最初是作为一种向开发人员报告错误的手段，但其功能已在许多方面得到提升； 例如自动记录网络请求、网络响应、安全错误或警告等信息。

网站的 JavaScript 还有一种方法可以触发各种命令，这些命令会输出到控制台以进行调试。 这些命令包含在几乎所有浏览器中都可用的控制台对象中。 尽管这些功能在浏览器之间基本一致，但也存在一些差异。 其中一些差异仅仅是视觉上的，而另一些则确实存在细微的功能差异，需要牢记。

对于好奇的人来说，这里有一个来自 WHATWG 的 规范，链接自 MDN 控制台文档。

本指南介绍了 Firefox 和 Chrome 控制台对象中的可用内容，因为它们通常是开发中最受欢迎的浏览器，并且它们在控制台的各个方面确实存在一些差异。 新的 基于 Chromium 的 Edge 在许多方面与 Chrome 基本相同，因此在大多数情况下，控制台命令的行为基本相同。

快速链接

• 日志记录
• 清除
• 常用命令
• 字符串替换
• 样式化输出
• 断言
• 计数命令
• 列出属性
• 分组命令
• 表命令
• 时间命令
• 显示跟踪
• 调试器命令
• 控制台实用程序

---

console.log 命令

首先我们可以做的是记录控制台对象本身，以查看您选择的浏览器实际提供了什么。

console.log(console);

此命令将输出控制台对象的各个属性，如浏览器所知。 其中大多数是函数，并且在浏览器之间将相当一致。 如果控制台对象的属性在浏览器之间存在差异，则可以通过这种方式查看差异。 我可以指出的 Firefox 和 Chrome 之间的区别之一是，Chrome 提供了一个“内存”属性，它会输出一些基本内存使用统计信息。 Firefox 不提供此属性，但有一个 Chrome 没有的“名称”属性。

值得庆幸的是，浏览器之间的绝大多数差异往往同样微不足道。 这样，您可以有把握地认为，无论使用哪个浏览器，您的代码的输出都基本相同。

首先要做的：clear()

随着大量使用控制台，文本输出会变得非常拥挤。 有时您只想清除所有内容并从一个全新的控制台开始。 浏览器通常在 DevTools 中提供一个执行此任务的按钮。 但是，控制台对象本身也提供了一个命令来处理此问题。

console.clear();

这将清除控制台，并通过输出类似“控制台已清除”的消息来告知您。

常用用法：debug()、error()、info()、log() 和 warn()

有五个命令，乍一看似乎做着完全相同的事情。 而且，从技术上讲，它们确实如此。 但是浏览器提供了与五个命令相关的附加功能，使每个命令都有其独特的优势。

这五个命令是

console.debug();
console.error();
console.info();
console.log();
console.warn();

我相信你们中的许多人都见过 console.log()（我的意思是，我们刚刚在上面讨论过它），并且可能以前使用过它。 在我们开始了解您可以在这五个命令中记录什么之前，让我们先看看 Chrome 和 Firefox 之间的第一个细微差异。

这是在 Chrome 中每个命令输出字符串的示例，例如 console.debug('console.debug()');。 请注意，其中一些命令具有颜色处理，以直观地指示其输出类型。 error 和 warn 输出还具有一个额外的图标，便于识别。

这是 Firefox 中的同一列表，虽然看起来相似，但存在三个细微的差异。 例如，console.debug() 没有颜色编码，console.info() 旁边有一个额外的图标。 在 Chrome 中，console.error() 和 console.warn() 都可以扩展以显示有关输出的更多信息，而 Firefox 只对 console.error() 执行此操作。 这些附加信息提供了一个调用特定命令的代码行的跟踪。

这五个命令的一个有用之处在于，浏览器提供了筛选选项，可以根据需要显示或隐藏每种类型。 Firefox 在控制台顶部（输出上方）直接显示这些选项，而 Chrome 将它们隐藏在一个下拉菜单中，标为“所有级别”，您可以在前面的 Chrome 控制台屏幕截图中看到。 “所有级别”在那里是因为我将所有五个命令都设置为显示。 如果您选择“默认”选项，则调试输出（列为“详细”）将被隐藏，而其他输出将被显示。 取消选中“信息”、“警告”或“错误”会导致下拉菜单显示不同的标题，例如“自定义级别”或“仅错误”，具体取决于选定的内容。

error 和 warn 的使用意图很容易确定； 如何使用其他选择则由您决定。 如果您确实广泛使用不同的选项，那么您可能需要考虑记录每个选项的预期行为，以免在项目后期造成混淆，尤其是对于团队项目而言。

现在，让我们讨论一下我们实际上可以在这些命令中记录什么。 由于它们的行为都相同，因此我将仅关注日志记录作为示例。

最简单的示例只涉及将字符串、数字、对象或数组传递给日志命令。 从技术上讲，可以将 JavaScript 的任何数据类型都用于此，但对于大多数数据类型而言，输出基本相同。

console.log('string');
console.log(42);
console.log({object: 'object'});
console.log(['array', 'array']);

我在 Chrome 中显示了这些示例，其中对象和数组已展开。 它们通常是折叠的，但箭头旁边的输出在两种状态下都保持一致。 Firefox 的显示略有不同，但总的来说，输出相同。 Firefox 会在展开之前告诉您它是在显示对象还是数组，但在展开后会显示与 Chrome 相同的内容。

还有一件有趣的事情，那就是您可以将多个项目作为参数传递给日志，它会将它们内联显示。

console.log('string', 'string');
console.log(42, 1138);
console.log({object: 'object'}, {object: 'object'});
console.log(['array', 'array'], ['array', 'array']);

通常，当我使用 x 和 y 坐标时，例如鼠标事件可以输出的坐标，将它们一起记录在一个语句中非常有用。

字符串替换

不同的控制台日志记录命令提供字符串替换，允许将不同的值插入到输出字符串中。 这对于在日志中描述变量很有用，以便清楚地说明正在报告的内容。

console.log('This is a string: %s', 'string');
console.log('This is a number: %i', 42);
console.log('This is an object: %o', {object: 'object'});

以下列出了可以替换到输出字符串中的数据类型

数据类型	替换符号
对象和数组	%o 或 %O
整数	%d 或 %i
字符串	%s
浮点数	%f

第一个参数将是输出字符串，其中包含放置在适当位置的符号。 然后，每个参数之后都是要插入第一个参数字符串中的值。 请记住，您必须按特定顺序保持替换类型和参数，否则您将获得意外结果。

如果您的控制台支持 模板字面量，那么获得与字符串替换类似的结果会更容易一些。

console.log(`This is a string: ${'string'}`);
console.log(`This is a number: ${42}`);
console.log(`This is an object: ${{object: 'object'}}`);

请注意，使用字符串替换对对象进行的处理要好一些，因此请根据您的需求选择适当的选择。 由于可以插入多个值，因此让我们比较一下这两种方法。

console.log('This is a string: %s. This is a number: %i', 'string', 42);
console.log(`This is a string: ${'string'}. This is a number: ${42}`);

使用字符串替换，每个值都作为参数添加以插入输出。 另一方面，使用模板字面量，您可以在输出中需要的位置添加它们。 此外，您可以将它们组合起来。

console.log(`This is a number: ${42}. This is an object: %o`, {object: 'object'});

因此，您有很多选择可供选择，因此您可以根据自己的需求选择最佳选项。

样式化输出

另一个可能有用且有趣的事情是，您可以将 CSS 样式应用于控制台的输出。它的工作原理与字符串替换方法相同，您可以在其中插入一个%c变量，以便从参数中应用样式。

这是一个简单的例子

console.log('%cThis is large red text', 'color: red; font-size: 30px;');

这次 Firefox 输出略有不同

并没有太大区别，但需要注意。

本质上发生的事情是，%c读取参数中的字符串以确定要应用哪些样式。因此，假设传递了第二个样式，%c将移到下一个参数，就像字符串替换一样。参数列表中的空字符串会将样式重置为默认值。

console.log('This is %cred text %cand this is %cgreen text.', 'color: red;', '', 'color: green;');

与网页上的典型 CSS 样式相比，可用的样式属性相当有限。您可以将其视为一种内联文本块，允许您操纵有限的样式属性集。

通过一些工作和实验，您可以在控制台中创建有趣的讯息。一个想法是，对特定日志（尤其是某种错误）引起额外注意。

console.log('%cHello there!', `
  background: white;
  border: 3px solid red;
  color: red;
  font-size: 50px;
  margin: 40px;
  padding: 20px;
`);

在这个例子中，我们可以看到 CSS 比较冗长，但我们可以做一些事情来模仿我们在 CSS 中使用的类系统。每个样式参数的值可以存储在变量中，以允许重复使用，而无需在每个参数中重复样式字符串。

const clearStyles = '';
const largeText = 'font-size: 20px;';
const yellowText = 'color: yellow;';
const largeRedText = 'font-size: 20px; color: red;';
const largeGreenText = 'font-size: 20px; color: green;';


console.log(`This is %clarge red text.
%cThis is %clarge green text.
%cThis is %clarge yellow text.`,
  largeRedText,
  clearStyles,
  largeGreenText,
  clearStyles,
  largeText + yellowText
);

这里发生了很多事情，让我们稍微分解一下。首先，我们有一个包含样式字符串的变量集合。将每个变量视为一种在控制台日志参数中重复使用的类。

我们还在日志中使用模板文字，这意味着我们可以在输出中进行换行。然后，对于文本中的每个%c，都会在参数中使用一个相应的变量来定义输出文本中该特定部分的样式。除了每个保存样式的变量之外，还有一个clearStyles参数，可用于重置样式以准备下一组样式。您可以像前面的示例一样使用空字符串，但我更喜欢使用变量名带来的明确意图。最后一个参数表明，可以组合变量，这为处理样式打开了更多可能性。

现在，这大量的文字涵盖了本质上只有五个控制台命令，这些命令仅将文本输出到控制台。因此，让我们继续讨论控制台对象的其它命令。虽然其中一些仍然可以使用到目前为止描述的许多功能，但我们不会过多地关注以下命令中的这方面。

断言：assert()

console.assert()命令类似于前面提到的错误命令。不同之处在于断言允许使用布尔条件来确定是否应将文本输出到控制台。

例如，假设您想测试变量的值并确保它不超过某个数字值。如果变量低于该数字且条件解析为 true，则断言命令不会执行任何操作。如果条件解析为 false，则会显示输出文本。这样，您就不必用if语句包装console.error()命令来确定是否需要错误讯息。

let value = 10;
console.assert(value <= 7, 'The value is greater than 7.');

我们可以看到，断言与错误命令具有相同的显示方式，只是它还在输出文本前添加了“Assertion failed:” 。Chrome 还可以扩展此输出以显示断言来源的跟踪。

跟踪在函数内函数的常见模式（例如函数调用其它函数）中非常有用。尽管如此，您可以在上面的示例中看到，断言所在的代码行并不会告诉您代码是如何到达该行的。

let value = 10;


function function_one () {
  function_two();
}


function function_two () {
  function_three();
}


function function_three() {
  console.assert(value < 7, 'This was false.');
}


function_one();

从代码的角度来看，此序列实际上是反向的。最后一行显示了第 78 行的匿名条目（在本例中为 HTML 脚本标签）。这就是function_one被调用的地方。在该函数内部，我们调用了function_two，而该函数又调用了function_three。断言位于最后一个函数内部。因此，在这个函数共享其它函数的开发世界中，对断言路径的描述非常有用。

不幸的是，Firefox 的 assert 命令不会像错误命令那样提供此跟踪。

计数：count() 和 countReset()

您是否想知道在代码中某件事发生了多少次？例如，在某一事件序列中，某个特定函数被调用了多少次？这时，console.count()命令可以提供帮助。

count 命令本身很简单，用途有限。如果您以默认状态使用该命令，则只会获得一个简单的计数。例如，如果我们连续调用它三次，则会获得一个顺序计数。

console.count();
console.count();
console.count();

如您所见，我们得到了从一到三的简单计数。默认行为意味着，count 只是每次运行时将输出增加 1，无论它在代码中的什么位置出现。您确实会在代码中获取该操作发生的代码行号，但无论情况如何，计数只是一个简单的总数。

为了使此命令更有用，我们可以提供一个标签来为该标签保留一个单独的计数。

console.count('label A');
console.count('label B');
console.count('label A');
console.count('label B');
console.count('label A');
console.count('label B');

即使在使用标签使用 count 命令会导致输出在标签之间交替，但每个标签都会保留自己的计数。这种方法在将计数放置在函数内部以便每次调用该函数时都增加计数的情况下非常有用。标签选项使得可以为各个函数保留计数，从而很好地了解每个函数被调用的次数。这对于排查性能瓶颈或只是查看页面正在执行多少工作非常有用。

有一种方法可以重置计数。假设我们有一个循环，该循环被多次调用，但循环的迭代次数可能是动态的。这是通过使用console.countReset()命令和与 count 命令相同的标签来完成的。

console.count();
console.count();
console.countReset();
console.count();


console.count('this is a label');
console.count('this is a label');
console.countReset('this is a label');
console.count('this is a label');

每个计数（带标签和不带标签）都被调用两次，console.countReset()在另一个计数实例之前被应用。您可以看到 Chrome 计数到 2，然后在遇到 countReset 时重新开始。DevTools 中没有任何内容指示重置已发生，因此假设由于计数重新开始，因此重置已发生。

然而，相同的代码在 Firefox 中略有不同。

在这里，重置通过将计数重置为零来指示。这是重置被调用的指示器，而在 Chrome 中没有这样的指示。

至于标签选项，几乎可以使用任何内容。我认为，简单地描述它就是，如果您提供任何可以解析为字符串的内容，它都可能作为标签工作。您甚至可以使用一个值随时间变化的变量，其中 count 会在每次遇到 count 时使用变量的当前值作为标签。因此，您可以跟踪值的更改方式。

描述该事物：dir() 和 dirxml()

这两个命令的主要思想是，使用console.dir()显示 Javascript 对象的属性，或者使用console.dirxml()显示 XML/HTML 元素的后代元素。Chrome 似乎已按预期实施了这些命令，而 Firefox 只将它们用作console.log()的别名。

让我们给console.log()，console.dir()和console.dirxml()相同的简单对象，看看会得到什么。请记住，您通常不会使用console.dirxml()记录对象。

const count = {
  one: 'one',
  two: 'two',
  three: 'three'
};


console.log(count);
console.dir(count);
console.dirxml(count);

Firefox 给我们提供了几乎相同的内容，只是console.dir()会自动展开。

与console.log()的另一个简单比较是在同一个命令中重复对象。

除了 Chrome 不像 Firefox 那样在console.dir()中显示第二个对象之外，并没有太大区别。这是有道理的，因为 Chrome 试图显示对象的属性（忽略第二个），而 Firefox 只将所有内容都作为console.log()的别名。因此，对于这种情况（对象），浏览器中的console.log()，console.dir()和console.dirxml()之间几乎没有区别。

我可以指出的 Chrome 中console.dir()的一个有用优势是它如何处理 DOM 元素。例如，以下是 Chrome 和 Firefox 在给出 DOM 元素时如何显示console.log()。

现在，我一直很喜欢 Firefox 如何在console.log()中输出 DOM 元素，因为它会向您提供该 DOM 元素的所有属性。因此，当我想查找 DOM 元素的特定属性以使用 JavaScript 进行操作时，只需使用console.log()即可找到它。另一方面，Chrome 在console.log()中为我们提供了 DOM 元素的 HTML 代码，就像在console.dirxml()中一样。

要在 Chrome 中获取属性，请使用带有 DOM 元素的console.dir()。我很高兴发现 Chrome 中的console.dir()提供了 DOM 元素的属性，就像我以前在 Firefox 中依赖这些信息一样。

至于 Chrome 中的console.dirxml()，它对于在 DOM 检查器的混乱之外显示 HTML 元素及其子元素很有用。您甚至可以在控制台中实时编辑一些现有的 HTML，但您不会拥有与 DOM 检查器相同的级别功能。

让我们聚在一起：group()、groupCollapsed() 和 groupEnd()

以下是一个简单的示例：将不同的控制台输出组合在一起，以显示它们之间的一种关系。它在功能上有一些局限性，因此它的实用性在很大程度上取决于你打算如何使用它。这就是console.group()命令。

console.group();
console.log('one');
console.log('two');
console.log('three');
console.groupEnd();


console.group('this is a label');
console.log('one');
console.log('two');
console.log('three');
console.groupEnd();

在第一段代码块中，我们以默认状态调用console.group()，执行三次日志记录，最后调用console.groupEnd()。console.groupEnd()只是定义了分组的结束。第二段代码块将字符串作为参数，该字符串本质上成为该分组的标签。请注意，在没有标签的第一段代码块中，它在 Chrome 中只将自身标识为console.group，而在 Firefox 中则显示为<no group label>。在大多数情况下，你需要一个合适的标签来区分不同的分组。

另外请注意标签旁边的箭头。点击该箭头可以折叠分组。在上面的代码示例中，如果我们将console.group()改为console.groupCollapsed()，它们将以折叠状态开始，必须打开才能看到输出。

你也可以嵌套分组。console.groupEnd()命令只引用最后一个打开的分组。

console.group('outer group');
console.log('outer one');
console.log('outer two');
console.group('inner group');
console.log('inner one');
console.log('inner two');
console.log('inner three');
console.groupEnd();
console.log('outer three');
console.groupEnd();

简单来说，如果你想让分组标签在控制台输出列表中更突出，你可以像之前对字符串那样对它进行样式设置。

console.group('%cstyled group', 'font-size: 20px; color: red;');
console.log('one');
console.log('two');
console.log('three');
console.groupEnd();

请坐：table()

在前面的示例中，我们已经看到了将数组或对象放在console.log()或console.dir()中的结果。对于这些数据类型，还有另一个选项，可以实现更结构化的显示，那就是console.table()。

以下是一个简单的数组示例

let basicArray = [
  'one',
  'two',
  'three'
];
console.table(basicArray);

以下是 Firefox 中的相同示例，用于比较。

视觉上略有差异，但基本相同。也就是说，Chrome 仍然在表格下方提供可展开的输出，就像你在console.log()中看到的那样。如果点击标题，Chrome 还会提供基本的列排序功能。

传递对象时的输出类似

let basicObject = {
  one: 'one',
  two: 'two',
  three: 'three'
};
console.table(basicObject);

所以，这是一个使用基本输出的相当简单的示例。我们来看看一些更复杂的东西，这些东西经常用在编码项目中？让我们看看对象数组。

let arrayOfObjects = [
  {
    one: 'one',
    two: 'two',
    three: 'three'
  },
  {
    one: 'one',
    two: 'two',
    three: 'three'
  },
  {
    one: 'one',
    two: 'two',
    three: 'three'
  }
];
console.table(arrayOfObjects);

如你所见，这为我们提供了一个不错的对象布局，其中重复的键作为列标签。想象一下，数据类似于用户信息、日期或循环中经常使用的任何数据。请记住，每个对象中的所有键都将被表示为一个列，无论其他对象中是否有对应的数据键。如果一个对象没有某个键的列数据，则显示为空。

数组数组类似于对象数组。它不使用键作为列的标签，而是使用内部数组的索引作为列标签。因此，如果一个数组的项目比其他数组多，则表格中这些列将有空项目。就像对象数组一样。

到目前为止，简单的数组和对象具有简单的输出显示。即使稍微复杂一点的对象数组，仍然具有稳定的、实用的结构。但是，混合数据类型可能会导致一些不同的情况。

例如，一个数组数组，其中一个内部数组项目是一个对象。

let arrayOfArraysWithObject = [
  ['one', 'two', {three: 'three', four: 'four'}],
  ['one', 'two', {three: 'three', four: 'four'}],
  ['one', 'two', {three: 'three', four: 'four'}]
];

console.table(arrayOfArraysWithObject);

现在，要查看第三列中这些对象包含的内容，我们需要展开表格下方的数组输出。实际上并没有那么糟糕。以下是 Firefox 处理相同输出的方式。

Firefox 只是让我们在表格中展开对象。

如果我们混合数据类型，将数组作为每个键的值放入对象中，会怎么样？它的工作方式与数组数组基本相同。不同之处在于，每行都用键而不是索引标记。当然，对于混合的每级数据类型，都会生成一个看起来更复杂的表格。 

这全部是关于：time()、timeLog() 和 timeEnd()

这里我们有一个简单的方法来记录某些事情完成需要多长时间。我们用一个标签调用console.time()，用相同的标签调用console.timeLog()以进行更新，并再次用相同的标签调用console.timeEnd()以停止计时器。

console.time('this is a timer');
console.timeLog('this is a timer');
console.timeEnd('this is a timer');

Chrome 和 Firefox 的输出基本相同。以下是一个示例输出，其代码在五秒内每秒记录一次时间，然后停止。

请注意，报告的时间并不完全相同，但对于大多数需求来说可能足够接近。此外，Firefox 很好的提示计时器已结束，而 Chrome 需要在标签停止显示后进行推断。前四行输出来自调用console.timeLog('this is a timer');，最后一行来自调用console.timeEnd('this is a timer');。

留下面包屑：trace()

console.trace()命令实际上类似于console.error()和console.warn()。调用此命令将向控制台输出一个堆栈跟踪，显示到该调用的代码路径。我们甚至可以向它传递一个字符串作为标签，但也可以传递其他数据类型，例如数组或对象。传递此类数据时的行为与从console.log()调用中获得的行为相同。这是一种简单的方法，可以将一些信息传递给控制台，而不会触发更严重的console.error()或console.warn()调用。

调试器

这是一个简单的命令，用于触发控制台调试器的暂停，如果存在的话。它类似于在调试器中设置断点，或者浏览器的等效项，以便在执行代码时导致相同类型的暂停。以下是一个简单的示例

function whatsInHere() {
  debugger;
  // rest of the code
}

在这个特定的示例中，打开的控制台调试器将在代码执行时暂停，浏览器将打开源文件以显示代码行，一旦函数被调用。对于一些复杂的项目，这对于轻松设置断点可能很有用。

从技术上讲，debugger命令不是浏览器中控制台对象的一部分。它是控制台将从 JavaScript 代码中响应的一个有用功能。

一些额外的控制台工具

这很好地介绍了我们在控制台对象中可用的大多数标准命令。这些命令在现代浏览器中或多或少都以相同的方式工作。正如我们在一些示例中看到的，浏览器之间可能存在一些差异。但还有几件事我想花点时间指出，因为它们可能以各种方式被证明是有用的。

以下示例可以被认为更像是控制台“工具”。它们不是控制台对象的一部分，就像前面的大多数示例一样。因此，它们不是以控制台对象引用开头调用的。这些工具由浏览器本身直接支持。它们不能从 JavaScript 代码中调用，而必须直接在控制台中键入才能使用。在某些情况下，该工具可能是特定浏览器的独有，在其他情况下，该工具在几个浏览器中以基本相同的方式支持。根据你选择的浏览器，你的里程数可能会有所不同。

$0, $1, $2, $3, $4

这五个命令非常方便。第一个，$0，表示 DOM 检查器中当前选定的元素。这本质上提供了一个快捷方式，而不是必须使用更传统的 DOM 方法，例如getElementById或querySelector。你可以在各种方式中使用它，在各种控制台命令中使用它，或者单独使用它来获取有关当前选定元素的信息。例如

console.log($0);

此集合中的其他命令表示以前选定的元素。可以将其视为一种选择历史记录。$1 是上一个元素，$2是上一个元素之前，依此类推。虽然第一个命令在 Firefox 中可用，但以前选定元素的命令不可用。

$(‘element’), $$(‘elements’)

如果你发现自己经常在控制台中输入document.querySelector('element')，那么有一个捷径。你只需要输入$('element')，它执行相同的函数。这个捷径可能会让许多人想起jQuery，但是选择多个元素让我想起了MooTools。要选择多个元素，你将使用$$('elements')而不是document.querySelectorAll('elements')。

$x(‘//element’)

这是XPath的快捷方式，它将返回与表达式匹配的元素数组。一个简单的例子是$x('//div')，它将返回页面上所有div元素的数组。这与使用$$('div')类似，就像我们使用$('element')一样，但是XPath表达式有很多种写法。

XPath表达式的简单一步进阶示例是$x('//div[descendant::span]')（感谢Neil Erdwien的修正），它将返回页面上包含span元素的div元素。（感谢Neil Erdwien的修正）。这相当于CSS选择器级别4草案中的:has，但浏览器目前不支持。

这些仅仅是基本的示例，只是触及了XPath的表面。

clear()

这是console.clear()的另一个版本，但没有“控制台已清空”消息。

getEventListeners(object)

这个命令在给定一个DOM元素的情况下，会报告注册到该元素的事件监听器。例如，使用上面提到的$0示例，我们可以使用getEventListeners($0)来获取类似这样的结果

展开数组中的每个项目都会提供有关该事件监听器的各种信息。这个函数在Firefox中不受支持，但它确实提供了一些类似的功能，可以在DOM检查器中找到。

点击元素旁边的“事件”徽章会提供注册到该元素的事件列表。然后可以展开每个事件以显示与事件相关的代码。

现在就到这里了！

 我将在这里结束，提供大量信息，详细介绍了可以在浏览器控制台输出或使用JavaScript中使用的各种命令。这不是所有可能的内容——内容太多，无法全部涵盖。在某些情况下，每个浏览器都有自己的功能或工具可以利用。我们回顾了在Chrome和Firefox中可能找到的大部分内容，但可能还有更多。此外，将来还会不断引入新功能。我邀请你更深入地挖掘，发现更多利用浏览器DevTools进行编码项目的方法。