前言

写过前端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对象内部提供调试方法示例详解  # 小技巧  # 你都  # 可以看出  # 可以通过  # 会用  # 抛出  # 小编  # 这一  # 会有  # 放在  # 有个  # 也就  # 在此  # 很多人  # 而在  # 会在  # 给大家  # 如果没有  # 会对  # 可以直接 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何在香港服务器上快速搭建免备案网站？  Laravel怎么定时执行任务_Laravel任务调度器Schedule配置与Cron设置【教程】  Bootstrap CSS布局之列表  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  Python正则表达式进阶教程_复杂匹配与分组替换解析  Windows Hello人脸识别突然无法使用  如何快速搭建高效简练网站？  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  如何快速打造个性化非模板自助建站？  HTML 中如何正确使用模板变量为元素的 name 属性赋值  北京的网站制作公司有哪些,哪个视频网站最好？  Win10如何卸载预装Edge扩展_Win10卸载Edge扩展教程【方法】  如何在 Go 中优雅地映射具有动态字段的 JSON 对象到结构体  Google浏览器为什么这么卡 Google浏览器提速优化设置步骤【方法】  齐河建站公司：营销型网站建设与SEO优化双核驱动策略  nodejs redis 发布订阅机制封装实现方法及实例代码  Laravel storage目录权限问题_Laravel文件写入权限设置  Laravel如何使用Contracts（契约）进行编程_Laravel契约接口与依赖反转  如何快速完成中国万网建站详细流程？  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  如何用5美元大硬盘VPS安全高效搭建个人网站？  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  如何破解联通资金短缺导致的基站建设难题？  javascript中对象的定义、使用以及对象和原型链操作小结  Laravel怎么集成Log日志记录_Laravel单文件与每日日志配置及自定义通道【详解】  bootstrap日历插件datetimepicker使用方法  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  WEB开发之注册页面验证码倒计时代码的实现  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  Linux系统命令中tree命令详解  高防服务器如何保障网站安全无虞？  javascript事件捕获机制【深入分析IE和DOM中的事件模型】  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  微信小程序 scroll-view组件实现列表页实例代码  php增删改查怎么学_零基础入门php数据库操作必知基础【教程】  实例解析Array和String方法  Android滚轮选择时间控件使用详解  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  QQ浏览器网页版登录入口 个人中心在线进入  Laravel怎么实现模型属性的自动加密  网站制作软件有哪些,制图软件有哪些？  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  如何快速生成凡客建站的专业级图册？  高端网站建设与定制开发一站式解决方案 中企动力  Laravel如何实现模型的全局作用域？（Global Scope示例）  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  图册素材网站设计制作软件,图册的导出方式有几种？  佛山企业网站制作公司有哪些,沟通100网上服务官网？