来源:PexelsJSConsole调试就像在犯罪电影中同时扮演侦探和凶手。-FilipeFortes大多数开发人员喜欢在浏览器中输出信息以了解有关问题的更多信息。我可能不是唯一这样做的人。在浏览器控制台中打印信息,对于开发者来说就像是一次救援行动。在代码调试中遇到各种疑难杂症时,Console.log()就像是一剂灵丹妙药。其实除了最常用的Console.log()语句外,还有其他方法可以简化调试过程。下面小新将通过实例一一介绍。1.console.assert()当你只想输出选中的日志时非常有用,它只会输出错误的参数,如果第一个参数正确,则不会起作用。断言(assertion)2.console.group()&console.groupEnd()可以使用控制台对消息进行分组。组消息3.console.trace()该方法将在代码终止时进行跟踪和显示。追踪来源:PexelsJSConsole4。console.count()这个函数记录count()函数的调用次数,有一个可选的参数label。如果使用标签调用,该函数将记录使用该特定标签调用count()的次数。如果在调用中省略了label,该函数将记录在此行调用count()的次数。计数5.console.table()想要查看正确的人类可读的JSON文本?更好地可视化数组!6.为控制台消息添加样式所有的控制台消息看起来都一样吗?现在不一样了,使调试日志的重要部分看起来更加突出。彩色消息可以通过以下方式更改日志中特定单词的颜色:突出显示特定单词7.console.time()console.time()用于跟踪运行时间,这是跟踪JavaScript执行时间短的好方法。8.控制台中的HTML以与检查元素相同的方式从控制台获取HTML元素。HTNL元素显示9.console.dir()输出指定对象的JSON形式。10.console.memory()想知道Javascript应用程序占用了多少浏览器内存?内存来源:PexelsJSConsole11。使用占位符各种占位符如下:%o:接受一个对象,%s:接受一个字符串%d:接受一个小数或整数占位符Introduction12.console.log()|信息()|调试()|警告()|error()这些语句将根据事件原始字符串的类型用不同的颜色标记。consolelog/info/debug/warn/error13.console.clear()最后但同样重要的是,使用clear()命令清除所有控制台消息。以下是要补充的要点。https://gist.github.com/Harshmakadia/fc25e56cb8f49145f4c9b3528f04215f//timeandtimeendconsole.time("This");lettotal=0;for(letj=0;j<10000;j++){total+=j}console.log("Result",total);console.timeEnd("This");//Memoryconsole.memory()//AssertionconsterrorMsg='Hey!Thenumberisnoteven';for(letnumber=2;number<=5;number+=1){console.assert(number%2===0,{number:number,errorMsg:errorMsg});}//Countfor(leti=0;i<11;i++){console.count();}//group&groupEndconsole.group();console.log('Testmessage');console.group();console.log('Anothermessage');console.log('Somethingelse');console.groupEnd();console.groupEnd();//Tableconstitems=[{name:"chair",inventory:5,unitPrice:45.99},{name:"table",inventory:10,unitPrice:123.75},{name:"sofa",inventory:2,unitPrice:399.50}];console.table(items)//Clearconsole.clear()//HTMLElementletelement=document.getElementsByTagName("BODY")[0];console.log(element)//DirconstuserInfo={"name":"JohnMiller","id":2522,"theme":"dark"}console.dir(userInfo);//Colorconsole.log('%cColorofthetextisgreenplussmallfontsize','color:green;font-size:x-small');//passobject,variableconstuserDetails={"name":"JohnMiller","id":2522,"theme":"dark"}console.log("Hey%s,hereisyourdetails%oinformofobject","John",userDetails);//默认console.log('console.log');console.info('console.info');console.debug('console.debug');console.warn('console.警告');console.error('console.error');
