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()
示例 :
Multiple objects as parameters
多个对象作为参数
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
Note: All the other logging methods like
info(), debug(), warn()
and,error()
follow the same syntax and parameters as thelog()
.注意:所有其他日志记录方法(例如
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()
示例
调试() (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()
示例
警告() (warn( ))
warn()
displays a message to the console as a warning.
warn()
向控制台显示一条消息,作为警告 。
Example of warn()
with multiple string objects as a parameters
使用多个字符串对象作为参数 的 warn()
示例
错误() (error( ))
error()
displays a message to console as an error.
error()
显示一条消息作为error控制台。
Example of error()
with multiple string objects as a 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.
提示:您还可以通过在开发人员工具中切换过滤器面板来过滤出不同级别的日志 ,如下所示。
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()
设置 消息样式的示例
Note: Here, you have seen the example with
log()
but, you can apply styles to the messages with all the other logging methods likeinfo(), debug(), warn(),
anderror()
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
以交互式列表格式显示文档对象的位置属性的示例
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
以交互式树形式显示文档对象的示例
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()
示例 :
With an array as parameter
以数组作为参数
2. Displaying Compound Types
2.显示化合物类型
2.1. With an array of arrays as parameter
2.1。 以数组数组作为参数
2.2. With an array of objects as parameter
2.2。 以对象数组作为参数
2.3. With an object whose properties are objects as parameter
2.3。 以属性为对象的对象作为参数
3. Where the number of columns in the table are restricted using a second parameter
3.使用第二个参数限制表中的列数
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.您可以在其中通过单击特定列的标签来对表进行排序(使用上面相同代码的输出)
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()
示例 :
With a label as parameter
以标签为参数
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.不带任何参数(输出默认为标签)
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()
With a label as parameter
以标签为参数
2. Without any parameter
2.没有任何参数
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()
示例 :
With a condition and a single string object as parameters
使用条件和单个字符串对象作为参数
2. With a condition and multiple objects as parameters
2.以一个条件和多个对象为参数
3. With a condition and a string with substitutions, as parameters
3.以条件和带替换的字符串作为参数
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()
:
With a label as a parameter
以标签为参数
2. Without any parameter (outputs default as the label)
2.不带任何参数(输出默认为标签)
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.以多个对象为参数
2. Without any parameter
2.没有任何参数
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()
示例, 用于清除控制台上的所有消息
结论 (Conclusion)
Let’s summarize what you have learned throughout the article:
让我们总结一下您在整篇文章中学到的知识:
- Logging out messages to the console with different log levels. 使用不同的日志级别将消息注销到控制台。
- Styling the console output message. 设置控制台输出消息的样式。
Displaying objects in an interactive format using
dir()
anddirxml()
.使用
dir()
和dirxml()
以交互格式显示对象。Displaying data in tabular format using
table()
.使用
table()
以表格格式显示数据。Counting the number of times the same log gets printed using
count()
andcountReset()
.使用
count()
和countReset()
count()
相同日志的打印count()
。Categorizing and Grouping logs using the
group()
,groupCollapsed()
, andgroupEnd()
.使用
group()
,groupCollapsed()
和groupEnd()
对日志进行分类和分组。Logging out messages if the condition evaluates to false using
assert()
.如果条件使用
assert()
评估为false,则注销消息。Calculating time intervals between different operations using
time()
,timeLog()
, andtimeEnd()
.使用
time()
,timeLog()
和timeEnd()
计算不同操作之间的时间间隔。Logging the stack trace to the console using
trace()
.使用
trace()
将堆栈跟踪记录到控制台。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
javascript控制台