实用的 JavaScript 调试小技巧
‘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’这几个元素,你可以这么使用:
获取某个函数的调用追踪记录
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’) 会返回全部匹配元素。注意,如果你会多次使用到元素,那么别忘了将它们存入变量中。
Postman
很多人习惯用Postman进行API调试或者发起Ajax请求,不过别忘了你浏览器自带的也能做这个,并且你也不需要担心啥认证啊这些,因为Cookie都是自带帮你传送的,这些只要在network这个tab里就能进行,大概这样子:
DOM变化检测
DOM有时候还是很操蛋的,有时候压根不知道啥时候就变了,不过Chrome提供了一个小的功能就是当DOM发生变化的时候它会提醒你,你可以监测属性变化等等:
实用的 JavaScript 调试小技巧的更多相关文章
- JavaScript 调试小技巧
'debugger;' 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...
- JavaScript调试小技巧
1.‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面 ...
- 12个实用的 Javascript 奇淫技巧
这里分享12个实用的 Javascript 奇淫技巧.JavaScript自1995年诞生以来已过去了16个年头,如今全世界无数的网页在依靠她完成各种关键任务,JavaScript曾在Tiobe发布的 ...
- C语言中的调试小技巧
C语言中的调试小技巧 经常看到有人介绍一些IDE或者像gdb这样的调试器的很高级的调试功能,也听人说过有些牛人做工程的时候就用printf来调试,不用特殊的调试器.特别是在代码经过编译器一些比较复杂的 ...
- 微信移动端web页面调试小技巧
技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客 http://lizhug.com/mymajor/微信移动端web页面调试小技巧
- 超强干货,11个灰常实用的AI设计小技巧!
11个超级实用的AI设计小技巧!涉及到很多的实用操作,纯干货经验总结,灰常值得收藏,赶快转走学起来吧! 编辑:千锋UI设计
- 通过Dapr实现一个简单的基于.net的微服务电商系统(十四)——开发环境容器调试小技巧
之前有很多同学提到如何做容器调试,特别是k8s环境下的容器调试,今天就讲讲我是如何调试的.大家都知道在vs自带的创建项目模板里勾选docker即可通过F5启动docker容器调试.但是对于启动在k8s ...
- JavaScript的兼容小坑和调试小技巧
JavaScript作为一种弱类型编程语言,入门简单,只要稍微注意一下IE方面的兼容性,就可以很好的使用它. 本文主要是对IE兼容的小坑和调试的小技巧进行举例分析,并给出解决方法. 1.var str ...
- 19 个 JavaScript 编码小技巧
这篇文章适合任何一位基于JavaScript开发的开发者.我写这篇文章主要涉及JavaScript中一些简写的代码,帮助大家更好理解一些JavaScript的基础.希望这些代码能从不同的角度帮助你更好 ...
随机推荐
- selenium基础-图形验证码
selenium基础-图形验证码 一.图形验证码作用 设计的初衷其实就是为了防自动化,防止一些人利用自动工具恶意攻击网站 二.图形验证码是由客户端生成还是由服务器端生成的? 图形验证码是由服务器端生成 ...
- dl,dt,dd标签 VS 传统table实现数据列表
过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难.现在,越来越多的前端开发er们开始使用xHTML+CSS替代最 ...
- iOS开发系列-UIImageView的contentMode
typedef NS_ENUM(NSInteger, UIViewContentMode) { UIViewContentModeScaleToFill, UIViewContentModeScale ...
- 百度开平台BAE搭建网站
百度开平台BAE搭建网站 一.注册:在百度云注册账号,并且登陆 然后实名验证 二.开始搭建 三.部署项目:我们来把我们的项目提交上去 填写百度云的账号密码 四.删除:删除部署项目 以上就是百度开平台B ...
- python包的安装
Microsoft Windows [版本 10.0.17134.228] (c) 2018 Microsoft Corporation.保留所有权利. C:\Users\Administrator& ...
- PHPSTORM 2016.2 注册
1.由于 http://idea.qinxi1992.cn/ OR http://us.idea.lanyus.com/ 都已经被禁掉了,所以就不能再用License server 去注册了. 如图所 ...
- JS随机产生颜色
<script> function selectForm(lowerValue,upperValue){ var choices=upperValue-lowerValue+1; retu ...
- Android开发 retrofit入门讲解
前言 retrofit基于okhttp封装的网络请求框架,网络请求的工作本质上是 OkHttp 完成,而 retrofit 仅负责网络请求接口的封装.如果你不了解OKhttp建议你还是先了解它在来学习 ...
- python实现操作excel,数据写入excel的一行或者一列
# _*_ coding:utf-8 _*_ import random import xlwt,string class ImportData(object): def create_num(sel ...
- ReentrantLock中的公平锁与非公平锁
简介 ReentrantLock是一种可重入锁,可以等同于synchronized的使用,但是比synchronized更加的强大.灵活. 一个可重入的排他锁,它具有与使用 synchronized ...