js_content">
作者:正经程序员
链接:https://juejin.cn/post/7065856171436933156
学习前端开发时,几乎最先学习的就是console.log()
。
毕竟多数人的第一行代码都是:console.log( Hello World );
console
对象提供了对于浏览器调试控制台的访问,可以从任何全局对象中访问到console对象。
灵活运用console
对象所提供的方法,可以让开发变得更简单。
最常见的控制台方法:
console.log()– 打印内容的通用方法。
console.info()– 打印资讯类说明信息。
console.debug()– 在控制台打印一条 "debug" 级别的消息。
console.warn()– 打印一个警告信息。
console.error()– 打印一条错误信息。
复制代码
![597fd319db0c24e1fdd5991a134b6c16.png](https://img-blog.csdnimg.cn/img_convert/597fd319db0c24e1fdd5991a134b6c16.png)
console.log()写css
![77b32263e30853172a537327f0b0141e.png](https://img-blog.csdnimg.cn/img_convert/77b32263e30853172a537327f0b0141e.png)
console.log() 使用参数
![4ee735787992abe6c1e1568182f931bd.png](https://img-blog.csdnimg.cn/img_convert/4ee735787992abe6c1e1568182f931bd.png)
console.clear();
用于清除控制台信息。
![7ef51c8914daea629bc868a214cbc32b.png](https://img-blog.csdnimg.cn/img_convert/7ef51c8914daea629bc868a214cbc32b.png)
console.count(label);
输出count()
被调用的次数,可以使用一个参数label
。演示如下:
var user = "";
function greet() {
console.count(user);
return "hi " + user;
}
user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");
复制代码
输出
![62a1bfeb50029cb935a6d8dcdefdbba1.png](https://img-blog.csdnimg.cn/img_convert/62a1bfeb50029cb935a6d8dcdefdbba1.png)
console.dir()
使用console.dir()
可以打印对象的属性,在控制台中逐级查看对象的详细信息。
![8990e144b1698a598770b37578974450.png](https://img-blog.csdnimg.cn/img_convert/8990e144b1698a598770b37578974450.png)
console.memory
console.memory
是一个属性,而不是方法,使用memory属性用来检查内存信息。
![1f0d345cf2a86b0d03e833f7935ecb0e.png](https://img-blog.csdnimg.cn/img_convert/1f0d345cf2a86b0d03e833f7935ecb0e.png)
console.time() 和 console.timeEnd()
console.time()
– 使用输入参数的名称启动计时器。在给定页面上最多可以同时运行 10,000 个计时器。console.timeEnd()
– 停止指定的计时器并记录自启动以来经过的时间(以毫秒为单位)。
![8e1d781227689b863fc76f64aaad59a2.png](https://img-blog.csdnimg.cn/img_convert/8e1d781227689b863fc76f64aaad59a2.png)
console.assert()
如果断言为假,将错误信息写入控制台,如果为真,无显示。
![4974f83104c1fcc82cddd6f46e1d13b1.png](https://img-blog.csdnimg.cn/img_convert/4974f83104c1fcc82cddd6f46e1d13b1.png)
console.trace();
console.trace()
方法将堆栈跟踪输出到控制台。
![6dd6d5cc266783c3ef245357881351a2.png](https://img-blog.csdnimg.cn/img_convert/6dd6d5cc266783c3ef245357881351a2.png)
console.table();
在console
中还可以打印表格
![dbad51cb909141c3368a67666fe53854.png](https://img-blog.csdnimg.cn/img_convert/dbad51cb909141c3368a67666fe53854.png)
![4e3ec69064082c7da69d8bf9904a772b.png](https://img-blog.csdnimg.cn/img_convert/4e3ec69064082c7da69d8bf9904a772b.png)
打印Html元素
![fbae5782415d73aa2ce0b0ccf773cfd4.png](https://img-blog.csdnimg.cn/img_convert/fbae5782415d73aa2ce0b0ccf773cfd4.png)
console.group() 和 console.groupEnd()
在控制台上创建一个新的分组,随后输出到控制台上的内容都会被添加到一个锁进,表示该内容属于当前分组,知道调用console.groupEnd()
之后,当前分组结束。
![d1958e350827d2853321b6b70516b7c0.png](https://img-blog.csdnimg.cn/img_convert/d1958e350827d2853321b6b70516b7c0.png)