利用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 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
原生js实现3D轮播图
Mar 21 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
关于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
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
简单了解python模块概念
2018/01/11 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
自荐书模板
2013/12/19 职场文书
数学系个人求职信范文
2014/01/30 职场文书
业务员的岗位职责
2014/03/15 职场文书
百年校庆节目主持词
2014/03/27 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python