console是什么意思，你可能不知道的console

各位老铁们，大家好，今天由我来为大家分享console是什么意思，以及你可能不知道的console的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！

1、打断点和console.log是我们前端调试中,使用最为频繁的一种.但实际上consoleAPI可不仅仅用来查看某个值或者某个变量是否存在,它还有更多的用法是不为人知的.

2、console对象提供对浏览器控制台的接入。不同浏览器上它的工作方式是不一样的.其次它是一个全局对象,我们先在控制台将console打印出来,看看它里面都有些什么东西,再来一一讲解吧.

3、console.log就是向web控制台输出一条信息.参数可以是变量,数字,字符串等.

4、//常规下varname='Jack'console.log('Hello')//Helloconsole.log(name)//Jackconsole.log(`Hello,${name}`)//Hello,Jack

除此之外,还支持格式化输出.

5、varname='Jack'console.log('Hi,%s.whatareyoudoing',name)//Hi,Jack.whatareyoudoingconsole.log('%cIamsomegreattext','font-size:50px;')//假装50px:Hi,Jack.whatareyoudoing

下面是它所支持的参数,学习C语言的同学有没有感觉扑面而来的熟悉感呀~

6、这里连知乎,百度等大厂也用console来做招聘广告或做些有意思的事~

7、这三者实际上在我们开发时也时常出现.现在主流的一些框架,比如说Eslint,就封装了相关方法.当你语法出现不规范的地方,就会根据错误来弹出指定的提示框来提示你.

8、//Infoconsole.info('Hi,Thisismessage')//warning警告console.warn('On,Youroperationmaycauseasecuritybreach!')//Error报错console.error('Shit!Variabledoesnotexist!')

实际效果:

9、console.table只接受一个数组或者对象,可以接受一个额外的参数来描述表格的列数.

10、它会把数据通过表格的形式打印出来,这样我们看数据的时候就能直观了很多:

11、vararray=[\n{name:'Jack',age:12},\n{name:'Tome',age:18},\n{name:'baka',age:15}\n]\nconsole.table(array)

group

12、console.group和console.groupWEnd就像一对标签一样.group在控制台创建一个新的分组,输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用console.groupEnd()之后,当前分组才结束.

13、varboys=[\n{name:'Jack',age:12},\n{name:'Tome',age:18},\n{name:'baka',age:15}\n]\nboys.forEach(item=>{console.group(`${item.name}`)console.log(`Thisis${item.name}`);console.log(`${item.name}is${item.age}yearsold`);console.log(`${item.name}is${item.age*7}yearsold`);console.groupEnd(`${item.name}`)\n})

dir

14、console.dir——在控制台中显示指定JavaScript对象的属性，并通过类似文件树样式的交互列表

15、我们知道console.log可以实际上也可以输出DOM节点,但如果我们想要知道DOM的属性的话,这里就可以使用dir来输出.

16、varhead=document.getElementById('head')console.log(head)console.dir(head)

值得注意的是.MDN提醒我们,这个特性是非标准,尽量不要在生产模式下使用.

17、count,如同字面意思一样.count()会输出每一次被调用的次数.该方法的兼容性也需要注意,不适用于生产模式.

18、console.count('Steve')console.count('Steve')console.count('zeo')console.count('Steve')console.count('zeo')console.count('Steve')console.count('zeo')console.count('Steve')

clear

19、clear,顾名思义就是清除.看到别人那乱七八糟的用于调试的log或者info时,这时只想要保留自己的调试信息.那么console.clear()就可以为你解决这个烦恼,“一键清空”前面控制台所有的信息,从头再来(雾)

20、//somethinginfoconsole.clear()

time

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

22、console.time('fetchingdata')fetch('https://api.github.com/users/anran758')\n.then(data=>data.json())\n.then(data=>{console.timeEnd('fetchingdata')console.log(data)\n})

oh,这样我们就轻易的知道了这次我们请求花费了多少时间啦~

23、console.assert()还是蛮有意思的.它第一个参数接受一个断言(声明),第二个参数是一个message.如果断言为false，则将一个错误消息写入控制台。如果断言是true，就当做没发生。语法如下:

24、console.assert(assertion,message[,subst1,...,substN]);

这里的断言不一定是false才会触发错误.我特意去测试了一下,触发的规则也跟if的判断里的逻辑相反.只要是断言是0,NaN,undefined,false,null,空字符串''就会激活报错.

25、//Assertionfailed:Hereisthe"name"cannotbeemptyvarstr='';\nconsole.assert(str,'Hereisthe"str"cannotbeempty')//Assertionfailed:0isnotallowed!varnum=0console.assert(0,'0isnotallowed!')//Assertionfailed:Thatiswrong!console.assert(1===2,'Thatiswrong!')//什么都不会发生console.assert(1===1,'Thatiswrong!')

原文地址:https://juejin.im/entry/5a706a3451882573497934c5

END，本文到此结束，如果可以帮助到大家，还望关注本站哦！