文档章节

13个实用的JavaScript调试小技巧

WolfX
 WolfX
发布于 2016/06/20 17:28
字数 1554
阅读 29
收藏 1
点赞 0
评论 0

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);

多屏幕尺寸测试

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

多屏幕尺寸测试

在Console快速选定DOM元素

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

快速选定DOM元素

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

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为我们提供了一个很人性化的反压缩工具来增强代码的可读性,大概这么用:

格式化被压缩的代码

快速定位调试函数

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

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

在脚本中添加一个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();

快速定位调试函数

禁止不相关的脚本运行

当我们开发现代网页的时候都会用一些第三方的框架或者库,它们几乎都是经过测试并且相对而言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’);

禁止不相关的脚本运行

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

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

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

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

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

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

Console中使用$进行元素查询

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

Console中使用$进行元素查询

Postman

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

Postman

DOM变化检测

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

DOM变化检测

本文转载自:https://segmentfault.com/a/1190000005624728

共有 人打赏支持
WolfX

WolfX

粉丝 52
博文 246
码字总数 31477
作品 0
南京
技术主管
chrome开发人员工具使用链接整理

GoogleChrome 开发人员工具详解:http://wenku.baidu.com/link?url=v-bAUCddu3t9I14LQVQtRhNDoohge2lsTLl3QDjiMoLQl4CJ629xfqnLwoYyDsWLWDkUyEmllRwY-oUEtwDN-ZlTTSjOdvpKaxwUoJmp6y Google......

智能小松鼠
2015/03/19
0
0
js调试技巧(通过debugger调试)

通常我们在网站开发的过程中会用到很多JavaScript代码, 来进行调试,调试方法有很多,以前用的是火狐浏览器的调试工具,但是后来版本等等的原因不能用了, 现在就用debugger在谷歌浏览器中进...

architect刘源源
05/02
0
0
Javascript开发者必备的工具软件

导读:如果你想研究JavaScript并成为脚本开发的高手,那么就需要一些专门用于开发或测试JavaScript的软件,他们不仅可以提高你的开发速度,同时能大大减少BUG发生。 不管你是JavaScript新手还...

wankaiming
2010/12/10
0
1
12 个开发人员的实用代码编辑器

Compilr Compilr 是一个在线的集成开发怀集(IDE),目前支持9种编程语言:C、C++、C#、Java、JavaScript、PHP、Python、Ruby 和 Visual Basic。 Compilr 由坐落于加拿大新斯科舍省的 Ninja ...

ChildhoodAndy
2012/12/28
0
1
Firebug 调试 JS入门--如何调试JS

下图为如何找到web应用的JS,激活firebug,点script,然后ALL旁边选择你要Debug的JS。 下图是如何打断点 基本跟Eclipse一样,点击行号就OK了。 下图是如何在断电上设定条件,如果条件符合,就...

夏诺风
2013/03/20
0
1
dwz使用过程中疑问(求大神帮忙看下如何解决)

一.简介 1、概述 DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。 DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量...

谢思华
2014/05/12
0
2
【华磊随笔】善于使用工具(1)-使用IE8开发人员工具和FireBug分析Jquery FlexiGrid的实现原理

作者: 华磊 发表于 2010-08-20 22:27 原文链接 阅读: 706 评论: 6 【华磊随笔】善于使用工具(1)-使用IE8开发人员工具和FireBug分析Jquery FlexiGrid的实现原理 "工欲善其事,必先利其器" 当...

磊华
2010/08/23
0
0
分享10个帮助你编写更加简洁javascript代码的小技巧

日期:2011/12/13 来源:GBin1.com 如果你是javascript开发人员的话,这篇文章绝对是你应该阅读的。这篇文章中我们将介绍各种技巧帮助你编写更加简洁的javascript代码。 同时在这篇文章中,我...

gbin1
2011/12/14
0
0
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
0
5
50个实用的JavaScript工具

JavaScript是一个功能强大的客户端脚本语言,许多现代化的网站和Web应用程序都会使用到它。JavaScript可以增强用户的体验,并提供丰富的互动式组件和功能。虽然它的语法相当简单,但是对开发...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CoreText进阶(七)-添加自定义View和对其

CoreText进阶(七)-添加自定义View和对其 其它文章: CoreText 入门(一)-文本绘制 CoreText入门(二)-绘制图片 CoreText进阶(三)-事件处理 CoreText进阶(四)-文字行数限制和显示更多...

aron1992
16分钟前
0
0
Python爬虫 爬取百合网的女人们和男人们

学Python也有段时间了,目前学到了Python的类。个人感觉Python的类不应称之为类,而应称之为数据类型,只是数据类型而已!只是数据类型而已!只是数据类型而已!重要的事情说三篇。 据书上说...

p柯西
28分钟前
0
0
在Java中,你真的会日期转换吗

1.什么是SimpleDateFormat 在java doc对SimpleDateFormat的解释如下: SimpleDateFormatis a concrete class for formatting and parsing dates in a locale-sensitive manner. It allows fo......

Java小铺
36分钟前
0
0
Linux系统梳理---系统搭建(二):tomcat的安装和使用

上一章讲到JDK的安装使用,这一章主要记录下服务器tomcat的安装以及部署一个项目. 1.下载tomcat,这里下载的是apache-tomcat-8.5.32.tar.gz 2.创建文件夹,便于管理,和JDK一样,在usr目录下创建t...

勤奋的蚂蚁
47分钟前
0
0
ES15-聚合

1.Terms Aggregation 分组聚合 2.Filter Aggregation 过滤聚合

贾峰uk
48分钟前
0
0
【2018.07.19学习笔记】【linux高级知识 20.27-20.30】

20.27 分发系统介绍 20.28 expect脚本远程登录 20.29 expect脚本远程执行命令 20.30 expect脚本传递参数

lgsxp
51分钟前
0
0
10.32/10.33 rsync通过服务同步~10.35 screen工具

通过服务的方式同步要编辑配置文件:[root@linux-xl ~]# vim /etc/rsyncd.confport=873log file=/var/log/rsync.logpid file=/var/run/rsyncd.pidaddress=192.168.43.21[tes...

洗香香
54分钟前
0
0
与女儿谈商业模式 (3):沃尔玛的成功模式

分类:与女儿谈商业模式 | 标签: 经济学 沃尔玛 陈志武 2007-05-10 09:09阅读(11279)评论(30) 与女儿谈商业模式 (3):沃尔玛的成功模式 陈志武 /文 沃尔玛(Wal-Mart)是另一个有意思的财...

祖冲之
今天
0
0
网页加载速度优化方法总结

1、减少请求 最大的性能漏洞就是一个页面需要发起几十个网络请求来获取诸如样式表、脚本或者图片这样的资源,这个在相对低带宽和高延迟的移动设备连接上来说影响更严重。 2、整合资源 对开发...

Jack088
今天
0
0
dubbo学习

https://blog.csdn.net/houshaolin/article/details/76408399

喵五郎
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部