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 相关文章推荐
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
Vue常用指令详解分析
Aug 19 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
如何制作自己的原生JavaScript路由
May 05 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
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
js实现简单的秒表
2020/01/16 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
python str与repr的区别
2013/03/23 Python
用Python抢过年的火车票附源码
2015/12/07 Python
Python 含参构造函数实例详解
2017/05/25 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
在python image 中实现安装中文字体
2020/05/16 Python
python如何运行js语句
2020/09/09 Python
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
查环查孕证明
2014/01/10 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书