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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
理解AngularJs指令
Dec 10 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 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
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
php简单中奖算法(实例)
2017/08/15 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
使用JS读秒使用示例
2013/09/21 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
JS实现放烟花效果
2020/03/10 Javascript
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
tensorflow之并行读入数据详解
2020/02/05 Python
Python实现区域填充的示例代码
2021/02/03 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
女大学生自我鉴定
2013/12/09 职场文书
给男朋友的道歉信
2014/01/12 职场文书
培训主管岗位职责
2014/02/01 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
刑事上诉状范文
2015/05/22 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android