微信二维码

二维码 扫二维码马上关注
扫码咨询
您可以用JavaScript使用控制台做的所有事情

您肯定在项目中使用了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折特惠活动说明


在线客服
热线电话

扫一扫 微信加好友