在开发过程中，你可能会经常用到控制台命令console.log()，但是，其实除了这个命令外，还有一些其他的命令和技巧可供我们使用，让我们看看它们究竟是什么，会不会为你的调试能力带来一点新的启发。
突破舒适区同样作为开发者，有一点不可否认的是程序员这个群体总是会不断优化工作流程，使其变得更高效。不过这很容易使我们陷入误区，让我们很难突破已经惯有的工作流程，继而闭耳塞听得认为没有比现在更好的工作方法和流程。
一般Web开发者的工作流程是在IDE中写好代码并保存，然后到浏览器中刷新测试。同时使用浏览器的DevTools调整CSS，还可以测试产品在不同分辨率和移动设备上的表现。在需要深入研究的地方可以通过添加 console.log()语句来调试我们的脚本。
如果console.log()在最终产品中被滥用，那么你在网上冲浪时如果一直打开DevTools，你就会在控制台中看到很多本不该出现在最终产品中的调试信息。
下面让我为大家介绍一下除了console.log()之外的其他命令，看看它们会不会为各位的工作带来什么新的启发吧！
控制台的多种用法我们可能已经习惯了通过 console.log("参数") 来了解程序中正在发生的事情，一般来说对于字符或数字这种类型的输出，这种用法就足够了，不过在输出些类似像对象、数组类型的数据时却没有那么顺手。
第一个技巧是在变量上加上大括号，这样不仅可以打印出它们的值，还可以打印出变量的名称，这使我们在日志中更方便的定位到什么值来自哪里。
let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}
格式化日志
你可以在console.log中使用以百分号操作符指代不同格式的记录值来格式化字符串，以下是操作符类型的定义：
- %s: 字符串
- %i或%d：整数。
- %f：浮点数。
- %c：CSS样式。
- %o：可扩展DOM元素。
- %O：可扩展JavaScript对象。
你可以把它们分别放在控制台试试效果，首先是字符串和整数的示例：
console.log('%ix %s developer', 10, 'console');
// 10x console developer
如果计划将数字格式化为整型，可以使用如下示例：
console.log('%i', 12.34455241234324234);
// 12
%c操作符可以令你使用CSS样式定制输出日志的样式
console.log('%cPay attention to me','color:firebrick;font-size:40px')
分组日志
你可以使用console.group()来对日志进行分组，以将其显示为可扩展和可折叠的组。
const label = 'The Millenium Falcon Crew';
console.group(label);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(label);
你可以嵌套分组，并可以使用 console.groupCollapsed() 在默认情况下不展开它们：
const extendedlabel = 'The Millenium Falcon Crew extended';
const meat = 'Humanoids';
const metal = 'Droids';
console.group(extendedlabel);
console.groupCollapsed(meat);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(meat);
console.group(metal);
console.log('R2D2');
console.log('C3PO');
console.groupEnd(metal);
console.groupEnd(extendedlabel);
日志控制台过滤
除了console.log外，你也可以使用 console.info()、console.error()和 console.warning()来代替它。通过这些语句，你可以在控制台侧边栏或下拉列表中来过滤你在控制台中看到的消息。这样一来，你可以更容易地在来自第三方脚本和项目中的其他脚本中找到自己的日志消息。
其他控制台命令
你可能在debug时曾创建过统计某个方法被调用或被执行次数的变量。这里推荐另一种方法， console.count()和 console.countReset()，通过它们你可以创建任意数量的变量，并通过标签来区分。
console.count('Chocula'); // Chocula: 1
console.count(); // default: 1
console.count('Chocula'); // Chocula: 2
console.countReset('Chocula');
console.count(); // default: 2
console.count(); // default: 3
console.count('Chocula'); // Chocula: 1
您还可以使用console.time()方法去统计代码执行的总耗时：
console.time('go');
for(let i = 0; i < 200000; i =1) {
let x = Math.random()*2000;
}
console.timeEnd('go'); // go: 11.7861328125 ms
使用 console.dir()不仅可以显示内容，还可以显示你发送的数据类型。例如，如果你想要一个节点的XML表示，你可以使用console.dirxml()。而console.table()对于显示JSON数据作为一个可排序的表格显示效果也很好。
使用实时表达式Live Expression替代console.log使用 console.log() 来监测那些变化范围很大的数值时，不仅低效且困难。你可在在开发人员工具中通过点击“眼睛“图标来激活Live Expression功能。它可以将你想要关注的数值pin在工具顶端。
例如，你可以先输入document.activeElement 来试试。该表达式表示当前获得焦点的元素。
在这有一点需要说明，因为Live Expression并不和某一个站点及域名所关联，所以它会一直保留在你的DevTools中。因此建议在完成一项调试后及时删除它们，以免为调试其他站点时带来不必要的麻烦。
使用控制台处理当前文档
开发人员工具中的控制台不仅仅是用于显示日志的一种方式。它是一个，可让您编写和执行JavaScript并使用自动完成功能了解当前文档的可用方法和属性。
你可以试试，在开发人员工具的控制台，输入doc并按下tab，它会自动将其转为document。如果输入’.’ 你会看到所有document可用的方法和属性。这是一种学习可用方法和属性的有趣且简单的方法之一，这样可以使你在短时间内写出大量代码。
