你会用Console吗?

332 阅读6分钟

作为一名资深前端小白,console.log是我日常开发最喜欢的Debug方法了。同学们可能只会注意到log方法,可你有去了解console这个api吗? 当我们在浏览器打印console时:

image.png

不看不知道,一看吓一跳。果然是我格局太小,只知道console.log的我只配蹲在墙角瑟瑟发抖。接下来就一起探究console到底有些什么好玩的方法吧。

401164a9ab9f6ec545fa1a300c6e6f6d.jpeg

console.assert()

MDN官方表示:如果断言为false,则将一个错误消息写入控制台。如果断言是 true,没有任何反应。

它的参数正好有两个:第一个是boolean类型,对应着断言;第二个是any类型,对应错误信息。

image.png

对比得知,错误信息输出方式跟log是一样的,通过assert方法输出错误并不会中断代码运行。 在Node.js v10.0.0之前,一个值为假的断言也将会导致一个AssertionError被抛出,使得代码执行被打断。

console.clear()

这个api就比较简单了,它的作用是清空控制台的输出信息。

image.png

console.context()

不知道啥玩意那就浅尝一下吧

image.png

image.png

u=2271138902,3566965266&fm=253&fmt=auto&app=138&f=JPEG.webp

表示无奈,接着看下一个吧

console.count()

输出 count() 被调用的次数。此函数接受一个可选参数 label

var user = "";

function greet() {
  console.count();
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
输出
default: 1
default: 2
default: 3
default: 4
var user = "";

function greet() {
  console.count(user);
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");
输出
bob: 1
alice: 1
alice: 2
alice: 3

思路一下子就清晰了,他的作用就是监控函数的调用情况,还是挺实用的一个方法。

console.resetCount()

如果提供了参数label,此函数会重置与label关联的计数。

如果省略了参数label,此函数会重置默认的计数器。

根据描述就已经知道它跟cout是cp啦。

浅尝一下吧🧐

var user = "";

function greet() {
  console.count();
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
console.countReset();
console.count();
输出
default: 1
default: 2
default: 3
default: 4
default: 1
var user = "";

function greet() {
  console.count(user);
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.countReset("alice");
console.count("alice");
输出
bob: 1
alice: 1
alice: 2
alice: 1

consoel.debug()

Console.debug()  输出“调试”级别的消息且仅仅控制台配置为显示调试输出时才显示该消息。

不多解释,直接下一个

console.dir()

参数是一个对象,作用是可以将对象属性通过类似文件树样式的交互列表显示

image.png 普通对象输出差别不大,特点在于我们输出dom元素的时候

image.png

看完直呼专业👍

console.dirxml()

显示一个明确的XML/HTML元素的包括所有后代元素的交互树。 如果无法作为一个element被显示,那么会以JavaScript对象的形式作为替代。 它的输出是一个继承的扩展的节点列表,可以让你看到子节点的内容。

当我用log对比的时候发现并没什么太大的区别 image.png

console.error()

向 Web 控制台输出一条错误消息。

注意:  console.exception() 是 console.error() 的别名;它们功能相同。

console.group()

在 Web控制台上创建一个新的分组.随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用console.groupEnd()之后,当前分组结束.

接收一个参数作为描述信息,与console.groupEnd()联用

console.group('test')
console.log('1');
console.log('2');
console.group()
console.log('3');
console.group()
console.log('4');
console.groupEnd()
console.groupEnd()
console.groupEnd()

输出

image.png

console.groupCollapsed()

在 Web控制台上创建一个新的分组.随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用console.groupEnd() 之后,当前分组结束.和 console.group()方法的不同点是,新建的分组默认是折叠的.用户必须点击一个按钮才能将折叠的内容打开.

直接上代码看效果

console.groupCollapsed('test')
console.log('1');
console.log('2');
console.group()
console.log('3');
console.groupCollapsed()
console.log('4');
console.groupEnd()
console.groupEnd()
console.groupEnd()

image.png

console.groupEnd

在 Web控制台中退出一格缩进(结束分组).

console.groupconsole.groupCollapsed联用

console.info()

console.log没太大区别,只是日志消息被赋予info标志。

console.log()

你真的会用console.log吗?🤭

打印信息的时候console.log()提供了很多选择: console.log(msg, values),这种方式和c或者c++的printf很相似。 前提需要补充一些占位符的知识...嘻嘻

console.log('%s love %s, 'i','u')

输出 i love you

console.log('The obj is %o',{name:'js',age:18}

输出

image.png

有一个比较有意思的占位符是%c,被称为css占位符,意味着可以利用console.log输出的内容是可以携带样式的。

image.png u=2608922528,2456770331&fm=253&fmt=auto&app=138&f=JPEG.webp

console.memery

记录js引擎内存大小和使用情况 image.png

console.profile()

你可以选择提供一个参数来命名描述信息,这将允许你在有多个描述信息被记录时来选择只停止那个描述信息(被你命名的那个)。请查阅Console.profileEnd()来确认这个参数是如何被解释的。

console.profileEnd()

profileEnd方法会停止记录之前已经由Console.profile()开始记录的性能描述信息

你可以选择提供一个参数来命名需要记录的描述信息。这使得你在记录多个描述信息的时候可以停止记录特定的描述信息。

  • 如果 Console.profileEnd() 传了描述信息名字,并且它与正在记录的描述信息的名字相匹配,则此描述信息将会停止。
  • 如果 Console.profileEnd() 传了描述信息名字,并且它与正在记录的描述信息的名字不匹配,则不会进行更改。
  • 如果 Console.profileEnd() 没有传描述信息名字,最近启动记录的描述信息将会停止。

console.table()

将数据以表格的形式显示。

这个方法需要一个必须参数 datadata 必须是一个数组或者是一个对象;还可以使用一个可选参数 columns

直接上栗子

打印数组 image.png 打印对象 image.png 打印多元数组

image.png 打印对象数组

image.png 打印对象嵌套对象

image.png 选择要显示的子列

image.png

console.time()

你可以启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字,页面中最多能同时运行10,000个计时器。当以此计时器名字为参数调用 console.timeEnd() 时,浏览器将以毫秒为单位,输出对应计时器所经过的时间。

可以传入label来锁定计时器,用来计算某段代码的运行时间,开发神器👍。

image.png

console.timeEnd()

停止一个通过 console.time() 启动的计时器

console.timeLog()

在开启console.time()后使用,查看此时耗费的时间。

image.png

console.timeStamp()

向浏览器的 Performance 或者 Waterfall 工具添加一个标记。这样可以让你将代码中的一个点和其他在时间轴上已记录的事件相关联,例如布局事件和绘制事件等。

你可以选择用一个参数来作为时间戳标签,然后标记旁边就会显示这个标签。

console.trace()

console.trace()方法向Web控制台输出一个堆栈跟踪。

image.png

console.wran()

向 Web 控制台输出一条警告信息。

这就是常见的警告的输出啦😋

image.png

结语

大部分资料参考MDN官方,通过实践总结出结果。有什么不对的地方还请大家指正、反馈;