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