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 相关文章推荐
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 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
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
28个JS验证函数收集
2010/03/02 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
python判断输入日期为第几天的实例
2018/11/13 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
重构Python代码的六个实例
2020/11/25 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
大学毕业自我鉴定范文
2014/02/03 职场文书
十佳青年事迹材料
2014/08/21 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
创业计划书之酒吧
2019/12/02 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers