如何使用 JavaScript 控制台

JavaScript 控制台提供了简单的方法，可以快速有效地在浏览器中运行 JavaScript 代码。它经常用于许多不同的事情，例如记录某些代码的输出或通过控制台调试代码。除了众所周知的控制台日志方法之外，还有一些替代技术可用于各种任务，例如记录错误、警告等。

什么是 Web 控制台？

Web 控制台是一种浏览器调试工具，用于记录各种网页信息，例如 JavaScript、网络查询、警告、CSS、问题等。我们可以通过在 Web 控制台中运行 JavaScript 代码来简单地与网页交互。

请记住，在控制台中运行代码只是使更改对我们可见，但网页的原始内容并未更改。当我们刷新网页时，为该特定网页在控制台中进行的所有更改都将丢失。

安装 DevTools

在继续之前，让我们设置将在本文中使用的 DevTools。DevTools 基本上是旨在加速和简化包开发的开发人员工具。我们可以实时编辑网页，并更快、更轻松地识别网页问题，方法是使用 DevTools。DevTools 可以通过多种方式访问，具体取决于您使用的知名浏览器。

在本文中，我们将以 Google Chrome 为例。DevTools 有一个控制台界面，可以从那里访问。

第一种方法

Chrome 左上角的菜单图标可用于启动 DevTools。参见下图。

• JavaScript 开发人员控制台是一个 DevTool。
• 在控制台中，一个基本的控制台日志语句。

第二种方法

使用检查选项是实现此目的的另一种方法。任何在线页面在右键单击时都会有一个检查选项；此选项通常是列表中最后一个。当您选择检查选项时，DevTools 将打开，您可以从那里快速访问控制台。参见下图。

快速快捷方法

• 快捷方法是最后但并非最不重要的一种，它使用快捷键 Ctrl+Shift+I 或 Ctrl+Shift+J。要立即查看此页面的 JavaScript 控制台，请立即输入此快捷方式。
• 当您第一次使用 DevTools 时，您将看到许多区域，包括元素选择器、响应式页面、元素、控制台、源、网络、性能、内存等。

这些 DevTools 部分帮助我们评估页面的 HTML。它包括获取 HTML 元素、分析 CSS、获取类名、分析 JS 以及各种其他内容，如网络请求、RAM 等。让我们研究如何访问和修改任何网页的 JavaScript。

JavaScript 中的 Console 对象

浏览器调试工具，它只是一个 Web 控制台，可以通过 Console 访问，Console 是一个对象（窗口对象的属性）。这里介绍了一些 console 对象的内置方法。如果使用得当，这些技术可以帮助开发人员。我们可以使用 window.console 或只使用 console 来访问 Console，因为它是窗口对象的一个属性（最常用的方式）。

JavaScript 中的 console 对象提供对浏览器调试控制台的访问。对于 Windows，使用 Ctrl + Shift + I；对于 Mac，使用 Command + Option + K，我们可以启动 Web 浏览器中的控制台。console 对象为我们提供了各种方法，包括

• log()
• error()
• warn()
• clear()
• time() 和 timeEnd()
• table()
• count()
• group()
• groupEnd()
• groupCollapsed()
• assert()
• info()
• trace()
• 函数的自定义控制台日志

JavaScript console.log() 方法

最著名的 JavaScript Console 方法是 log()，它只是将信息写入或记录到控制台。

语法

以下语法显示了 JavaScript console.log 及其值。

示例

以下示例使用 JavaScript console 的 log 方法显示了基本数据和 HTML 格式信息。我们可以在 console.log 方法中显示数字、字符串、数组和哈希数据。

输出

图片显示日志值作为输出。

JavaScript console.error() 方法

顾名思义，error() 方法将错误消息输出到控制台。消息的红色错误指示符是其存在的线索。我们可以显示错误消息或未满足的条件消息。

语法

以下语法显示了 JavaScript console.error 及其值。

示例

以下示例使用 JavaScript console 的 error() 方法显示基本数据或错误消息。

输出

图片显示日志值作为输出。

JavaScript console.warn() 方法

顾名思义，控制台中 warn() 方法的输出是警告消息。带有文字的黄色警告图标使其易于发现。

语法

以下语法显示了 JavaScript console.warn 方法及其值。

示例

以下示例使用 JavaScript console 的 warn 方法显示条件数据或警告消息。在此示例中，为了安全登录，我们测试了密码是否与用户的密码匹配。如果不匹配，我们使用 warn() 方法发出警告：“密码不一致。”

输出

给定图片显示日志值作为输出。

JavaScript console.clear() 方法

clear() 方法顾名思义，会清除控制台的全部内容，为您留下一个完全空白的控制台屏幕。

语法

以下语法显示了 JavaScript console.clear 方法。

示例

以下示例显示了 JavaScript console 的 clear() 方法。如果您在控制台中写入一些数据并使用 clear console 方法，则该方法会清除控制台。

输出

图片显示日志值作为输出。

JavaScript console.time() 和 timeEnd() 方法

time() 方法启动一个以毫秒为单位的计时器，并接受一个参数作为计时器的标签。要终止计时器并在控制台中检索经过的时间（从计时器开始到终止的时间）作为输出，我们必须向 timeEnd() 方法提供相同的标签。

语法

以下语法显示了 JavaScript console.time 方法。

以下语法显示了 JavaScript console.timeEnd 方法。

示例

以下示例显示了 JavaScript console 的 time() 和 timeEnd() 方法。

输出

图片显示时间值作为输出。

JavaScript console.table() 方法

Console.table() 方法用于以表格形式显示数据。数组值以表格形式显示在控制台中。

语法

以下语法显示了 JavaScript 控制台以显示表格格式数据。

描述

• table_data 是显示数据所必需的。数据将用于填充表格。
• table_columns 是可选的。一个包含表格列名称的数组。

示例

以下示例显示了使用 JavaScript 控制台的 table() 方法。如果您在控制台中写入一些数据并使用 clear console 方法，则该方法会清除控制台数据。

输出

图片显示表格值作为输出。

JavaScript console.count() 方法

count() 方法用于计算 JavaScript 控制台被调用的次数。count() 方法将迭代次数或计数次数输出到控制台。

语法

以下语法显示了 JavaScript 控制台以显示表格格式数据。

参数

• “Default”是默认标签。我们可以根据需要写入其他标签。

示例

以下示例显示了使用 JavaScript 控制台的 count() 方法。

输出

图片显示计数值作为输出。

JavaScript console.group() 方法

group() 方法用于将多个数据包含在一种格式中。我们可以使用多个 group 方法来创建嵌套的 group() 函数。

语法

以下语法显示了 JavaScript 控制台以显示组数据。

参数

• 标签对于控制台是可选的。我们可以根据需要写入组标签。

示例

以下示例显示了使用 JavaScript 控制台的 group() 方法。

输出

图片显示组值作为输出。

JavaScript console.groupEnd() 方法

groupEnd() 方法用于停止 group() 方法并将所需数据包含在 console.group() 方法中。

语法

以下语法显示了 JavaScript 控制台以停止组函数。

参数

• 任何标签和数据都不使用 groupEnd() 函数。

示例

以下示例显示了使用 JavaScript 控制台的 group() 方法。

输出

图片显示 groupEnd 值作为输出。

JavaScript console.groupCollapsed() 方法

groupCollapsed() 方法用于启动一个已折叠的消息组。要在控制台中打开一个新的消息组，请选择展开按钮。大多数新消息现在都发送到此组。

语法

以下语法显示了 JavaScript 控制台以使用 groupCollapsed() 函数。

参数

• 标签是函数中的一个可选参数。“default”值是默认数据。
• 我们可以根据需要修改标签值。

示例

以下示例显示了使用 JavaScript 控制台的 groupCollapsed() 方法。

输出

图片显示 groupCollapsed 值作为输出。

JavaScript console.assert() 方法

assert() 方法用于在表达式失败或出现错误数据时显示消息。如果表达式显示真值，则控制台显示数据。

语法

以下语法显示了 JavaScript 控制台以使用 assert() 函数。

参数

• 表达式是控制台方法的基本输入参数。
• 标签是 JavaScript 方法中的一个可选参数。“Assertion failed: console.assert”输出是默认方法。
• 我们可以修改并写入所需的标签作为输出消息。

示例

以下示例显示了使用 JavaScript 控制台的 assert() 方法。

输出

图片显示断言信息作为输出。

JavaScript console.info() 方法

info() 方法用于显示有关代码或用户需求输出的消息或信息。它显示简单的消息、数组数据和其他值。它显示布尔值作为真或假值，或发送变量值。

语法

以下语法显示了 JavaScript 控制台以使用 info() 函数。

参数

• 消息是 console.info() 方法的基本输入参数。

示例

以下示例显示了使用 JavaScript 控制台的 info() 方法。

输出

图片显示信息作为输出。

JavaScript console.trace() 方法

trace() 方法用于跟踪函数并显示所需的 JavaScript 函数。此函数用于获取可用的 JavaScript 函数并跟踪它以供参考。它通过大型 JavaScript 编码帮助开发人员和用户。

语法

以下语法显示了 JavaScript 控制台的 trace 方法。

示例

以下示例显示了 JavaScript 控制台的 trace() 方法。

输出

图片显示跟踪值作为输出。

结论

JavaScript 控制台方法对于用户和开发人员获取所需数据非常有用。控制台功能不会影响应用程序或网站的功能。