商品网站建设实验报告,网站建设的费用计入,扬州品牌网站设计,微信引流神器手机电影网站怎么做前端面试题库 #xff08;面试必备#xff09; 推荐#xff1a;★★★★★
地址#xff1a;前端面试题库
自从入坑前端后#xff0c;日常写bug就没离开过console。
要说用得多#xff0c;不如说是console.log用得多#xff0c;console.warn和console.erro…前端面试题库 面试必备 推荐★★★★★
地址前端面试题库
自从入坑前端后日常写bug就没离开过console。
要说用得多不如说是console.log用得多console.warn和console.error配合使用下几乎就是我的使用日常了。
开发调试场景各式各样小问题很容易hold得住问题一复杂这打印出来的是啥玩意眼花脑糊。
为了提高写bug效率(不是)我去了解了console的各种玩法。
丰富的文本打印姿势
使用字符串替换
有点C语言的printf那味对字符串进行格式化输出。
替代字符串说明%o or %O替换成JavaScript对象%s替换成字符串%d or %i替换成整数支持数字格式化例如console.log(Foo %.2d, 1.1)会输出Foo 01%f替换成浮点数支持数字格式化例如console.log(Foo %.2d, 1.1)会输出Foo 1.10
const person {name: Amy,age: 18, contact: {phone: 123456789,email: amygmail.com}
}如果是打印字符串用模板字符串也能有类似的效果。 如果是打印字符串对象可以通过传多个参数打印或者使用字符串替换写法更清晰舒适些。 定义内容样式
%c表示为该指令后的文本使用特定的CSS样式。 借助这个能力我们可以在控制台中打印出这样的版本号 function printVersion(name, version) {console.log(%c${name}%cv${version},color: white;padding: 4px 6px;border-radius: 4px 0 0 4px;background-color: #515151,color: white;padding: 4px 6px;border-radius: 0 4px 4px 0;background-color: #0575b7);
}字符串中有两个%c值得注意的是第二个%c无法继承第一个%c的样式比如其中的color: white;padding: 4px 6px可见%c作用的文本样式都是独立的。
%c支持background属性也就意味着background-image可以作用起来打印图片了有兴趣的可以玩一玩看。(这个我没有测试成功甚至直接copy了别人打印成功的代码就奇怪。先pass了后面研究下)
只会用console.log吗
console提供了5种打印信息的方法最常用的当属console.log其次是console.warn和console.error最后是console.info和console.debug。
console.warn、console.error
跟其他方法相比console.warn和console.error能很明显表达出对应的日志级别主要体现在
在控制台中显示效果差异较大。抛出堆栈信息。源码中高亮提示。 这对于问题提示和定位均有较大的帮助在别人阅读到自己代码的时候也能推测出这个位置可能是处理错误场景。
console.log、console.info、console.debug的区别
很多人都搞不清楚这三个方法的区别在哪里在控制台打印出来效果几乎没差或者说其他功能我们不怎么需要看下文档说明
console.log: 向控制台打印消息。
console.info: 向控制台打印消息仅在Firefox中输出日志旁边会有一个小的i图标。 console.debug: 向控制台打印“调试”级别的消息浏览器默认情况下不会显示该消息需要调整控制台日志级别的过滤选项使其支持Debug或Verbose后才会显示。 大部分时候我们只是想打印消息而已就挑个最短的console.log来用了。
提高debug效率的小技巧
这是一个
const isStudent true;
const onLine false;
const person {name: Amy,age: 18, contact: {phone: 123456789,email: amygmail.com},followers: [{ name: Anna, email: annagmail.com },{ name: Bob, email: bobgmail.com },{ name: Robin, email: robingmail.com },{ name: Arthur, email: arthurgmail.com }]
}1. 打印变量值
在控制台打印多个变量尤其是同类型的变量我们需要进行标识比如 应该很多人都会这么操作我曾经还出现过标识错误的大乌龙可以这么写 输出内容是一样的更便捷准确。
2. 快速查看对象
在控制台查看数组or对象经常是收起来的内容比较多会被直接省略 改成表格输出可读性一下子就上来了相当舒适。 再者我们往往仅关心某个数据/字段你还可以指定要查看哪些列(字段)针对性处理。 3. 分组打印
在调试函数尤其是定位执行过程时:
function b() {console.log(This is b);console.log(Test);
}
function a() {console.log(This is a);console.log(Test1);b();console.log(Test2);
}
a();即使做了标识一时间还是很难辨别Test2是哪个方法打印出来的。
这种时候推荐使用console.group()/console.groupCollapsed()进行分组打印console.groupEnd()则用来闭合分组。
function b() {console.group(This is b);console.log(Test);console.groupEnd();
}
function a() {console.group(This is a);console.log(Test1);b();console.log(Test2);console.groupEnd();
}
a();分组打印支持嵌套这种打印效果直观不少面对复杂逻辑时这种方式性价比更高。
4. 统计执行次数
console.count()对输出的内容进行次数统计可以用于调试方法是否被多次调用比如React v18: Why useEffect Suddenly Got Crazy?就有现成的例子统计useEffect回调被调用的次数 console.countReset()可进行重置。
5. 统计执行时间
统计方法执行耗时也是可能遇到的调试手段console也提供了快速的计时通道 console.time()启动计时可以为该计时提供名称否则使用default。
在计时期间可以通过console.timeLog()实时查看。
完成计时后使用console.timeEnd()结束计时。
结尾
以上简单整理了开发过程中可能会遇到的console用法还有好些方法未提及比如console.dir()、console.dirxml()等有兴趣的可以去MDN上了解下。 前端面试题库 面试必备 推荐★★★★★
地址前端面试题库
