利用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 相关文章推荐
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 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
session在PHP大型web应用中的使用
2011/06/25 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
老生常谈ES6中的类
2017/07/31 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
详解python中__name__的意义以及作用
2019/08/07 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
python numpy数组中的复制知识解析
2020/02/03 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
入股协议书范本
2014/04/14 职场文书