文档章节

Js调试中不得不知的Console

o
 osc_w9s1w4o0
发布于 2019/04/14 17:40
字数 1059
阅读 3
收藏 0

在js调试中,大部分的前端人员都是采用console.log()方法来打印出调试的数据,但是很多人都不知道console这个对象有很多很实在的方法,本文就来介绍一下这些方法的使用。

一、console.log()

console.log()这个方法是前端人员最熟悉的了,几乎我们每天都会使用,除了简单的打印对象功能,那么以下两种使用方法你知道吗?
1、多参数记录

当我们要去比对两个对象时,想让这两个对象整齐的在两边,这时console.log()就能帮上我们的忙。
2、格式化输出
console.log(msg, values);这种跟C#的string.Format()有点像,console.log()能支持字符串、整数、浮点数、object对象以及css样式的格式化输出。占位符及其描述如下表。

占位符 描述
%s 字符串
%d/%i 整数
%f 浮点数
%o/%O object对象
%c css样式

接下来我们来做一下举例:
①、字符串格式化为在占位符的地方原样输出我们的值:
console.log()字符串格式化输出
②、整数与浮点数一致我们这里就不过多举例了:
console.log()整数格式化输出
③、对于object对象的格式化输出就有比较大区别了,当为%o时输出和不使用格式化输出打印出来的结果一样,当为%O时,可以看到对象的各个属性,比如我们打印一个DOM节点,%o打印的是此节点及其子节点,%O打印的是是该dom节点各个对象属性。
console.log()对象格式化输出
④、css样式输出,样式会在%c后面都加上这个样式
console.log()css样式格式化输出

二、console.dir()

这个方法在大部分时候都跟console.log()一致,但是还是略有不同。
console.dir()
在查询DOM结构时,更能体现出两者的不同。console.log(element)打印的dom结构,而console.dir(element)打印的则是整个dom对象。
console.dir()

三、console.table()

令人意外的是,很多人都不知道有这个方法,其作用是当我们想对一个复杂的对象进行输出时,使用console.log()往往是输出一些不能一目了然的数据,此时console.table()就能帮我们把这个对象整理成一个列表,以便于我们很清晰的看到数据。
console.table()

四、console.warn()

这个方法跟console.log()几乎一致,唯一的区别就是浏览器会对其有不一样的对待,会输出一个警告。
console.warn()

五、console.assert()

assert函数是对输入的值进行断言,相信有写过单元测试的读者们都很熟悉了。当
console.assert()

六、console.count()

此方法是用来统计count被调用的次数。
console.count()

七、console.trace()

调试JavaScript程序时,有时需要打印函数调用的栈信息,这可以通过使用console.trace()来实现,此方法一般用来显示当前执行的代码在堆栈中的调用路径,可清洗的看到被调用的过程。
console.trace()

八、console.time()与console.timeEnd()

console.time() 方法是作为计算器的起始方法。该方法一般用于测试程序执行的时长。
console.timeEnd() 方法为计算器的结束方法,并将执行时长显示在控制台。如果一个页面有多个地方需要使用到计算器,可以添加标签参数来设置。
console.time()与console.timeEnd()

九、console.group()与console.groupEnd()

console.group() 方法用于设置分组信息的起始位置,该位置之后的所有信息将写入分组。
console.groupEnd() 方法用于结束分组标签。
使用 console. groupCollapsed() 方法来设置折叠的分组信息。
console.group()与console.groupEnd()

十、console.clear()

console.clear() 方法用于清除控制台所有信息。
console.clear() 方法在执行成功后,会在控制台输出: "Console was cleared"。
console.clear()
console.clear()

总结

在js调试中,虽然console对象的有些方法我们也很少用到,但是我们不能单纯只会一个console.log(),了解并学会使用其他方法,对我们在调试过程中起到了很关键的作用,使我们的效率能更高。关于此对象的所有用法,本文参考了菜鸟教程的部分文章,想深入学习的读者可以继续移步学习。
笔者水平有限,本文若有不对之处,请留言指正,不胜感激!

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

在云函数 SCF 里为 Next.js 跑 SSR

很多时候我们都希望首屏速度快,SEO 友好,那么相比于客户端渲染,SSR 渲染将是这方面的优势。Next.js、Nuxt.js 都是 SSR 框架。本篇文章将介绍 Next.js。 通常我们在部署 SSR 的时候,会担心...

腾讯云Serverless
55分钟前
19
0
一文带你初窥软件测试行业

三大原始问题一——软件测试是什么? 在一定条件下对软件系统进行审核、运行、评估,检验软件系统是否满足规定需求或者找出预期结果与实际结果之间的差别。为软件产品的质量和评价提供依据。...

a伟正是在下
今天
17
0
如何避免APK文件的反向工程? - How to avoid reverse engineering of an APK file?

问题: I am developing a payment processing app for Android, and I want to prevent a hacker from accessing any resources, assets or source code from the APK file. 我正在开发适用......

富含淀粉
今天
13
0
python 抓取 微信公众号文章

1、下载 Fiddler 安装 具体操作传送门 2、第一步已完成,入门开始吧 首先确保有微信客户端(推荐PC,移动端会多一些操作) 启动微信、Fiddler ,然后找到需要抓取的公众号(还是关注一下吧,...

acclea
今天
9
0
JS深拷贝

let arr1 = [1, 2, 3, 4, { name: 'hh'}]/浅克隆****/// 1,展开运算符let arr2 = [...arr1]// 2.splicelet arr3 = arr1.splice(0)/深克隆****/// 1.基...

何祯粮
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部