利用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 必知必会之closure
Sep 21 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
javascript的hashCode函数实现代码小结
Aug 11 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
php HTML无刷新提交表单
2016/04/05 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
详解vue v-model
2020/08/31 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
Python写入数据到MP3文件中的方法
2015/07/10 Python
实时获取Python的print输出流方法
2019/01/07 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
String是最基本的数据类型吗?
2013/06/13 面试题
《窗前的气球》教学反思
2014/04/07 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
师范生见习报告
2014/10/31 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
百万英镑观后感
2015/06/09 职场文书
教师继续教育反思周记
2015/06/25 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript