Javascript调试之console对象，它的一些小技巧你都知道吗？
前言
写过前端Javascript代码的同学肯定不会对console对象感到陌生，在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量。
但是相信很多人也就只用过console.log()这一个方法，今天我们就一起来看看console对象还有哪些比较有用的方法。由于本篇文章是跟控制台有关，代码就直接在控制台展现而没有另外用新文件展示。
Javascript
不同级别日志
通过console对象的不同方法，可以在控制台上输出不同级别的日志信息，它们会采用不同的标志来展示，如下图所示。
不同级别的日志
包含占位符
在输出信息时可以通过%占位符来指定对应的值，而不用总是采用拼接字符串的方法。支持的占位符包括以下几种。
%s - 字符
%d - 整数
%f - 浮点数
%o - 对象
通过以下一个简单的例子可以看出其用法。
包含占位符
打印分组信息
通过group()方法可以以分组的形式展示出信息，类似于列表结构。
打印分组信息
表达式判断
在一些测试框架中，经常会用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
打开这个菜单选项后，我们可以看出每个方法执行消耗的时间。
时间消耗
结束语
今天这篇文章主要总结了下console对象的一些有用的方法，大家都掌握了吗？
Javascript调试之console对象，它的一些小技巧你都知道吗？相关推荐
- 调试笔记--jlink 变量转实时波形小技巧
调试笔记–jlink 变量转实时波形小技巧 上篇讲了jlink RTT组件在RAM中开辟一段内存,将printf字符串存入然后通过jlink调试接口读取RAM,将printf字符串在jlink-RTT ...
- JavaScript笔记-使用JS管理URL链接(前端小技巧)
如下这个JavaScript代码: var common_ops = {buildUrl:function( path ,params ){//params = { "test": ...
- java非闭合xml转对象,不规矩的xml与JAVA对象互相转换的小技巧-使用Marshaller
摘要:将XML文档与JAVA对象互转是很常见的需求,如果XML定义很规整这很好实现.然而在现实中"不规矩"的XML可能更常见,Marshaller便无能为力了吗?下面是一个小技巧, ...
- dataframe 控对象_iOS知识 - 常用小技巧大杂烩
1,打印View所有子视图 po [[self view]recursiveDescription] 2,layoutSubviews调用的调用时机 * 当视图第一次显示的时候会被调用. * 添加子视 ...
- python 修改模板对象的属性_django小技巧之html模板中调用对象属性或对象的方法...
环境:依赖最初test2数据库 python3版本 多python版本环境 进入,python3虚拟环境,新建项目test4: ]# cd py3/django-test1/ ]# django-ad ...
- #根据名称给实体类属性赋值_java 对象属性拷贝的小技巧
使用org.springframework.beans.BeanUtils.copyProperties方法进行对象之间属性的赋值,避免通过get.set方法一个一个属性的赋值. copyProper ...
- js_调试_01_14 个你可能不知道的 JavaScript 调试技巧
更快更高效地调试你的 JavaScript 了解你的工具在完成任务时有很重要的意义. 尽管 JavaScript 是出了名的难以调试,但是如果你掌握了一些小技巧,错误和 bug 解决起来就会快多了. ...
- 使用JavaScript的一些小技巧
作者:Airen https://www.w3cplus.com/javascript/javascript-tips.html 任何一门技术在实际中都会有一些属于自己的小技巧.同样的,在使用Java ...
- Javascript调试命令——你只会Console.log() ?
Javascript调试命令--你只会Console.log() ? Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console).不同浏览器上它的工作方式是不一样的 ...
最新文章
- native 关键的理解
- matlab中怎么给符号变量赋值
- 分治法求解最大子数组问题
- 虚拟机ubuntu19.04下设置idea快捷键
- 树莓派小车(远程控制、PWM变速、超声波自动避障)
- 【SSH三框架】Hibernate基金会七：许多附属业务
- 中关村在线 测试软件,主观测试软件：ZOL Monitor LCD 简介
- android人脸识别demo_C#开发实录：基于免费SDK实现人脸识别应用开发
- [2019杭电多校第二场][hdu6601]Keen On Everything But Triangle
- 聚类算法论文研读 record
- 图像艺术风格化 Neural-Style
- macOS Big Sur 11.2.2 (20D80) 虚拟机 ISO 镜像
- 用人工智能设计超酷T恤，除了那专属感，还透露了这些时装设计大趋势 || 万有AI...
- YDOOK: Putty 下载安装详细教程 可用 已解决
- js字符串转数字（数字转字符串）
- 安卓手机 模拟辅助显示设备
- Windows中HWND定义说明
- 论文怕被查重怎么办？你的降重神器来了
- 【商迪3D】详谈3d物联网工业数字可视化三维仿真技术解决方案
- 最大公约数和最小公倍数（GCD LCM）—简写版