如果你之前开发过web应用，你一定对console.log(...)很熟悉，这是一种向开发者控制台打印数据的方式：它可以是用于调试、日志记录和测试。运行console.log(console)，还可以查看console对象的更多功能。本文简要概述了可用于改善日志记录体验的10大技巧。一起来看看吧。打印表格console.table()方法将对象/数组打印为格式整齐的表格。console.table({'TimeStamp':newDate().getTime(),'OS':navigator['platform'],'Browser':navigator['appCodeName'],'Language':navigator['language'],});分组使用console.group()将相关的控制台语句与可折叠部分分组在一起。您可以选择通过将字符串作为参数传递来指定章节的标题。章节可以在控制台中折叠和展开，但默认情况下也可以使用groupCollapsed代替group来折叠章节。您还可以在部分中嵌套子部分，但请记住使用groupEnd来关闭每个组。下面的示例将输出一个打开的章节，其中包含一些信息。console.group('URL信息');console.log('协议',window.location.protocol);console.log('Host',window.origin);console.log('Path',window.location.pathname);console.groupCollapsed('元信息');console.log('获取日期',newDate().getTime());console.log('OS',navigator['platform']);安慰。日志（'浏览器'，导航器['appCodeName']）;console.log('语言',navigator['语言']);console.groupEnd();console.groupEnd();样式化日志输出可以使用一些BasicCSS来设置日志输出的样式，例如颜色、字体、文本样式和大小。例如，尝试运行以下命令：console.log('%cHelloWorld!','color:#f709bb;font-family:sans-serif;text-decoration:underline;');并得到以下输出：很酷不是吗？但可以做得更多！诸如更改字体、样式、背景颜色、添加阴影和曲线之类的事情......另一种常见的调试技术是计时程序执行以跟踪操作花费的时间。这可以通过使用console.time()启动计时器并传入标签，然后通过相同标签使用console.timeEnd()结束计时器来实现。甚至可以使用console.timeLog()向长时间运行的操作添加标记。console.time("concatenation");letoutput="";for(vari=1;i<=1e6;i++){output+=i;}console.timeEnd("concatenation");concatenation:1206ms-计时器ended还有一个非标准方法-console.timeStamp()，它在性能选项卡中添加标记，因此您可以将代码中的点与时间轴中记录的其他事件相关联，例如绘画和布局事件。断言如果您只想在发生错误或特定条件为真/假时记录到控制台，则可以使用console.assert()来完成，除非第一个参数为假，否则不会将任何内容记录到控件塔。第一个参数是要检查的布尔条件，后跟0或要打印的数据点数，最后一个参数是要输出的消息。例如console.assert(false,'Valuewasfalse')将输出消息，因为第一个参数为false。consterrorMsg='the#isnoteven';for(letnum=2;num<=5;num++){console.log(`the#is${num}`);console.assert(num%2===0,{num},errorMsg);计数是否仍在手动增加日志记录的数量？console.count()可用于跟踪执行某项操作的次数或输入代码块的频率。您可以选择为计数器分配标签，以便管理多个计数器并使输出更清晰。计数器始终从1开始。您可以随时使用console.countReset()重置计数器，它还接受可选的标签参数。以下代码将以8结尾。constnumbers=[1,2,3,30,69,120,240,420];numbers.forEach((name)=>{console.count();});以下是令牌计数器的示例输出。如果使用值，则不传入任何标签，而是为每个条件值提供一个单独的计数器。例如：console.count(NaN);//NaN:1console.count(NaN+3);//NaN:2console.count(1/0);//无穷大：1console.count(String(1/0));//Infinity:2stacktrace在JavaScript中，我们经常使用深度嵌套的方法和对象。您可以使用console.trace()遍历堆栈跟踪并输出调用了哪些方法。还有一个选项可以将数据与堆栈跟踪一起输出。如果将大对象记录到控制台，dir可能变得不可读。幸运的是，我们可以通过console.dir()方法将其格式化为可扩展的树结构。以下是目录样式控制台输出的示例：您还可以使用console.dirxml()以类似的方式打印基于XML或HTML的树。调试您可能在您的应用程序中设置了一些日志记录并在开发过程中依赖它，但不希望您的用户看到它。这可以通过用console.debug()替换日志语句来完成，它与console.log的作用完全相同，但可以被大多数构建系统删除，或者在生产模式下运行时禁用。日志级别注意到浏览器控制台中的几个过滤器（信息、警告和错误）了吗？它们允许您更改记录数据的详细程度。要使用这些过滤器，只需切换日志语句：console.info()-用于记录通知消息，通常包括一个小的“i”和/或蓝色背景console.warn()-用于记录警告或非关键错误消息，通常包含三角形感叹号和/或黄色背景console.error()-用于记录可能影响功能的错误信息，通常包含圆形感叹号和/或红色背景在生产环境中运行时，它是在Node.js中不同的日志级别写入不同的流，例如error()会写入stderr，日志输出会写入stdout，但在开发中它们都会在控制台中显示为通常。多值日志记录console对象上的大多数函数都接受多个参数，因此您可以向输出添加标签，或一次打印多个数据点，例如：console.log('User:',user.name);然而，打印多个标记值的更简单方法是使用对象解构。例如，如果您有三个变量（x、y和z），您可以将它们记录为包含在大括号中的对象，这将输出每个变量的名称和值——例如console.log({x,y,z});日志字符串格式如果需要输出格式化的字符串，可以使用C语言风格的printf格式修饰符来实现。支持的格式修饰符是：%s-字符串或转换为字符串的任何其他类型%d/%i-整数%f-浮点数%o-使用最佳格式%O-使用默认格式%c-使用自定义格式，例如控制台.log("你好%s，欢迎来到%d年！","Alicia",newDate().getFullYear());//你好Alicia，欢迎来到2022年！当然，您也可以使用模板文字来实现相同的目的，如果它是一个较短的字符串，可能更容易阅读。清除最后，在查找事件输出时，您可能希望删除页面首次加载时记录到控制台的所有内容。这可以通过console.clear()来完成，它将清除所有内容而不重置任何数据。通常也可以通过单击Bin图标清除控制台，以及使用过滤文本输入进行搜索。特殊浏览器方法当直接在浏览器控制台中运行代码时，您还可以访问对调试、自动化和测试有用的速记方法。其中最有用的是：$()-Document.querySelector()的简写（选择DOM元素，jQuery风格！）array使用$_-返回最后计算的表达式的值$0-返回最近选择的DOM元素（在检查器中）$1...$4-也可以用来抓取以前选择的UI元素$x()-允许你使用XPath查询选择DOM元素keys()和values()-Object.getKeys()的简写，将返回一个包含obj键或值的数组copy()-将内容复制到剪贴板monitorEvents()-设置事件时每次给Runcommands时都会触发对于一些常用的控制台命令（例如console.table()），你不需要输入前面的console，只需运行table()警告！这些仅适用于开发工具控制台，不适用于代码！最后一些更快速的最佳实践...定义lint规则以防止任何console.log语句被合并到master分支写包装函数来处理日志记录，这样你可以根据环境启用/禁用调试日志，你也可以使用适当的日志级别，并应用任何格式。这也可以集成到3rd方日志服务中，只需在一个地方进行代码更新并且从不记录任何敏感信息，任何安装的扩展都可以捕获浏览器日志，因此始终使用正确的日志级别（例如信息，warn,error)来简化过滤和禁用遵循一致的格式以便日志可以在需要信息时被机器解析
