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 相关文章推荐
javascript中xml操作实现代码
Nov 21 Javascript
Javascript玩转继承(二)
May 08 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
js实现上传图片并显示图片名称
Dec 18 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
使用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
第八节--访问方式
2006/11/16 PHP
php你的验证码安全码?
2007/01/02 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
php制作简单模版引擎
2016/04/07 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
php实现评论回复删除功能
2017/05/23 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
用python制作游戏外挂
2018/01/04 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
windows下python安装小白入门教程
2018/09/18 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
python给list排序的简单方法
2020/12/10 Python
幼儿园安全责任书
2014/04/14 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
学习十八大的心得体会
2014/09/12 职场文书
2014年保洁工作总结
2014/11/24 职场文书
评先进个人材料
2014/12/29 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS