Javascript调试之console对象——你不知道的一些小技巧

前言

写过前端Javascript代码的同学肯定不会对console对象感到陌生，在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量。

但是相信很多人也就只用过console.log()这一个方法，今天我们就一起来看看console对象还有哪些比较有用的方法。由于本篇文章是跟控制台有关，代码就直接在控制台展现而没有另外用新文件展示。

不同级别日志

通过console对象的不同方法，可以在控制台上输出不同级别的日志信息，它们会采用不同的标志来展示，如下图所示。

不同级别的日志

Javascript调试之console对象，它的一些小技巧你都知道吗？

包含占位符

在输出信息时可以通过%占位符来指定对应的值，而不用总是采用拼接字符串的方法。支持的占位符包括以下几种。

• %s - 字符
• %d - 整数
• %f - 浮点数
• %o - 对象

通过以下一个简单的例子可以看出其用法。

包含占位符

Javascript调试之console对象，它的一些小技巧你都知道吗？

打印分组信息

通过group()方法可以以分组的形式展示出信息，类似于列表结构。

打印分组信息

Javascript调试之console对象，它的一些小技巧你都知道吗？

表达式判断

在一些测试框架中，经常会用assert断言来判断一个表达式的值是否为真。同样在console对象中也有assert方法，在断言为真时并不会输出任何信息，而在断言为false时，直接抛出异常。

表达式判断

上述代码中前两条语句判断结果都为true，所以没有输出任何信息，第三条语句判断结果为false，所以会直接抛出异常。

表格打印

console对象有个table方法，可以直接将对象类型的数据以表格展示。

表格打印

函数调用栈信息

通过console.trace()方法可以展示出函数调用栈的信息，来查看函数调用过程，一般会选择将这个方法放在最后执行的函数的方法体中。

函数调用栈信息

由于栈是先进后出机制，所以先执行的方法会在后面输出，因此上述代码结果会按照sum, f2, f1的顺序输出。

计时

一般统计一段代码执行耗时，方法会是通过Date对象获取毫秒数，然后将两个毫秒数进行相减。

一般计时方法

在上述代码中通过endTime和startTime两个变量的差值来计算出中间执行代码的耗时，我们可以看出往一个数组中添加100000个字符串耗时为15毫秒。

同样可以通过console对象的time()和timeEnd()方法来统计代码段的执行耗时。time()和timeEnd()可以接收一个字符串作为标识，而且两个方法接收的字符串必须一样，如果没有传入字符串则默认为‘default'字符串。

 console对象计时方法

上述代码执行结果为16毫秒，与之前那个方法产生的结果大致一样。

性能分析

通过console.profile()和console.profileEnd()方法，可以展示出代码中各个函数执行所消耗的时间，可以用来评估代码性能。

我们使用以下测试代码来进行说明。

打开chrome浏览器的控制台会有一个Javascript Profile菜单栏，如果默认情况下没有的话，可以按照以下方法打开。

 Javascript Profile

打开这个菜单选项后，我们可以看出每个方法执行消耗的时间。

时间消耗

以上所述是小编给大家介绍的Javascript调试之console对象——你不知道的一些小技巧，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# js调试console对象  # 灵活使用console让js调试更简单的方法步骤  # JavaScript调试之console.log调试的一个小技巧分享  # javascript代码调试之console.log 用法图文详解  # js调试工具Console命令详解  # js调试工具console.log()方法查看js代码的执行情况  # JavaScript调试技巧之console.log()详解  # JS中console对象内部提供调试方法示例详解  # 小技巧  # 你都  # 可以看出  # 可以通过  # 会用  # 抛出  # 小编  # 这一  # 会有  # 放在  # 有个  # 也就  # 在此  # 很多人  # 而在  # 会在  # 给大家  # 如果没有  # 会对  # 可以直接 

相关文章： 大同网页,大同瑞慈医院官网？  建站168自助建站系统：快速模板定制与SEO优化指南  公司网站的制作公司,企业网站制作基本流程有哪些？  子杰智能建站系统｜零代码开发与AI生成SEO优化指南  如何选择高效可靠的多用户建站源码资源？  如何通过WDCP绑定主域名及创建子域名站点？  清除minerd进程的简单方法  ,如何利用word制作宣传手册？  导航网站建站方案与优化指南：一站式高效搭建技巧解析  微信推文制作网站有哪些,怎么做微信推文，急？  高防服务器：AI智能防御DDoS攻击与数据安全保障  北京建设网站制作公司,北京古代建筑博物馆预约官网？  c++ stringstream用法详解_c++字符串与数字转换利器  电商网站制作价格怎么算,网上拍卖流程以及规则？  实现点击下箭头变上箭头来回切换的两种方法【推荐】  兔展官网 在线制作,怎样制作微信请帖？  代刷网站制作软件,别人代刷火车票靠谱吗？  如何通过可视化优化提升建站效果？  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  宁波免费建站如何选择可靠模板与平台？  道歉网站制作流程,世纪佳缘致歉小吴事件，相亲网站身份信息伪造该如何稽查？  如何选择建站程序？包含哪些必备功能与类型？  建站之星如何配置系统实现高效建站？  建站之星上传入口如何快速找到？  唐山网站制作公司有哪些,唐山找工作哪个网站最靠谱？  网页设计网站制作软件,microsoft office哪个可以创建网页？  成都网站制作公司哪家好,四川省职工服务网是做什么用？  宠物网站制作html代码,有没有专门介绍宠物如何养的网站啊？  制作农业网站的软件,比较好的农业网站推荐一下？  如何在腾讯云服务器快速搭建个人网站？  建站之星伪静态规则如何设置？  网站制作价目表怎么做,珍爱网婚介费用多少？  网站制作多少钱一个,建一个论坛网站大约需要多少钱？  制作网站的公司有哪些,做一个公司网站要多少钱？  建站主机SSH密钥生成步骤及常见问题解答？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  定制建站是什么？如何实现个性化需求？  如何基于云服务器快速搭建个人网站？  建站之星手机一键生成：多端自适应+小程序开发快速建站指南  网站制作外包价格怎么算,招聘网站上写的“外包”是什么意思？  个人网站制作流程图片大全,个人网站如何注销？  建站之星CMS五站合一模板配置与SEO优化指南  枣阳网站制作,阳新火车站打的到仙岛湖多少钱？  javascript中对象的定义、使用以及对象和原型链操作小结  如何选择域名并搭建高效网站？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  已有域名和空间如何搭建网站？  c# Task.ConfigureAwait(true) 在什么场景下是必须的  如何在阿里云香港服务器快速搭建网站？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧