Javascript调试之console对象——你不知道的一些小技巧
作者:mrr 发布时间:2023-08-07 19:24:14
前言
写过前端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对象——你不知道的一些小技巧,希望对大家有所帮助
来源:http://www.toutiao.com/i6437846671991767554/
猜你喜欢
- 1、现象a.用localhost访问,正常b.用IP地址访问,则出现403错误2、分析a.怀疑是ACL问题,设置Everyone为完全控制,
- asp禁止站外盗链,站外提交方法、以及asp判断星期几方法.防盗链,主要通过判断上一页面来源是否是本站来实现的,不是本站的链接就
- 这些CSS Selector在平时写页面的时候用地不多,只在JavaScript库、Firefox插件、iPhone页面里有过接触。推荐大家
- /* --注意:准备数据(可略过,非常耗时) CREATE TABLE CHECK1_T1 ( ID INT, C1 CHAR(8000)
- 使用scrapy爬取了网上的一些数据,存储在了mysql数据库中,想使用Django将数据展示出来,在网上看到都是使用Django的mode
- JavaScript 中的并没有提供像 VBScript 里的 DateAdd 方法用于日
- 安装时建议你为MySQL管理创建一个用户和组。由该组用户运行mysql服务器并执行管理任务。(也可以以root身份运行服务器,但是不推荐)第
- 网站上的Banner条,是网站用来作为盈利或者是发布一些重要的信息的工具。但是它又不能作为网页的主要内容,因为它的主要目的是吸引人的注意力,
- 大家好,我们的数据库已经介绍完了,这里给大家总结一下。我们这段主要是学习了SQL的增删改查语句,其中查询是我们的重点。我们是以SQL Ser
- 前言在任何编程语言中,代码需要根据不同的条件在给定的输入中做不同的决定和执行相应的动作。例如,在一个游戏中,如果玩家生命点为0,游戏结束。在
- 这几天有一台MySQL数据库服务器出现了频繁的掉线情况,通过排查,并没有排查出哪个网站被攻击,百思不得其解中的时候,群里有个朋友说是因为微软
- 想必大家都很喜欢用Word打字,用Excel进行计算和规划,用PowerPoint作幻灯片进行展示…,但是这只用到了Office系列产品的很
- 额……首先呢说说这个标题吧,实在不知道叫什么好,因为这个demo呢其实一个艾文王今天中午给丢给我一个图。他说这个是一个面试题,给我看看。这样
- 概要本文分步介绍了如何在运行 SQL Server 的计算机之间移动 Microsoft SQL Server 用户数据库和大多数常见的 S
- 当存储一个CHAR值时, Mysql会除去尾随空间, 这个行为有点让人困惑, 用一个具体的例子来看一下: 首先 ,创建一个只有一个CHAR(
- 近期,MSN、江民等知名网站相继受到了黑客的威胁和攻击,一时间网络上风声鹤唳。本报编辑部接到本文作者(炽天使)的电话,他详细讲述了发现国内最
- jquery基本入门 第一天:选择器相关 1.html()与.text() .html()取得第一个匹配元素的html内容。会带有标签,.t
- 如下所示:# coding:utf-8import shapefilew = shapefile.Writer()w.autoBalance
- 创建一个名为templatetags的python module。新建一个名为verbose_name.py的文件。from django
- 我们可使用Haskeys属性判别每个条目是否为一个集合,遍历完整的Request.Cookies集合,以来取得所有cookie的列表及其值: