JavaScript调试的多个必备小Tips


Posted in Javascript onJanuary 15, 2017

前言

调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要。

本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白。

一、‘debugger;'

除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断点。你也可以在一些条件控制中插入该调试语句,譬如:

if (thisThing) {
 debugger;
}

二、将Objects以表格形式展示

有时候我们需要看一些复杂的对象的详细信息,最简单的方法就是用console.log然后展示成一个列表状,上下滚动进行浏览。不过似乎用console.table展示成列表会更好呦,大概是介个样子:

var animals = [
 { animal: 'Horse', name: 'Henry', age: 43 },
 { animal: 'Dog', name: 'Fred', age: 13 },
 { animal: 'Cat', name: 'Frodo', age: 18 }
];
 
console.table(animals);

JavaScript调试的多个必备小Tips

三、多屏幕尺寸测试

Chrome有一个非常诱人的功能就是能够模拟不同设备的尺寸,在Chrome的Inspector中点击toggle device mode按钮,然后就可以在不同的设备屏幕尺寸下进行调试咯:

JavaScript调试的多个必备小Tips

四、在Console快速选定DOM元素

在Elements选择面板中选择某个DOM元素然后在Console中使用该元素也是非常常见的一个操作,Chrome Inspector会缓存最后5个DOM元素在它的历史记录中,你可以用类似于Shell中的$0等方式来快速关联到元素。譬如下图的列表中有‘item-4′, ‘item-3', ‘item-2', ‘item-1', ‘item-0'这几个元素,你可以这么使用:

JavaScript调试的多个必备小Tips

五、获取某个函数的调用追踪记录

JavaScript框架极大方便了我们的开发,但是也会带来大量的预定义的函数,譬如创建View的、绑定事件的等等,这样我们就不容易追踪我们自定义函数的调用过程了。虽然JavaScript不是一个非常严谨的语言,有时候很难搞清楚到底发生了啥,特别是当你需要审阅其他人的代码的时候。这时候console.trace就要起作用咯,它可以帮你进行函数调用的追踪。譬如下面的代码中我们要追踪出car对象中对于funcZ的调用过程:

var car;
 
var func1 = function() {
func2();
}
 
var func2 = function() {
func4();
}
 
var func3 = function() {
 
}
 
var func4 = function() {
car = new Car();
car.funcX();
}
 
var Car = function() {
this.brand = ‘volvo';
this.color = ‘red';
 
this.funcX = function() {
this.funcY();
}
 
this.funcY = function() {
this.funcZ();
}
 
this.funcZ = function() {
console.trace(‘trace car')
}
}
 
func1();

这边就可以清晰地看出func1调用了func2,然后调用了func4,func4创建了Car的实例然后调用了car.funcX。

六、格式化被压缩的代码

有时候在生产环境下我们发现了一些莫名奇妙的问题,然后忘了把sourcemaps放到这台服务器上,或者在看别人家的网站的源代码的时候,结果就看到了一坨不知道讲什么的代码,就像下图。Chrome为我们提供了一个很人性化的反压缩工具来增强代码的可读性,大概这么用:

JavaScript调试的多个必备小Tips

七、快速定位调试函数

当我们想在函数里加个断点的时候,一般会选择这么做:

     1.在Inspector中找到指定行,然后添加一个断点

     2.在脚本中添加一个debugger调用

不过这两种方法都存在一个小问题就是都要到对应的脚本文件中然后再找到对应的行,这样会比较麻烦。这边介绍一个相对快捷点的方法,就是在console中使用debug(funcName)然后脚本会在指定到对应函数的地方自动停止。这种方法有个缺陷就是无法在私有函数或者匿名函数处停止,所以还是要因时而异:

var func1 = function() {
func2();
};
 
var Car = function() {
this.funcX = function() {
this.funcY();
}
 
this.funcY = function() {
this.funcZ();
}
}
 
var car = new Car();

JavaScript调试的多个必备小Tips

八、禁止不相关的脚本运行

当我们开发现代网页的时候都会用一些第三方的框架或者库,它们几乎都是经过测试并且相对而言Bug较少的。不过当我们调试我们自己的脚本的时候也会一不小心跳到这些文件中,引发额外的调试任务。解决方案呢就是禁止这部分不需要调试的脚本运行,详情可见这篇文章:: javascript-debugging-with-black-box。

在较复杂的调试情况下发现关键元素 在一些复杂的调试环境下我们可能要输出很多行的内容,这时候我们习惯性的会用console.log, console.debug, console.warn, console.info, console.error这些来进行区分,然后就可以在Inspector中进行过滤。不过有时候我们还是希望能够自定义显示样式,你可以用CSS来定义个性化的信息样式:

console.todo = function(msg) {
console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;', ‘?‘, msg, ‘?‘);
}
 
console.important = function(msg) {
console.log(‘ % c % s % s % s', ‘color: brown; font - weight: bold; text - decoration: underline;', ‘?‘, msg, ‘?‘);
}
 
console.todo(“This is something that' s need to be fixed”);
console.important(‘This is an important message');

JavaScript调试的多个必备小Tips

console.log()中你可以使用%s来代表一个字符串 , %i 来代表数字, 以及 %c 来代表自定义的样式。

九、监测指定函数的调用与参数

在Chrome中可以监测指定函数的调用情况以及参数:

var func1 = function(x, y, z) {
};

JavaScript调试的多个必备小Tips

这种方式能够让你实时监控到底啥参数被传入到了指定函数中。

十、Console中使用$进行元素查询

在Console中也可以使用来进行类似于querySelector那样基于CSS选择器的查询,(‘css-selector') 会返回满足匹配的第一个元素,而$$(‘css-selector') 会返回全部匹配元素。注意,如果你会多次使用到元素,那么别忘了将它们存入变量中。

JavaScript调试的多个必备小Tips

十一、Postman

很多人习惯用Postman进行API调试或者发起Ajax请求,不过别忘了你浏览器自带的也能做这个,并且你也不需要担心啥认证啊这些,因为Cookie都是自带帮你传送的,这些只要在network这个tab里就能进行,大概这样子:

JavaScript调试的多个必备小Tips

十二、DOM变化检测

DOM有时候还是很操蛋的,有时候压根不知道啥时候就变了,不过Chrome提供了一个小的功能就是当DOM发生变化的时候它会提醒你,你可以监测属性变化等等:

JavaScript调试的多个必备小Tips

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Javascript能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
原生JavaScript实现购物车
Jan 10 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 #Javascript
js实现密码强度检验
Jan 15 #Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 #Javascript
vue实现简单实时汇率计算功能
Jan 15 #Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 #Javascript
JS轮播图中缓动函数的封装
Nov 25 #Javascript
JavaScript字符串对象
Jan 14 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
杏林同学录(三)
2006/10/09 PHP
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
浅谈python锁与死锁问题
2020/08/14 Python
python安装及变量名介绍详解
2020/12/12 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
EJB timer的种类
2014/10/28 面试题
什么是Web Service?
2012/07/25 面试题
优秀学生干部推荐材料
2014/02/03 职场文书
教师考核评语
2014/04/28 职场文书
节电标语大全
2014/06/23 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
旷课检讨书范文
2015/01/27 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
党支部鉴定意见
2015/06/02 职场文书
运动会宣传稿50字
2015/07/23 职场文书