利用Console来Debug的10个高级技巧汇总


Posted in Javascript onMarch 26, 2018

前言

在过去的十年中,我最热衷的事情之一就是前端开发(特别是JavaScript)。作为一个“匠人”,我喜欢专研各种工具。在本文,我会为你介绍一些用老式console来debug的技巧。

是的,我们都知道下面基本的技巧:

console.log(‘Hello World!');
console.info(‘Something happened…'); 
console.warn(‘Something strange happened…'); 
console.error(‘Something horrible happened…');

从现在开始,我将教会你一些你不知道的技巧,让你成为老司机!

1. console.trace()

如果你想知道消息是哪里打印出来的,使用console.trace()来获取要打印的数据的stacktrace。

利用Console来Debug的10个高级技巧汇总

2. console.time() && console.timeEnd()

如果你想分析函数的性能,可以使用console.time()来计时,console.timeEnd()来结束计时,控制台会打印出两次之间的时间差。

利用Console来Debug的10个高级技巧汇总

3. console.memory

如果你发现性能问题很难分析,可能还要考虑是否有内存泄露,你可以使用console.memory(注意memory是console的属性,不是函数),来查看当前的堆的使用情况。

利用Console来Debug的10个高级技巧汇总

4. console.profile(‘profileName') & console.profileEnd(‘profileName')

虽然不是一个标准的做法,不过被广泛接受使用。你可以使用这两个命令来启动和停止profiling。这样有助你你在代码中做精准的profiling。而不依赖于手动的鼠标点击。你可以在浏览器控制台Javacript Profiler中找到刚刚的profile。

利用Console来Debug的10个高级技巧汇总

5. console.count(“STUFF I COUNT”)

有时候为了记录一个函数或则一段代码重复执行了多少次,可以使用console.count('?')来记录。每一次执行到该代码,就会自动加1。

利用Console来Debug的10个高级技巧汇总

6. console.assert(false, “Log me!”)

你可以使用console.assert来在某些为假的条件下输出消息,而不是用if-else。

注意:在Node.js下会报错(Assertion Error)。

利用Console来Debug的10个高级技巧汇总

7. console.group(‘group') & console.groupEnd(‘group')

如果你想对打印的log做一个格式化的整理,可以使用console.group()console.groupEnd() 。使用console.group可以将log聚合成组,并且形成嵌套的层级。

请看示例:

利用Console来Debug的10个高级技巧汇总

8. String substitutions

你可以使用console.log打印变量(%s = string, %i = integer, %o = object, %f = float)。

利用Console来Debug的10个高级技巧汇总

9. console.clear()

我们已经在控制台输出了很多记录,来使用console.clear()清空一下。

利用Console来Debug的10个高级技巧汇总

10. console.table()

最后一个压轴的!你可以使用console.table()将对象以表格的形式打印出来。

利用Console来Debug的10个高级技巧汇总

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript的函数
Jan 31 Javascript
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 #Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 #Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 #Javascript
使用Vue构建可重用的分页组件
Mar 26 #Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 #jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 #jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 #jQuery
You might like
php面向对象 字段的声明与使用
2012/06/14 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
PHP扩展开发入门教程
2015/02/26 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
javascript prototype 原型链
2009/03/12 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
Python时间获取及转换知识汇总
2017/01/11 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
什么是Web Service?
2012/07/25 面试题
大学生个人自我鉴定
2013/12/03 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
个人委托函范文
2015/01/29 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
闪闪的红星观后感
2015/06/08 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL