仅用于站内搜索，没有排版格式，具体信息请跳转上方微信公众号内链接
来源|大迁世界
作者|前端小智
曾经有段时间，调试代码时唯一的“策略”就是满屏撒console. log()。
有bug？console. log(\“嗯？\“)
对象太复杂？console. log(\“obj\“,obj)
还搞不定？那就直接panic-log-everything. js
虽然有点用，但很快日志就变成一堵无法下眼的文字墙——哪怕bug像异常一样跳出来，也可能会被湮没其中。
所以，我开始收拾日志这片“烂摊子”。
下面是我让日志真正变得有用的方法，也建议你试试看，绝对值得。
假设你在调试一个数据请求流程。每一步都打印日志当然没错，但混在一起就很快变得混乱。
比如这样：
改成这样效果会好很多：
所有日志都被折叠在一个小组内。需要时再展开就好。
想再嵌套一层也可以：
是的，嵌套日志和嵌套div一样上头。
想象一下你正在调试一个用户数组：
结果是乱七八糟的一大堆文本。
换成：
瞬间变得一目了然，表格形式清晰排列字段和值。
无论是调试接口数据，还是展示对象数组结构，这个方法都很实用。
别再一律用console. log()输出所有信息。
浏览器提供了分级日志输出方式：
console. warn()：黄色高亮，适合警告
console. error()：红色警告，适合错误
console. info()：更轻的提示性输出
这些分级不仅有视觉提示，还能帮你快速定位问题。
不要再写这种日志了：
回头再看，完全不知道是哪段代码、哪个API。
至少加上上下文：
甚至可以用emoji来帮你快速“扫读”日志：
别小看表情符号，它们确实有助于你快速找到重点。
如果你希望某些日志更加突出，可以这样写：
也可以封装一个小函数：
用来标记关键流程、重要状态，再合适不过。
整洁的日志当然不能帮你消灭bug，但它能：
更快定位问题核心
节省大量翻找时间
让你在崩溃前，至少console还看起来井井有条
尤其是在团队协作中，请不要让调试台里全是：
没人能理解上下文，你自己一周后也不行。
结论很简单：console. log()本身没错。
但如果你把它当成一个调试工具，而不是“临时贴片”，它可以强大得多。
让日志为你服务，而不是跟你作对。
觉得有用的话，分享给还在打印\“test\“的同事看看，也许他们会因此改掉几个坏习惯。
欢迎留言分享你的日志技巧✍️
欢迎转发、收藏。希望这篇内容能帮你重新认识TypeScript——这位被低估的合作伙伴。
好啦，今天的内容分享就到这，感觉不错的同学记得分享点赞哦！
PS：程序员好物馆持续分享程序员学习、面试相关干货，不见不散！
点分享
点收藏
点点赞
点在看
