Javascript调试的控制台对象——一些你不知道的小技巧

序

编写过前端Javascript代码的学生肯定不会不熟悉控制台对象。在调试过程中，我们经常使用控制台对象在控制台上输出一些常量或变量。

但是我相信很多人只用过console.log()。今天，让我们来看看控制台对象的其他有用方法。由于本文与控制台相关，代码将直接显示在控制台上，而不是使用新文件。

不同级别的日志

console对象的不同方法可以在控制台上输出不同级别的日志信息，这些信息将以不同的标志显示，如下图所示。

不同级别的日志

你知道一些关于Javascript调试的控制台对象的小技巧吗？

包括占位符

输出信息时，可以通过%占位符指定相应的值，而不是总是拼接字符串。支持的占位符包括以下内容。

% s-字符% d-整数% f-浮点数% o-对象的用法可以从下面的简单例子中看出。

包括占位符

你知道一些关于Javascript调试的控制台对象的小技巧吗？

打印分组信息

Group()方法可以分组显示信息，类似于列表结构。

打印分组信息

你知道一些关于Javascript调试的控制台对象的小技巧吗？

表情判断

在一些测试框架中，断言经常被用来判断表达式的值是否为真。控制台对象中还有一个assert方法，当断言为真时，它不输出任何信息，但当断言为假时，它会直接引发异常。

表情判断

在上面的代码中，前两个语句被判断为真，所以不输出信息，第三个语句被判断为假，所以会直接抛出异常。

表单打印

控制台对象有一个table方法，可以直接在表中显示对象类型数据。

表单打印

函数调用堆栈信息

函数调用栈的信息可以通过console.trace()方法显示，查看函数调用过程。通常，这个方法被选择放在最后执行的函数的方法体中。

函数调用堆栈信息

因为堆栈是先进先出的机制，所以先执行的方法将在后面输出，所以上面的代码结果将按照sum、f2、f1和f1的顺序输出。

按时间计算

一般来说，计算一段代码执行时间的方法是通过Date对象得到毫秒数，然后减去这两个毫秒。

通用计时方法

在上面的代码中，执行中间代码所花费的时间是通过endTime和startTime之间的差值来计算的。我们可以看到，向数组中添加100，000个字符串需要15毫秒。

还可以使用console对象的time()和timeEnd()方法来计算代码段的执行时间。Time()和timeEnd()可以接收字符串作为标识符，两种方法接收的字符串必须相同。如果没有传入字符串，默认字符串为“default”。

控制台对象计时方法

上述代码的执行结果为16毫秒，与前面的方法产生的结果大致相同。

技术性能分析

通过console.profile()和console.profileEnd()方法，可以显示代码中每个函数消耗的时间，可以用来评估代码性能。

我们用下面的测试代码来说明。

控制台上会有一个打开chrome浏览器的Javascript Profile菜单栏。如果默认不存在，可以按如下方式打开。

Javascript配置文件

打开此菜单选项后，我们可以看到每种方法消耗的时间。

时间消耗

以上是一些你不知道的关于边肖介绍的Javascript调试的控制台对象——的提示。我希望他们会帮助你。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！