当前位置: 首页 > Web前端 > HTML5

只在JS中使用console.log()?你出局了

时间:2023-04-05 17:02:41 HTML5

除了最常用的console.log()消息在浏览器中显示消息外,还有许多其他方法可以使调试过程更容易。让我们通过示例一一查看。在这里,小编建了一个前端学习交流按钮群:132667127,自己整理的最新前端资料和进阶开发教程。如果愿意,可以进群学习交流基本的打印信息console.log()|info()|debug()|warn()|error()控制台日志/info/debug/warning/error。向控制台消息添加CSS您的所有控制台消息看起来都一样吗?好吧,从现在开始,事情会有所不同,让你的日记看起来更有吸引力,因为这对你来说是最重要的。  话不多说,先贴出代码和例子吧!//在文本前加上'%c',然后在后面写上css设置,就可以设置控制台了。log加上CSS样式console.log('%cthisistheexampletext-Tz','color:pink;font-size:50px;font-weight:500')console.log('%cthisistheexampleText-Tz','color:red;font-size:20px;font-weight:600')console.log('%cThisisthesampletext-Tz','color:blue;font-size:12px;font-weight:700')2|0如何给日志消息中的特定单词着色?看这里就可以了~//在正文前加上'%c',然后在后面写csssettings,就可以设置console了。log加上CSS样式console.log('有人的地方,没有人互相帮助%c--张无忌',        'background-color:#222;font-size:24px;font-weight:500;color:#bada55')console.dir()打印指定对象的JSON表示。constzhangwuji={name:'张无忌',age:3,tel:'https://www.cnblogs.com/zhaohongcheng/'}  console.log(zhangwuji)console中的html元素,类似于检查元素,获取控制台中的HTML元素。letzhangwuji=document.getElementsByTagName('body')[0]console.log(zhangwuji)console.table()想要以正确且易于理解的方式查看JSON?constbolg=[{name:'张无忌',age:3,tel:'https://www.cnblogs.com/zhaohongcheng/'},{name:'令狐冲',age:12,tel:'https://www.baidu.com'},{name:'扫地僧',age:22,tel:'https://www.didi.com'}]console.table(bolg)console.group()and安慰。groupEnd()很可能是使用控制台对消息进行分组//使用console.group()和console.groupEnd()将console.log分成一组  console.group();console.log('梦想')console.groupEnd()console.group();console.log('5')console.log('2')console.log('1')console.groupEnd()console.group();安慰。log('1')console.log('3')console.log('1')console.log('4')console.groupEnd()console.count()此函数记录了对count()有它被调用的次数。此函数采用可选参数标签。如果提供了标签,此函数将记录对该特定标签的count()调用次数。如果省略标签,该函数将记录在此特定行上调用count()的次数。for(leti=0;i<11;i++){console.count();}console.assert()当你只想打印一些选定的日志时,这很方便,例如它只会打印falseparameters。如果第一个参数为真,什么也不做。consterrorMsg='不符合';for(letnumber=2;number<=5;number+=1){console.assert(number%2===0,{number:number,errorMsg:errorMsg});}console.time()console.time()是一个专门用于跟踪操作花费时间的函数,它是跟踪JavaScript执行所花费的微时间的更好方法。console.time("这个");让总计=0;for(letj=0;j<10000;j++){total+=j}console.log("结果",总计);console.timeEnd("这个");