十五个你大概不精晓的JavaScript调节和测试手艺,调试小本领

1四 个你大概不清楚的 JavaScript 调节和测试才干

2017/11/17 · JavaScript
· 1 评论 ·
调试

最初的小说出处:
Raygun   译文出处:oschina   

精晓你的工具得以大幅度的协助您做到任务。纵然 JavaScript
的调节和测试非凡辛勤,但在支配了本领 (tricks)
的事态下,你照旧得以用尽量少的的年华化解这几个错误 (errors) 和主题素材 (bugs)

大家会列出十四个你也许不精通的调养手艺,
可是假使了解了,你就会着急的想在下次内需调和 JavaScript
代码的时候使用它们!

现行反革命起来

虽说繁多手艺也得以用在其余检查工具上,但大多数的技巧是用在 Chrome
Inspector 和 Firefox 上的。

姓名:郑红           学号:17101223385

‘debugger;’

除去console.log,debugger便是另3个自家很喜欢的神速调节和测试的工具,将debugger参加代码之后,Chrome会自动在插入它的地点停下,很像C也许Java里面打断点。你也足以在一些规范决定中插入该调试语句,譬如:

if (thisThing) { debugger; }

‘debugger;’

1. ‘debugger;’

‘debugger’ 是 console.log
之外笔者最欢畅的调节和测试工具,轻巧暴力。只要把它写到代码里,Chrome
运行的时候就会自动自动停在那。你以致能够用标准化语句把它包裹起来,那样就足以在必要的时候才实行它。

JavaScript

if (thisThing) { debugger; }

1
2
3
if (thisThing) {
    debugger;
}

正文转自

将Objects以表格方式浮现

奇迹大家须求看有的犬牙相制的目标的详细音讯,最简便易行的点子正是用console.log然后呈现有1个列表状,上下滚动进行浏览。不过就好像用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);

除去console.log,debugger正是另三个自家很欣赏的神速调节和测试的工具,将debugger参预代码之后,Chrome会自动在插入它的地方停下,很像C或然Java里面打断点。你也得以在一部分口径决定中插入该调试语句,譬如:

2. 把 objects 输出成表格

偶然你或许有一群对象急需查阅。你能够用 console.log
把每3个对象都输出出来,你也能够用 console.table
语句把它们一向出口为二个表格!

JavaScript

var animals = [ { animal: ‘Horse’, name: ‘Henry’, age: 43 }, { animal:
‘Dog’, name: ‘Fred’, age: 13 }, { animal: ‘Cat’, name: ‘Frodo’, age: 18
} ]; console.table(animals);

1
2
3
4
5
6
7
var animals = [
    { animal: ‘Horse’, name: ‘Henry’, age: 43 },
    { animal: ‘Dog’, name: ‘Fred’, age: 13 },
    { animal: ‘Cat’, name: ‘Frodo’, age: 18 }
];
console.table(animals);

出口结果:亚洲必赢官网 1

【嵌牛导读】:文中已经列出了16个你恐怕不亮堂的调节和测试技术,然而只怕须求你牢记在心,以便在下次亟需调节和测试JavaScript代码时利用!

多显示器尺寸测试

Chrome有叁个百般使人迷恋的效用正是力所能及模拟分裂器械的尺寸,在Chrome的Inspector中式点心击toggle
device mode按键,然后就能够在分裂的装置显示器尺寸下进展调节和测试咯:

在Console飞快选定DOM成分

在Elements选拔面板中精选有个别DOM成分然后在Console中运用该因素也是特别分布的四个操作,Chrome
Inspector会缓存最终几个DOM成分在它的历史记录中,你能够用接近于Shell中的$0等方法来急忙关联到成分。譬如下图的列表中有‘item-肆′,
‘item-3’, ‘item-二’, ‘item-1’, ‘item-0’那多少个因素,你可以这么使用:

赢得有些函数的调用追踪记录

JavaScript框架非常大便利了我们的支付,可是也会带来大气的预约义的函数,譬如成立View的、绑定事件的等等,那样我们就不易于追踪我们自定义函数的调用进度了。就算JavaScript不是1个非凡小心的言语,有时候很难搞驾驭毕竟爆发了啥,尤其是当您供给审阅别的人的代码的时候。这时候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调用了func二,然后调用了func4,func四创办了Car的实例然后调用了car.funcX。

格式化被减去的代码

突发性在生养条件下我们开掘了有的莫名奇妙的主题材料,然后忘了把sourcemaps放到那台服务器上,恐怕在看别人家的网址的源代码的时候,结果就看出了一坨不知情讲怎么着的代码,就好像下图。Chrome为我们提供了2个很人性化的反压缩工具来进步代码的可读性,大约这么用:

高速牢固调节和测试函数

当我们想在函数里加个断点的时候,一般会选拔如此做:

在Inspector中找到钦点行,然后增加3个断点
在本子中增多一个debugger调用
可是那三种情势都留存1个小难点就是都要到对应的剧本文件中然后再找到相应的行,那样会相比较麻烦。那边介绍二个对立快速点的点子,正是在console中选用debug(funcName)然后脚本会在钦赐到相应函数的地方机关终止。那种艺术有个毛病便是心有余而力不足在个体函数或然无名氏函数处结束,所以照旧要因时而异:

var func1 = function() {
func2();
};

var Car = function() {
this.funcX = function() {
this.funcY();
}

this.funcY = function() {
this.funcZ();
}
}

var car = new Car();

明令禁止不相干的剧本运转

当大家开荒当代网页的时候都会用一些第1方的框架可能库,它们大概皆以由此测试并且相对而言Bug较少的。可是当大家调节和测试大家和好的剧本的时候也会一相当的大心跳到那些文件中,引发额外的调和职责。化解方案吗就是不准那1部分不供给调养的本子运转,详细的情况可知那篇文章::
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来代表2个字符串 , %i 来表示数字, 以及 %c
来表示自定义的体裁。

监测钦命函数的调用与参数

在Chrome中能够监测钦点函数的调用处境以及参数:

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

那种方法能够让您实时监察到底什么参数被流传到了内定函数中。

Console中央银行使$举办成分查询

在Console中也足以利用来拓展类似于querySelector那样基于CSS选拔器的询问,(‘css-selector’)
会重返满足相配的率先个要素,而$$(‘css-selector’)
会再次来到全部相称成分。注意,借使你会一再使用到元素,那么别忘了将它们存入变量中。

if (thisThing) {
debugger;
}

三. 试遍全体的尺码

固然如此把五光十色的无绳电话机都摆在桌子上看起来很酷,但那却很不现实。为啥不选择直接调度分界面大小呢?
Chrome 浏览器提供了你所须要的总体。
进入检查面板点击 ‘切换设备方式’ 按键,这样您就足以调节视窗的尺寸了!

亚洲必赢官网 2

【嵌牛鼻子】:JavaScrip调节和测试

Postman

成千上万人习贯用Postman实行API调节和测试或许发起Ajax请求,可是别忘了你浏览器自带的也能做这几个,并且你也不须要忧郁什么认证啊那一个,因为Cookie都以自带帮您传送的,这个只要在network那些tab里就能开始展览,大致那标准:

将Objects以表格情势体现

四. 哪些高效稳固 DOM 成分

在要素面板上标识3个 DOM 成分并在 concole 中应用它。Chrome Inspector
的历史记录保存近来的七个成分,最终被标志的因素记为
$0,尾数第3个被标识的记为 $一,依此类推。

设若您像下边那样把成分按梯次标识为 ‘item-四′, ‘item-三’, ‘item-2’,
‘item-一’, ‘item-0’ ,你就能够在 concole 中获得到 DOM 节点:

亚洲必赢官网 3

【嵌牛提问】:如何更有功能的调整错误和bug?

DOM变化检查评定

DOM有时候照旧很操蛋的,有时候压根不亮堂何时就变了,但是Chrome提供了三个小的效劳正是当DOM产生变化的时候它会唤起您,你能够监测属性别变化化等等:

偶尔大家供给看一些错综复杂的靶子的详细音讯,最简便的办法就是用console.log然后显示成多个列表状,上下滚动举行浏览。不过就像用console.table展示有列表会更加好啊,差不离是介个样子:

5. 用 console.time() 和 console.timeEnd() 测试循环耗费时间

当您想通晓一点代码的进行时间的时候那些工具将会这一个有用,尤其是当您一向很耗费时间的循环的时候。你居然可以通过标签来设置三个timer 。demo 如下:

JavaScript

console.time(‘Timer1’); var items = []; for(var i = 0; i < 100000;
i++){ items.push({index: i}); } console.timeEnd(‘Timer1’);

1
2
3
4
5
6
7
8
9
console.time(‘Timer1’);
var items = [];
for(var i = 0; i < 100000; i++){
   items.push({index: i});
}
console.timeEnd(‘Timer1’);

运营结果:

亚洲必赢官网 4

【嵌牛正文】:以越来越快的进程和越来越高的频率来调节和测试JavaScript

var animals = [
{ animal: ‘Horse’, name: ‘Henry’, age: 43 },
{ animal: ‘Dog’, name: ‘Fred’, age: 13 },
{ animal: ‘Cat’, name: ‘Frodo’, age: 18 }
];
console.table(animals);

陆.赢得函数的仓库轨迹音信

你或许清楚 JavaScript 框架会生出过多的代码–快速的。

它创立视图触发事件同时你最后会想精通函数调用是怎么爆发的。

因为 JavaScript
不是2个很结构化的言语,有时候很难完全的打听到底发出了什么以及什么样时候产生的。 那年就轮到
console.trace(在极限的话就只有 trace )出场来调整 JavaScript了 。

万1你未来想看 car 实例在第二三行调用 funcZ 函数的完整酒店轨迹音讯:

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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();
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();

第一3行会输出:

亚洲必赢官网 5

你能够看看func1调用了func2,
func2
又调用了func4Func4 创建了Car的实例,然后调用了点子car.funcX,等等。

就算你感到你对本人的本子代码卓殊精晓,那种分析依然是实用的。
举个例子你想优化你的代码。
获取到货仓轨迹音信和一个有所相关函数的列表。每1行都以可点击的,你能够在她们中间前后持续。
那感到就如特地为您筹算的菜谱。

熟习工具得以让工具在专门的学业中发挥出更加大的效用。即便江湖没有根据的话JavaScript很难调节和测试,但假若你左右了多少个技术,就能用很少的岁月来化解错误和bug.

亚洲必赢官网 6

7. 格式化代码使调节和测试 JavaScript 变得轻易

有时候你意识产品有一个难点,而 source map
并未配备到服务器。不要害怕。Chrome 能够格式化 JavaScript
文件,使之易读。格式化出来的代码在可读性上或然不及源代码 ——
但至少你能够洞察到发生的谬误。点击源代码查看器下边包车型大巴说大话代码按键 {}
就能够。 亚洲必赢官网 7

文中已经列出了十四个你或然不了然的调养技术,可是恐怕须要你牢记在心,以便在下次急需调节和测试JavaScript代码时行使!

多显示器尺寸测试

八. 快速找到调试函数

来看望怎么在函数中安装断点。

日常情形下有两种方法:

**一. 在查看器中找到某行代码并在此增加断点

  1. 在本子中增多 debugger**

那三种方法都必须在文书中找到须要调剂的那一行。

运用调控台是不太宽广的办法。在调控苏州动用
debug(funcName),代码会在终止在进入这里钦定的函数时。

本条操作便捷,但它不能够用于局地函数或无名函数。但是假设不是那两种情景下,那可能是调护医治函数最快的法子。(注意:那里并不是在调用
console.debug 函数)。

JavaScript

var func1 = function() { func2(); }; var Car = function() { this.funcX =
function() { this.funcY(); } this.funcY = function() { this.funcZ(); } }
var car = new Car();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var func1 = function() {
func2();
};
var Car = function() {
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
}
var car = new Car();

在调控毕尔巴鄂输入 debug(car.funcY),脚本会在调试情势下,进入 car.funcY
的时候结束运转:亚洲必赢官网 8

一同来看

Chrome有二个不胜动人的效应正是力所能及模拟分化道具的尺码,在Chrome的Inspector中式点心击toggle
device mode开关,然后就足以在不一样的设备显示屏尺寸下开始展览调试咯:

玖.  屏蔽不相干代码

今天,日常在动用中引进几个库或框架。在那之中山大学部分都由此完美的测试且相对未有缺陷。可是,调节和测试器仍旧会进来与此调节和测试任务非亲非故的文本。消除方案是将不要求调护治疗的脚本屏蔽掉。当然那也能够包含你和睦的台本。
点此阅读越来越多关于调节和测试不相干代码。亚洲必赢官网 9

大部本事都适用于Chrome调整台和Firefox,就算还有多数其余的调解工具,但大诸多也适用。

亚洲必赢官网 10

10. 在纷纷的调节和测试进度中寻觅入眼

在更扑朔迷离的调护医治中,大家偶尔供给输出诸多行。你能够做的作业正是保持特出的输出结构,使用更多调整台函数,举例Console.log,console.debug,console.warn,console.info,console.error
等等。然后,你能够在控制弗罗茨瓦夫急忙浏览。但有时,有些JavaScrip调节和测试音信并不是你必要的。现在,能够本人民美术出版社化调节和测试新闻了。在调节和测试JavaScript时,能够运用CSS并自定义调整台消息:

JavaScript

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

1
2
3
4
5
6
7
8
9
10
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’);

输出:
亚洲必赢官网 11

例如:

在console.log()中,
能够用%s设置字符串,%i设置数字,%c设置自定义样式等等,还有繁多更加好的console.log()使用办法。
借使利用的是单页应用框架,可感到视图(view)音讯创制叁个样式,为模型(models),集结(collections),调节器(controllers)等成立另三个体裁。大概还是能够像
wlog,clog 和 mlog 同样发挥您的想象力!

1. debugger

在Console连忙选定DOM成分

1一. 查看具体的函数调用和它的参数

在 Chrome 浏览器的调整台(Console)中,你会把您的专注力集中在切实的函数上。每便那么些函数被调用,它的值就会被记录下来。

JavaScript

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

1
2
3
var func1 = function(x, y, z) {
//….
};

接下来输出: 亚洲必赢官网 12

这是翻开将怎么样参数传递到函数的一种很好的点子。但本人不可能不说,借使调节台能够告诉大家须求有个别参数,那就好了。在下边包车型大巴事例中,函数1可望1个参数,然则只有一个参数被流传。固然代码没有在代码中拍卖,它或者会促成1个bug 。

除了console.log,

在Elements选用面板中挑选有个别DOM成分然后在Console中选拔该因素也是尤其遍布的三个操作,Chrome
Inspector会缓存尾数DOM成分在它的历史记录中,你能够用接近于Shell中的$0等方法来急忙关联到成分。譬如下图的列表中有‘item-四′,
‘item-3’, ‘item-二’, ‘item-一’, ‘item-0’那多少个要素,你能够如此使用:

1二. 在调控德雷斯顿急迅访问成分

在调控埃德蒙顿实行 querySelector 1种更加快的格局是行使新币符。$(‘css-selector’) 
将会重临第3个格外的 CSS 采取器。$$(‘css-selector’) 将会回来全数。假设你使用三个因素当先三回,它就值得被视作三个变量。亚洲必赢官网 13

debugger是我们最欢悦、快捷且浑浊的调解工具。试行代码后,Chrome会在执行时自动终止。你居然足以把它封装成条件,只在需求时才运维。

亚洲必赢官网 14

13. Postman 很棒(但 Firefox 更快)

诸多开采人士都接纳 Postman 来管理 Ajax 请求。Postman
真不错,但每便都急需开荒新的浏览器窗口,新写贰个伸手对象来测试。那实在有些烦人。

神蹟直接行使在用的浏览器会更易于。

这样的话,假若你想请求2个经过密码保险安全的页面时,就不再须要忧虑验证
Cookie 的标题。那正是 Firefox 中编辑并重复发送请求的格局。

展开探查器并进入网络页面,右键单击要拍卖的恳求,选择编辑等量齐观复发送。未来你想怎么改就怎么改。能够修改头新闻,也能够编制参数,然后点击重新发送就可以。

当今自个儿发送了五遍同3个请求,但使用了不一致的参数:亚洲必赢官网 15

 

[十五个你大概不精晓的JavaScript调节和测试手艺,调试小本领。if !supportLists]1.[endif]if (thisThing) {

获得某些函数的调用追踪记录

1四. 节点变化时刹车

DOM
是个风趣的事物。有时候它爆发了变通,但您却并不知道为啥会如此。可是,借使你需求调弄整理JavaScript,Chrome 能够在 DOM
成分产生变化的时候抛锚管理。你还能监督它的属性。在 Chrome
探查器上,右键点击某些成分,并精选暂停(Break on)选项来行使:

亚洲必赢官网 16

 

3 赞 5 收藏 1
评论

亚洲必赢官网 17

[if !supportLists]2.[endif]

JavaScript框架一点都不小方便了我们的付出,可是也会拉动大气的预约义的函数,譬如创制View的、绑定事件的等等,那样我们就不便于追踪我们自定义函数的调用进度了。尽管JavaScript不是3个充裕行事极为谨慎的语言,有时候很难搞明白到底爆发了吗,尤其是当你必要审阅其余人的代码的时候。那时候console.trace将要起效果咯,它能够帮你实行函数调用的寻踪。譬如上边包车型客车代码中我们要追踪出car对象中对于funcZ的调用进程:

[if !supportLists]3.[endif]debugger;

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

[if !supportLists]4.[endif]

这边就能够清晰地看出func一调用了func二,然后调用了func四,func肆成立了Car的实例然后调用了car.funcX。

[if !supportLists]5.[endif]}

格式化被核减的代码

2.用表格呈现对象

偶然在生育蒙受下大家开掘了一些莫名美妙的题目,然后忘了把sourcemaps放到那台服务器上,可能在看外人家的网址的源代码的时候,结果就看到了一坨不精晓讲哪些的代码,就像下图。Chrome为大家提供了三个很人性化的反压缩工具来增加代码的可读性,差不离这么用:

偶然,有一组复杂的目的要查看。能够经过console.log查看并滚动浏览,亦或然利用console.table展开,更便于看到正在管理的剧情!

亚洲必赢官网 18

[if !supportLists]1.[endif]var animals = [

Paste_Image.png

[if !supportLists]2.[endif]{animal:’Horse’,name:’Henry’, age: 43
},

立即牢固调节和测试函数

[if !supportLists]3.[endif]亚洲必赢官网,{animal:’Dog’,name:’Fred’, age: 13 },

当大家想在函数里加个断点的时候,一般会选用如此做:

[if !supportLists]4.[endif]{ animal:’Cat’,name:’Frodo’, age: 18

在Inspector中找到钦赐行,然后增添二个断点
在本子中加多三个debugger调用

}

唯独那三种格局都存在2个小标题正是都要到对应的台本文件中然后再找到相应的行,那样会相比费心。那边介绍三个相对飞速点的方法,正是在console中运用debug(funcName)然后脚本会在钦点到对应函数的地点自行终止。那种方法有个缺陷就是十分的小概在民用函数或然无名氏函数处结束,所以依然要因时而异:

[if !supportLists]5.[endif]];

var func1 = function() {
func2();
};
var Car = function() {
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
}
var car = new Car();

[if !supportLists]6.[endif]

亚洲必赢官网 19

[if !supportLists]7.[endif]console.table(animals);

禁止不相干的剧本运营

输出:

当大家开采当代网页的时候都会用一些第3方的框架可能库,它们差不多都以经过测试并且相对来说Bug较少的。然则当大家调节和测试大家自身的本子的时候也会1相当大心跳到那个文件中,引发额外的调度任务。化解方案吧正是明确命令禁止那有些不需求调理的脚本运营,实际情况可知那篇文章::
javascript-debugging-with-black-box。

亚洲必赢官网 20

在较复杂的调和情状下开采重大体素

叁.使用不一致荧屏尺寸

在有的参差不齐的疗养情形下大家兴许要出口大多行的剧情,那时候大家习贯性的会用console.log,
console.debug, console.warn, console.info,
console.error那一个来开始展览区分,然后就能够在Inspector中开始展览过滤。可是有时候大家依旧期待能够自定义展现样式,你能够用CSS来定义天性化的新闻样式:

在桌面上安装差异移动器械模拟器十分厉害,但具体确是不可行的。怎样调节窗口大小呢?Chrome提供了所需的整整。跳到调控台并点击‘切换设备方式’开关。观望窗口变化就可以!

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

亚洲必赢官网 21

  • decoration: underline;’, ‘–‘, msg, ‘–‘);
    }
    console.todo(“This is something that’ s need to be fixed”);
    console.important(‘This is an important message’);

4.怎样赶快找到DOM成分

亚洲必赢官网 22

在Elements面板中标志三个DOM成分,并在调整博洛尼亚选择它。Chrome调整台会保留接纳历史的末尾三个要素,最后选取的第多少个要素被标识为$0,第四个选项的因素为$一,依此类推。

在console.log()中您能够使用%s来表示二个字符串 , %i 来代表数字, 以及 %c
来表示自定义的样式。

借使你根据“item-四”,“item-3”,“item-二”,“item-壹”,“item-0”的逐条选用以下标签,则可以在调节弗罗茨瓦夫走访DOM节点:

监测钦命函数的调用与参数

亚洲必赢官网 23

在Chrome中能够监测钦点函数的调用情状以及参数:

5.施用console.time()和console.timeEnd()测试循环

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

要摸清有个别代码的实行时间,特别是调剂缓慢循环时,卓殊有效。以致足以由此给艺术传入差别参数,来安装多个电火花计时器。来探望它是怎么运作的:

亚洲必赢官网 24

[if !supportLists]1.[endif]console.time(‘Timer1’);

Paste_Image.png

[if !supportLists]2.[endif]

那种措施能够让您实时监察到底什么参数被盛传到了点名函数中。

[if !supportLists]3.[endif]var items = [];

Console中应用$进行成分查询

[if !supportLists]4.[endif]

在Console中也得以动用来开始展览类似于querySelector那样基于CSS采纳器的询问,(‘css-selector’)
会再次来到满意相称的首先个因素,而$$(‘css-selector’)
会再次回到全体匹配成分。注意,假诺你会反复利用到元素,那么别忘了将它们存入变量中。

[if !supportLists]5.[endif]for(var i =

亚洲必赢官网 25

0; i < 100000; i++){

Postman

[if !supportLists]6.[endif]items.push({index: i});

诸两人习于旧贯用Postman进行API调试恐怕发起Ajax请求,不过别忘了你浏览器自带的也能做那一个,并且你也不须要顾虑什么认证啊这个,因为Cookie都以自带帮您传送的,这个只要在network这么些tab里就能展开,大致那样子:

[if !supportLists]7.[endif]}

亚洲必赢官网 26

[if !supportLists]8.[endif]

DOM变化检查评定

[if !supportLists]9.[endif]console.timeEnd(‘Timer1’);

DOM有时候依旧很操蛋的,有时候压根不清楚什么时候就变了,可是Chrome提供了二个小的功能就是当DOM产生变化的时候它会唤醒您,你能够监测属性别变化化等等:

运作发生了眨眼之间间结果:

亚洲必赢官网 27

亚洲必赢官网 28

正文来源:https://segmentfault.com/a/1190000005624728
版权归原来的文章者全体,本文有转移。

6.获取函数的酒店追踪新闻

**极客weekly **
ID:geekweekly(长按识别2维码关注)
网络犄角旮旯的内容聚合
3个专做分享的平台

动用JavaScript框架,会引进大量代码。

亚洲必赢官网 29

成立视图并触及事件,最后你想打听函数调用的进度。

出于JavaScript不是一个很结构化的言语,有时候很难知晓如何时候发生了怎么样。使用console.trace
(仅仅只是在调控塞内加尔达喀尔追踪)可以方便地调试JavaScript.

设想一下,要查看第34行car实例调用函数funcZ的成套仓库追踪新闻:

[if !supportLists]1.[endif]var car;

[if !supportLists]2.[endif]var func1 =function() {

[if !supportLists]3.[endif]func2();

[if !supportLists]4.[endif]}

[if !supportLists]5.[endif]

[if !supportLists]6.[endif]var func2 =function() {

[if !supportLists]7.[endif]func4();

[if !supportLists]8.[endif]}

[if !supportLists]9.[endif]var func3 =function() {

[if !supportLists]10.[endif]}

[if !supportLists]11.[endif]

[if !supportLists]12.[endif]var func4 =function() {

[if !supportLists]13.[endif]car =new Car();

[if !supportLists]14.[endif]car.funcX();

[if !supportLists]15.[endif]}

[if !supportLists]16.[endif]var Car =function() {

[if !supportLists]17.[endif]this.brand = ‘volvo’;

[if !supportLists]18.[endif]this.color = ‘red’;

[if !supportLists]19.[endif]this.funcX =function() {

[if !supportLists]20.[endif]this.funcY();

[if !supportLists]21.[endif]}

[if !supportLists]22.[endif]

[if !supportLists]23.[endif]this.funcY =function() {

[if !supportLists]24.[endif]this.funcZ();

[if !supportLists]25.[endif]}

[if !supportLists]26.[endif]

[if !supportLists]27.[endif]this.funcZ =function() {

[if !supportLists]28.[endif]console.trace(‘trace car’)

[if !supportLists]29.[endif]}

[if !supportLists]30.[endif]}

[if !supportLists]31.[endif]func1();

贰四行将出口:

亚洲必赢官网 30

能够看来func1调用func2,func2调用func四。Func4创办了八个Car的实例,然后调用函数car.funcX,依此类推。

即使你以为自身的代码写的不胜好,那依然很有用。如若你想改良本身的代码。获取追踪音信和有着涉嫌的函数,每一项都能够点击,能够在她们之间往来切换。就好像给您提供了四个调用仓库的选料列表。

7.将代码格式化后再调节和测试JavaScript

有时候代码会在生产条件出难点,然而你的source
maps未有配备在生育情状上。不要怕。Chrome能够将您的JavaScript文件格式化。格式化后的代码即便不像真正代码那样有用,但至少能够看出产生了什么。点击Chrome调控斯特拉斯堡的源代码查看器中的{}开关就能够。

亚洲必赢官网 31

八.飞跃寻找要调治的函数

借使你要在函数中打断点,最常用的二种格局是:

[if !supportLists]1.[endif]在支配台查找行并增多断点

[if !supportLists]2.[endif]在代码中增添debugger

在那四个减轻方案中,您必须在文书中单击以调节和测试特定行。

利用调控台打断点可能不太宽广。在控制巴尔的摩采纳debug(funcName),当达到传入的函数时,代码将结束。

这些调节和测试方法连忙,但缺点是不适用于民用或无名函数。但除了这些之外个人和佚名函数,那或然是找到调节和测试函数的最快方法。(注意:那几个函数和console.debug函数不是同八个东西。)

[if !supportLists]1.[endif]var func1 =function() {

[if !supportLists]2.[endif]func2();

[if !supportLists]3.[endif]};

[if !supportLists]4.[endif]

[if !supportLists]5.[endif]var Car =function() {

[if !supportLists]6.[endif]this.funcX =function() {

[if !supportLists]7.[endif]this.funcY();

[if !supportLists]8.[endif]}

[if !supportLists]9.[endif]

[if !supportLists]10.[endif]this.funcY =function() {

[if !supportLists]11.[endif]this.funcZ();

[if !supportLists]12.[endif]}

[if !supportLists]13.[endif]}

[if !supportLists]14.[endif]

[if !supportLists]15.[endif]var car = new Car();

在调节布里斯托输入debug(car.funcY),当调用car.funcY时,将以调试形式截至:

亚洲必赢官网 32

九.屏蔽不相干代码

近年来,大家平常在应用中引进多少个库或框架。个中许多都通过精美的测试且相对未有缺陷。不过,调试器依旧会进入与调度职务非亲非故的文书。化解方案是遮挡不需求调理的脚本。当然能够归纳你自个儿的本子。在那篇文章中阅读更多关于调节和测试不相干代码()

亚洲必赢官网 33

十.在纷纭的调节和测试进程中探索着重

在更扑朔迷离的调弄整理中,大家偶尔希望输出多数行。能够做的正是保持特出输出结构,使用更加多控制台函数,比方,
console.log,

console.debug, console.warn, console.info,
console.error等等。然后,能够在调控夏洛特飞速浏览。但神跡,某个JavaScrip调节和测试音讯并不是您须求的。以后,能够自个儿美化调节和测试音信了。在调试JavaScript时,能够运用CSS并自定义调节台消息:

[if !supportLists]1.[endif]console.todo =function(msg) {

[if !supportLists]2.[endif]console.log(‘ % c % s % s % s‘,
‘color:yellow; background – color: black;’, ‘–‘, msg, ‘–‘);

[if !supportLists]3.[endif]}

[if !supportLists]4.[endif]

[if !supportLists]5.[endif]console.important =function(msg) {

[if !supportLists]6.[endif]console.log(‘ % c % s % s % s’,
‘color:brown; font – weight: bold; text – decoration: underline;’, ‘–‘,
msg, ‘–‘);

[if !supportLists]7.[endif]}

[if !supportLists]8.[endif]

[if !supportLists]9.[endif]console.todo(“Thisissomething that’ s
needtobe fixed”);

[if !supportLists]10.[endif]console.important(‘Thisisan
important message’);

输出:

亚洲必赢官网 34

例如:

在console.log()中,能够用%s设置字符串,%i设置数字,%c设置自定义样式等等,还有大多越来越好的console.log()使用办法。假设应用的是单页应用框架,可感到视图(view)信息创造二个体裁,为模型(models),集结(collections),调整器(controllers)等创制另五个样式。大概还足以像wlog,clog和mlog同样发挥想象力!

11.调查特定函数的调用及参数

在Chrome调控弗罗茨瓦夫,能够考查特定的函数。每一遍调用该函数,就会打字与印刷出流传的参数。

[if !supportLists]1.[endif]var func1 =function(x, y, z) {

[if !supportLists]2.[endif]//….

[if !supportLists]3.[endif]};

亚洲必赢官网 35

那是翻开传入函数参数的好办法。不过,假设调整台提醒大家形参的数据就越来越好了。在上头的例子中,func一可望叁个参数,然则只有传入了1个参数。假若在代码中从未拍卖那几个参数,就很恐怕出错。

12.在调控罗利急迅访问成分

调控哈博罗内比querySelector越来越快的法门是运用欧元符号,$(‘css-selector’)将再次回到CSS选取器的率先个相配项。$$(‘css-selector’)将回来全数相称项。要是反复接纳多个因素,能够把它保存为一个变量。

亚洲必赢官网 36

13. Postman很棒(但Firefox更快)

重重开辟人士使用Postman查看ajax请求。Postman真的极美丽好。但张开一个新的窗口,写入请求对象,然后再来测试它们,显得很麻烦。

有时候利用浏览器更便于。

当你选拔浏览器查看时,假设请求贰个密码验证页面,不需求忧虑身份验证的cookie。上边看,在Firefox中怎么着编写同样重视复发送请求。

开垦调控台并切换来network选项卡。右击所需的央浼,然后选取编辑并再一次发送。未来能够转移任何想要的改的。改动标题并编写参数,然后点击重新发送。

下边笔者用不一样的质量发起的两遍呼吁:

亚洲必赢官网 37

14.间断节点退换

DOM是三个幽默的事物。有时候它会变动,你并不知道为何。然而,当你调节和测试JavaScript时,Chrome能够在DOM成分爆发改造时停顿。你居然足以监视它的质量。在Chrome调节苏州,右击该因素,然后在设置中挑选暂停:

亚洲必赢官网 38

网站地图xml地图