console对象的更多妙用
console对象的更多妙用
console对象是我们平时在调试我们的代码的时候常用的一种调试方式在控制台上输出我们希望知道的玩意儿,这里肯定有你不知道的console,我们来看看console除了我们平时最常用的console.log之外还有哪些妙用吧
console.log()
首先使我们最熟悉的console.log()
, 除了最基本的输出变量你可能不知道他还能像c和c++那样通过占位符来输出指定的数据类型console.log("%d %s %o",1.2, 'hahaha', {name:'byfwang', age:18})
=>1 hahaha {name:'byfwang', age:18}
,%d是整型的占位符,%s是字符串的占位符,%o是对象的占位符,小伙伴们可以去控制台试一下,还是挺有意思的
除了占位符,你有没有了解过在控制台输出带有css样式的信息呢,我们来试一下console.log("这是我的%c第一篇博客%c,希望大家能够多多支持", 'color:#fff; background-color:#f0f','color:#f40')
是不是有点子好看
console.dir()
console.dir()可以帮我们更加直观的看清一个对象的真面目,尤其是当我们在操作dom节点的时候,我们通过console.log(ele)和console.dir(ele)是截然不同的
来看看两个的对比
console.log:
通过console.log输出的元素可以展示dom节点我们也可以通过点击来选中对应的页面元素,下面来看看通过consol.dir()的输出
通过dir的输出就使我们能更清楚的看到元素对象的具体内容,这样的输出可能在我们监测dom元素的时候更加有用
console.table()
console.table是我非常喜欢的一种输出形式,他通过表格的形式将对象数组的内容输出,话不多说直接看效果吧
是不是很直观,再仔细想一想,如果我们通过ajax请求回来的数据通过这么一输出是不是就一目了然了,所以自我认为console.table还是比较香的
今天就先介绍这么多吧,谢谢大家阅读,这也是我的第一篇博客,甚至连markdown用的都不是很熟练呢,希望得到大佬们的指点