javascript控制台_使用JavaScript控制台不仅仅是简单的日志记录

javascript控制台

In JavaScript, the goto way of debugging the code is using console.log(). We use console.log() to log something to the console then check whether the data is correct and functionality is working as expected. The JavaScript Console offers many other methods as well that you can use in addition to the console.log().

在JavaScript中，调试代码的最佳方法是使用console.log() 。 我们使用console.log()将某些内容记录到控制台，然后检查数据是否正确以及功能是否按预期工作。 除了console.log()之外，JavaScript控制台还提供了许多其他方法。

Here, you will see in detail the ten methods you can use that are part of the Console Object of JavaScript. These methods will help you in improving the debugging and development workflow as well.

在这里，您将详细了解十个可以使用的方法，这些方法是JavaScript 控制台对象的一部分。 这些方法也将帮助您改善调试和开发工作流程。

1.日志，信息，调试，警告和错误 (1. log, info, debug, warn️, and error)

You can use these methods to display messages to the console with different log levels.

您可以使用这些方法以不同的日志级别向控制台显示消息 。

log() (log( ))

log() method displays a message to the console.

log()方法向控制台显示一条消息。

Examples of log() with different parameters:

具有不同参数 的 log() 示例 ：

1. Multiple objects as parameters

   多个对象作为参数

Output of log( ) with multiple objects as parameters

以多个对象作为参数的log()输出

2. A single string object as a parameter

2.单个字符串对象作为参数

3. A String message with substitute value(s)

3.具有替代值的字符串消息

The different directives that you can use for substitution are:

可用于替换的不同指令是：

• %d or %i for an integer value

  %d或%i为整数值

• %f for a float value

  %f为浮点值

• %s for a String value

  %s为字符串值

• %O or %o for an Object value

  对象值的%O或%o

Output of log( ) with multiple substitutions

具有多个替换的log()的输出

Note: All the other logging methods like info(), debug(), warn() and, error() follow the same syntax and parameters as the log().

注意：所有其他日志记录方法(例如info(), debug(), warn()和error()遵循与log()相同的语法和参数。

信息() (info( ))

info() displays the messages to the console the same as the log(), but these messages are categorized to be informative.

info()将消息与log()一样显示到控制台，但是这些消息被分类为提供信息。

Example of info() with multiple string objects as a parameters

以多个字符串对象作为参数 的 info() 示例

Output of info( ) with a string as a parameter

以字符串作为参数输出info()

调试() (debug( ))

debug() displays a message to the console with log-level debug.

debug()使用日志级debug向控制台显示一条消息。

Example of debug() with multiple string objects as a parameters

使用多个字符串对象作为参数 的 debug() 示例

Output of debug( ) with a string as a parameter

使用字符串作为参数的debug()输出

警告() (warn( ))

warn() displays a message to the console as a warning.

warn()向控制台显示一条消息，作为警告 。

Example of warn() with multiple string objects as a parameters

使用多个字符串对象作为参数 的 warn() 示例

Output of warn( ) with a string as parameter

使用字符串作为参数输出warn()

错误() (error( ))

error() displays a message to console as an error.

error()显示一条消息作为error控制台。

Example of error() with multiple string objects as a parameters

以多个字符串对象作为参数 的 error() 示例

Output of error( ) with a string as parameters

以字符串为参数输出error()

Tip: You can also filter out the different levels of logs by toggling the filter panel in the developer tools, as shown below.

提示：您还可以通过在开发人员工具中切换过滤器面板来过滤出不同级别的日志 ，如下所示。

Filter panel for logs in Developer tools of the Browser

浏览器的开发人员工具中日志的过滤器面板

Once you see the filter panel, you can click on different levels of logs to see only the messages under those categories. Please note the outputs for both log() and info() come under the info category (for Chrome browser).

一旦看到过滤器面板，就可以单击不同级别的日志，以仅查看那些类别下的消息。 请注意， log()和info()的输出都在info类别下(对于Chrome浏览器)。

2.将样式添加到控制台输出 (2. Add Styles to the console output)

You can use the %c directive inside the string message of any of the logging methods to style the output on the console.

您可以在任何日志记录方法的字符串消息内使用%c 伪指令在控制台上设置输出样式。

Styles will be applied to the text after the %c directive and the text before the directive is not affected.

样式将应用于%c指令之后的文本，并且该指令之前的文本不受影响。

Example of styling a message using log() having multiple %c directives and multiple CSS declarations as parameters

使用 具有多个 %c 指令和多个CSS声明作为参数的 log() 设置 消息样式的示例

Output of log( ) with a styled message using %c directives

使用％c指令输出带样式化消息的log()输出

Note: Here, you have seen the example with log() but, you can apply styles to the messages with all the other logging methods like info(), debug(), warn(), and error() as well.

注意：在这里，您已经看到了使用log()的示例，但是，您还可以使用所有其他日志记录方法(例如info(), debug(), warn(),和error()将样式应用于消息。

Some standard properties you can use with the %c directive are:

可以与%c伪指令一起使用的一些标准属性是：

• background and its longhand equivalents.
  背景及其等效的文字。
• border and its longhand equivalents
  边框及其等效的文字
• border-radius
  边界半径
• color
  颜色
• font and its longhand equivalents
  字体及其等效的手
• line-height
  行高
• margin
  保证金
• padding
  填充

3.使用dir和dirxml以交互格式显示对象和HTML / XML元素 (3. Display objects and HTML/XML elements in an interactive format using dir and dirxml)

dir() (dir( ))

dir() displays an interactive list of properties in the form of a JavaScript Object for the given object parameter, and you can expand it to see all the available child properties and methods of that object.

dir()以给定对象参数的JavaScript对象的形式显示属性的交互式列表 ，您可以展开它以查看该对象的所有可用子属性和方法。

Example of displaying location property of the document object in an interactive list format

以交互式列表格式显示文档对象的位置属性的示例

Output of dir( ) for displaying an object in an interactive list format

dir()的输出，用于以交互式列表格式显示对象

dirxml() (dirxml( ))

dirxml() displays an interactive tree for the given HTML/XML element as a parameter. If it is not possible to display the given element like a tree, it will be displayed as a JavaScript Object. And you can expand the tree to see the contents of child nodes for the given element.

dirxml()显示给定HTML / XML元素的交互式树作为参数。 如果无法像树一样显示给定的元素，则它将显示为JavaScript对象 。 然后，您可以展开树以查看给定元素的子节点的内容。

Example of displaying the document object in the form of an interactive tree

以交互式树形式显示文档对象的示例

Output of dirxml( ) for displaying an element in an interactive tree format

dirxml()的输出，用于以交互树格式显示元素

4.使用表格以表格形式显示数据 (4. Display data in tabular form using table)

table() takes a mandatory data parameter, which can either be an array or an object and an optional parameter of an array of column names. Each element in the Array/property in an Object will be a row in the table displayed on the console.

table()带有强制数据参数 ，该参数可以是数组或对象 ，也可以是列名称数组的可选参数。 对象中数组/属性中的每个元素将在控制台上显示的表中为一行。

The first column of the table will be labeled index if the given parameter is an array with the indices as values, and in case of an object, the values in the first column will be property names of that object.

如果给定参数是一个以索引为值的数组，则表的第一列将被标记为index ，对于对象，第一列中的值将是该对象的属性名称 。

Examples of table() with different parameters:

具有不同参数 的 table() 示例 ：

1. With an array as parameter

   以数组作为参数

Output of table( ) with an array

使用数组输出table()

2. Displaying Compound Types

2.显示化合物类型

2.1. With an array of arrays as parameter

2.1。 以数组数组作为参数

Output of table( ) with an array of arrays

具有数组数组的table()的输出

2.2. With an array of objects as parameter

2.2。 以对象数组作为参数

Output of table( ) with an array of objects

具有对象数组的table()输出

2.3. With an object whose properties are objects as parameter

2.3。 以属性为对象的对象作为参数

Output of table( ) with objects within object

table()的输出，其中对象包含对象

3. Where the number of columns in the table are restricted using a second parameter

3.使用第二个参数限制表中的列数

Output of table( ) with an array of restricted columns

具有受限列数组的table()的输出

4. Where you can sort the table based on a particular column by clicking on that column’s label (using the output of the same code above)

4.您可以在其中通过单击特定列的标签来对表进行排序(使用上面相同代码的输出)

Output of table( ) with an array and, sorting it by firstName

table()的输出以及一个数组，并按firstName对其进行排序

5.使用count和countReset计数打印一条消息的次数。 (5. Count the number of times a message is getting printed out using count and countReset)

count() (count( ))

count() displays the number of times the call has been made to count() with the same label/default label.

count()显示具有相同标签/默认标签的对count()的调用count() 。

countReset() (countReset( ))

countReset() resets the counter value to 0 for the given label/default label.

countReset()将给定标签/默认标签的计数器值重置为0。

Examples of count() and countReset() with different parameters:

具有不同参数 的 count() 和 countReset() 示例 ：

1. With a label as parameter

   以标签为参数

Output of counter values with labels

带标签的计数器值输出

In the example, you call the counter function twice, which has a count() with a label that displays the count two times on to the console with the given label. Then you use countReset() with the same label to reset the value to 0 and make a call to the counter function again to display the count with the given label, which started from 0 because we used countReset() earlier.

在示例中，您两次调用了计数器函数 ，该函数具有一个带有标签的count() ，该标签使用给定的标签在控制台上两次显示该计数。 然后，使用带有相同标签的countReset()将值重置为0，并再次调用计数器函数以显示具有给定标签的计数，该标签从0开始，因为我们之前使用过countReset() 。

2. Without any parameter (outputs default as the label)

2.不带任何参数(输出默认为标签)

Output of counter values without labels

输出无标签的计数器值

6.使用group，groupCollapsed和groupEnd对不同的日志进行分组 (6. Group different logs using group, groupCollapsed, and groupEnd)

组() (group( ))

group() creates a new group of messages and indents these grouped messages in the console until groupEnd() is called, and all the console messages logged between these two function calls will be a part of that labeled/unlabeled group.

group()创建一个新的消息组，并在控制台中缩进这些分组的消息，直到groupEnd()为止，并且这两个函数调用之间记录的所有控制台消息都将成为该已标记/未标记组的一部分。

groupEnd() (groupEnd( ))

groupEnd() stops the grouping of the messages that was started by the group().

groupEnd()停止由group()启动的消息的分组。

groupCollapsed() (groupCollapsed( ))

groupCollapsed() is the same as the group() but creates the group in a collapsed mode by default in the console, the user will have to use the disclosure button to expand it and see the grouped logs within the collapsed group.

groupCollapsed()与group()相同，但默认情况下在控制台中以折叠模式创建组，用户将必须使用显示按钮将其展开，并查看折叠组中的分组日志。

Examples of group(), groupCollapsed(), and groupEnd() with different parameters

参数不同 的 group() ， groupCollapsed() 和 groupEnd()

1. With a label as parameter

   以标签为参数

Output of groups with labels

带标签的组输出

2. Without any parameter

2.没有任何参数

Output of groups without labels

输出无标签的组

7.根据使用断言对条件的评估，向控制台显示一条消息 (7. Display a message to the console based on evaluation of a condition using assert)

assert() displays the message to the console if the condition evaluates to false, and prints nothing to the console if the condition is satisfied.

assert()显示的消息，如果条件计算为FALSE控制台，并打印没有到控制台，如果条件满足 。

Note: All the substitution directives that you have seen for the logging methods are also applicable for assert().

注意：您在日志记录方法中看到的所有替换指令也适用于assert() 。

Examples of assert() with different parameters:

具有不同参数 的 assert() 示例 ：

1. With a condition and a single string object as parameters

   使用条件和单个字符串对象作为参数

Output of assert( ) with single string as parameter

使用单个字符串作为参数的assert()输出

2. With a condition and multiple objects as parameters

2.以一个条件和多个对象为参数

Output of assert( ) with multiple objects parameters

具有多个对象参数的assert()输出

3. With a condition and a string with substitutions, as parameters

3.以条件和带替换的字符串作为参数

Output of assert( ) with a string substitution

使用字符串替换输出assert()

8.使用time，timeLog和timeEnd计算完成操作所需的时间 (8. Calculate time taken for operations to complete using time, timeLog, and timeEnd)

时间( ) (time( ))

time() starts the timer to track the time taken for an operation to complete.

time()启动计时器以跟踪操作完成所需的时间。

timeLog() (timeLog( ))

timeLog() logs out the current value of the timer that was started by the time().

timeLog()注销由time()启动的计时器的当前值。

timeEnd() (timeEnd( ))

timeEnd() ends the timer that was started by time() and displays the final value of the timer.

timeEnd()结束由time()启动的计时器，并显示计时器的最终值 。

Examples of time(), timeLog(), and timeEnd() with different parameters:

具有不同参数 的 time() ， timeLog() 和 timeEnd() ：

1. With a label as a parameter

   以标签为参数

Output of timer methods with labels

带标签的计时器方法的输出

2. Without any parameter (outputs default as the label)

2.不带任何参数(输出默认为标签)

Output of timer methods without labels

没有标签的计时器方法的输出

9.显示代码的堆栈跟踪 (9. Display the stack trace of the code)

trace() outputs the stack trace to the console.

trace()将堆栈跟踪输出到控制台。

Examples of trace() with different parameters:

具有不同参数 的 trace() 示例 ：

1. With multiple objects as parameters

1.以多个对象为参数

Output of trace( ) along with multiple objects as parameter

trace()的输出以及多个对象作为参数

2. Without any parameter

2.没有任何参数

Output of trace( ) without any parameters

没有任何参数的trace()输出

10.清除控制台 (10. Clear the console)

clear() clears out all the messages from the console.

clear()清除控制台中的所有消息。

Example of clear() for clearing all the messages on the console

clear() 示例， 用于清除控制台上的所有消息

Output of clear( )

clear()的输出

结论 (Conclusion)

Let’s summarize what you have learned throughout the article:

让我们总结一下您在整篇文章中学到的知识：

1. Logging out messages to the console with different log levels.
   使用不同的日志级别将消息注销到控制台。
2. Styling the console output message.
   设置控制台输出消息的样式。

3. Displaying objects in an interactive format using dir() and dirxml().

   使用dir()和dirxml()以交互格式显示对象。

4. Displaying data in tabular format using table().

   使用table()以表格格式显示数据。

5. Counting the number of times the same log gets printed using count() and countReset().

   使用count()和countReset() count()相同日志的打印count() 。

6. Categorizing and Grouping logs using the group(), groupCollapsed(), and groupEnd().

   使用group() ， groupCollapsed()和groupEnd()对日志进行分类和分组。

7. Logging out messages if the condition evaluates to false using assert().

   如果条件使用assert()评估为false，则注销消息。

8. Calculating time intervals between different operations using time(), timeLog(), and timeEnd().

   使用time() ， timeLog()和timeEnd()计算不同操作之间的时间间隔。

9. Logging the stack trace to the console using trace().

   使用trace()将堆栈跟踪记录到控制台。

10. Clearing all the existing logs in the console using clear().

    使用clear()控制台中的所有现有日志。

资源资源 (Resources)

• Console Object in MDN web docs

  MDN Web文档中的 控制台对象

• Console API in Chrome DevTools docs

  Chrome DevTools文档中的 控制台API

If you liked this article, then you may also find the below articles interesting.

如果您喜欢这篇文章，那么您可能还会发现以下有趣的文章。

Thanks for Reading ❤️ and Wish you a Happy Learning 😃

感谢您阅读❤️，并祝您学习愉快😃

翻译自: https://medium.com/javascript-in-plain-english/using-the-javascript-console-for-more-than-just-simple-logging-cf05972b451a

javascript控制台