您肯定在项目中使用了console.log()万亿次。但是您知道在使用JavaScript时，您可以用控制台做的所有其他奇妙的事情吗?

控制台可以做的远不止打印传递给它的任何字符串或变量:它还可以测量时间，启动一些内置的浏览器工具，帮助您跟踪代码中的bug，等等。我们来看看这些函数。

测量时间

在调试代码时，您可能希望度量一些函数的性能。为此，不需要使用Date对象或任何其他自定义函数;您可以直接使用控制台。使用控制台在JavaScript中测量时间非常简单:

必须使用console.time()启动计时器，并将名称作为输入参数传递。这将是计时器的名称。您可以同时运行多达10,000个计时器!

要停止计时器并打印经过的时间，请使用console.timeEnd()，并传递计时器的名称。

console.time('time doWhatever')

..

doWhatever()

..

console.timeEnd('time doWhatever')

您还可以使用console.timeLog()在不停止计时器的情况下显示运行时间，但这只适用于一些现代版本的Firefox。

跟踪代码

使用console.log()跟踪错误非常低效。好的，您正在回显错误，但是，您知道代码是如何到达那里的吗?正在调试的函数是如何执行的?代码的哪个部分调用了这个函数?要获得更好的调试体验，请确保使用console.trace()。它不仅会打印作为参数传递的消息，还会打印整个跟踪，直到执行了console.trace()。

设置控制台输出的样式

我相信您已经知道这个，但是，为了以防万一，请记住，您可以将一些CSS样式作为第二个参数传递给console.log，并在第一个参数中使用“%c”作为输出样式:

控制台。日志(“%chere是消息”，“颜色:黄色;字体样式:斜体;”)

使用控制台中的表

您可以将信息打印为表，将数组或对象传递给console.table()命令。

第一个列和行将用数组的索引或打印对象的属性名标记。一些浏览器可能会限制行数。

打印对象属性的交互式列表

使用console.dir()显示任何JavaScript对象的所有属性。如果您在浏览器上这样做，您可以单击任何属性来扩展它，并获得关于它的更多信息，因为属性将像菜单一样被打印出来。如果希望显示XML/HTML对象，最好使用console.dirxml()。这将输出元素的所有树的交互式列表。

例如，如果你在这个网站上使用这个:

console.dirxml( document.getElementById(“page”) )

您将得到以下输出:

更多精彩内容，请关注元吉优惠券网：专注阿里云代金券、阿里云服务器报价、腾讯云代金券的免费更新领取！
更多精彩内容推荐：

定制发送个性化推送通知

构建和部署：如何使用backinfinite与 React.js

阿里云SSL证书服务实践

常见问题之阿里云商标注册

阿里云商标注册服务低至300元

阿里高性能云服务器5折特惠活动说明