开篇
在JavaScript开发调试中,console.log()是我们最常用的方法,但是还有其它几个常用的方法,值得我们试一试,也许会起到意想不到的效果。
本篇文章阅读时间预计2分钟。
01
基础用法——console.log()
打印一段文本
打印对象
接着我们看控制台的输出展现:
从图中我们看出,无法看出对应的变量名;如果想让两个对象一起输出,我们可以使用console.log({ foo, bar }),由于一行内容显示有限,对象内容部分进行了省略,我们必须点击左边的小箭头看更详细的内容,如下图所示:
02
console.table()
为了增加输出的可读性,我们可以使用console.table()让其通过表格的形式进行展示,比如我们在控制台输出console.table({ foo, bar}),如下图所示:
03
console.group()
有时候,为了方便分析,你需要将一些对象变量等信息进行分组打印输出,示例如下:
04
console.warn() & console.error()
一些特别的信息我们需要特别强调醒目的输出出来,比如警告和错误信息,你可以使用console.warn() & console.error(),输出的展示形式如下图所示,是不是更醒目:
你还可以更进一步,自定义打印输出的样式,你可以使用%c 语法。你可以使用这个方法更好的区分定义来源你的哪个API调用,用户事件,示例如下:
05
console.trace()
console.trace()方法用于显示当前执行的代码在堆栈中的调用路径。如下段代码所示,在控制台里清晰了展示了add()的调用轨迹
06
console.time()
我们在开发过程中,经常需要知道一个方法运行了多长时间,方便我们做出修改完善的判断,我们可以使用console.time(),示例如下:
07
console.dir()
console.dir()可以直观展示一个对象的所有属性和方法,示例代码如下:
今天的小技巧分享就到这里,希望对你有所帮助,祝大家周末愉快,欢迎到留言区进行交流分享。
精彩推荐
css基础丨如何理解transform的matrix()用法
css基础丨如何理解Display的属性:None,Block,Inline,Inline-Block
ES6基础丨解构赋值(destructuring assignment)
JavaScript基础丨前端不懂它,会再多框架也不过只是会用而已!
JavaScript基础丨你真的了解JavaScript吗?
专注分享当下最实用的前端技术。关注前端达人,与达人一起学习进步!
长按关注"前端达人"