调理小才能,1伍个你恐怕不清楚的JavaScript调节和测试本领

14 个你可能不亮堂的 JavaScript 调节和测试本领

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

原稿出处:
Raygun   译文出处:oschina   

打听你的工具得以小幅的帮忙您完了任务。就算 JavaScript
的调节和测试格外麻烦,但在左右了才干 (tricks)
的情事下,你照样能够用尽量少的的年华化解这个不当 (errors) 和难点 (bugs)

大家会列出15个你恐怕不精通的调和本事,
不过假使精通了,你就能够飞速的想在下次亟待调和 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然后彰显有叁个列表状,上下滚动举办浏览。不过就像用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正是另3个自家很喜爱的飞快调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地点停下,很像C恐怕Java里面打断点。你也能够在部分标准决定中插入该调试语句,譬如:

2. 把 objects 输出成表格

偶尔你大概有一群对象必要查阅。你能够用 console.log
把每一个目的都输出出来,你也得以用 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

【嵌牛导读】:文中已经列出了17个你可能不知道的调节和测试手艺,不过大概须要你牢记在心,以便在下次亟待调节和测试JavaScript代码时行使!

多显示器尺寸测试

Chrome有二个丰盛迷人的职能便是能力所能达到模拟不一样道具的尺寸,在Chrome的Inspector中式点心击toggle
device mode开关,然后就可以在不一样的配备荧屏尺寸下展开调节和测试咯:

在Console飞快选定DOM成分

在Elements选用面板中精选某些DOM成分然后在Console中使用该因素也是那多少个广阔的三个操作,Chrome
Inspector会缓存末了5个DOM成分在它的历史记录中,你能够用类似于Shell中的$0等方式来飞快关联到成分。譬如下图的列表中有‘item-肆′,
‘item-3’, ‘item-二’, ‘item-一’, ‘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();
那边就能够清晰地看出func一调用了func二,然后调用了func4,func四开立了Car的实例然后调用了car.funcX。

格式化被减去的代码

突发性在生养条件下大家开采了一部分莫名奇妙的主题材料,然后忘了把sourcemaps放到那台服务器上,也许在看别人家的网址的源代码的时候,结果就看出了一坨不驾驭讲怎样的代码,就如下图。Chrome为大家提供了三个很人性化的反压缩工具来拉长代码的可读性,大致这么用:

快快牢固调节和测试函数

当大家想在函数里加个断点的时候,一般会挑选那样做:

在Inspector中找到钦点行,然后增添三个断点
在本子中增多二个debugger调用
而是那三种办法都设有二个不成难题正是都要到对应的脚本文件中然后再找到相应的行,那样会相比劳累。那边介绍3个针锋相对快速点的法子,便是在console中央银行使debug(funcName)然后脚本会在内定到对应函数的地点活动截至。这种办法有个毛病正是无能为力在民用函数也许无名氏函数处甘休,所以还是要因时而异:

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

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

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

var car = new Car();

取缔不相干的本子运转

当大家开拓现代网页的时候都会用一些第3方的框架大概库,它们大概都以透过测试并且相对来讲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’)
会重回全体相配成分。注意,若是你会频仍施用到元素,那么别忘了将它们存入变量中。

if (thisThing) {
debugger;
}

3. 试遍全部的尺码

虽说把美妙绝伦的手提式有线电话机都摆在桌子上看起来很酷,但那却很不具体。为啥不选取间接调度分界面大小呢?
Chrome 浏览器提供了你所急需的全方位。
进入检查面板点击 ‘切换设备方式’ 开关,这样你就足以调治视窗的轻重了!

亚洲必赢官网 2

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

Postman

不少人习贯用Postman实行API调试大概发起Ajax请求,然则别忘了你浏览器自带的也能做那个,并且你也没有供给忧虑吗认证啊那些,因为Cookie都是自带帮你传送的,那一个只要在network这一个tab里就能够拓展,大致那样子:

将Objects以表格格局显得

四. 怎么高效稳固 DOM 成分

在要素面板上标识二个 DOM 成分并在 concole 中应用它。Chrome Inspector
的历史记录保存方今的四个要素,最后被标识的成分记为
$0,尾数第二个被标识的记为 $①,就那样推算。

即便您像下边那样把成分按顺序标识为 ‘item-四′, ‘item-3’, ‘item-2’,
‘item-1’, ‘item-0’ ,你就能够在 concole 中获得到 DOM 节点:

亚洲必赢官网 3

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

DOM变化检查评定

DOM有时候照旧很操蛋的,有时候压根不通晓何时就变了,不过Chrome提供了多个小的意义正是当DOM发生变化的时候它会指示你,你能够监测属性别变化化等等:

奇迹我们须求看有个别千头万绪的目的的详细新闻,最简易的艺术就是用console.log然后显示有3个列表状,上下滚动实行浏览。可是就如用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 },
调理小才能,1伍个你恐怕不清楚的JavaScript调节和测试本领。{ animal: ‘Cat’, name: ‘Frodo’, age: 18 }
];
console.table(animals);

陆.得到函数的仓库轨迹音讯

你或然清楚 JavaScript 框架会发出繁多的代码–急忙的。

它创建视图触发事件同时你最后会想知道函数调用是怎么发生的。

因为 JavaScript
不是多少个很结构化的言语,有时候很难完全的摸底到底产生了哪些以及怎么时候爆发的。 今年就轮到
console.trace(在终极的话就只有 trace )出场来调解 JavaScript了 。

假若你未来想看 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();

第壹三行会输出:

亚洲必赢官网 5

你可以看看func1调用了func2,
func2
又调用了func4Func4 创建了Car的实例,然后调用了办法car.funcX,等等。

固然你倍感您对团结的脚本代码13分领悟,那种分析依然是行得通的。
例如你想优化你的代码。
获取到酒店轨迹音讯和二个全数有关函数的列表。每一行都以可点击的,你能够在他们中间前后持续。
那感到就像特地为你企图的美食指南。

熟习工具得以让工具在专门的职业中发挥出越来越大的效果。尽管江湖蜚语JavaScript很难调节和测试,但假设你调节了多少个才具,就会用很少的时日来消除错误和bug.

亚洲必赢官网 6

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

有时候你意识产品有四个难题,而 source map
并未陈设到服务器。不要害怕。Chrome 能够格式化 JavaScript
文件,使之易读。格式化出来的代码在可读性上大概比不上源代码 ——
但至少你能够洞察到发生的荒唐。点击源代码查看器上面包车型大巴夸口代码开关 {}
就可以。 亚洲必赢官网 7

文中已经列出了15个你可能不了然的调节和测试本事,然而恐怕须要您牢记在心,以便在下次亟待调节和测试JavaScript代码时行使!

多荧屏尺寸测试

八. 高效找到调节和测试函数

来探视怎么在函数中设置断点。

平凡状态下有二种办法:

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

  1. 在剧本中增多 debugger**

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

使用调节台是不太普及的主意。在调控台北应用
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

十. 在纵横交错的调节和测试进程中追寻器重

在更错综相连的调试中,大家偶尔须求输出很多行。你能够做的作业正是保持非凡的出口结构,使用越来越多调节台函数,例如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)等创立另1个体制。只怕还能像
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种很好的情势。但自小编不能够不说,假若调整台能够告诉大家须要有个别参数,那就好了。在上头的例子中,函数一愿意三个参数,可是只有2个参数被传出。要是代码没有在代码中管理,它只怕会导致贰个bug 。

除了console.log,

在Elements选取面板中挑选某些DOM成分然后在Console中运用该因素也是老大布满的二个操作,Chrome
Inspector会缓存最终四个DOM成分在它的历史记录中,你可以用接近于Shell中的$0等格局来快捷关联到成分。譬如下图的列表中有‘item-4′,
‘item-三’, ‘item-2’, ‘item-壹’, ‘item-0’这多少个成分,你能够那样使用:

1二. 在调控高雄快捷访问成分

在调控新北施行 querySelector 1种越来越快的法门是采用美元符。$(‘css-selector’) 
将会重临第3个极度的 CSS 选用器。$$(‘css-selector’) 将会回来全体。假若您使用2个因素超越一回,它就值得被视作三个变量。亚洲必赢官网 13

debugger是我们最喜爱、赶快且浑浊的调和工具。试行代码后,Chrome会在实施时自动终止。你还能够把它封装成条件,只在急需时才运维。

亚洲必赢官网 14

13. Postman 很棒(但 Firefox 更快)

大多开拓职员都应用 Postman 来处理 Ajax 请求。Postman
真不错,但每一次都必要张开新的浏览器窗口,新写贰个请求对象来测试。那诚然有个别烦人。

偶然直接利用在用的浏览器会更便于。

那样的话,假若您想呼吁一个经过密码有限支撑安全的页面时,就不再要求担忧验证
Cookie 的标题。那正是 Firefox 中编辑比量齐观复发送请求的法子。

开采探查器并进入互联网页面,右键单击要管理的请求,采用编辑同样重视新发送。未来你想怎么改就怎么改。可以修改头信息,也得以编写参数,然后点击重新发送就可以。

现行反革命自身发送了四遍同贰个伸手,但利用了不一致的参数:亚洲必赢官网 15

 

[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不是三个卓殊谨慎的言语,有时候很难搞驾驭到底产生了吗,尤其是当你须要审阅别的人的代码的时候。那时候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]}

格式化被减少的代码

二.用表格彰显对象

有时候在生养条件下大家开掘了壹部分莫名神奇的主题素材,然后忘了把sourcemaps放到那台服务器上,或然在看外人家的网址的源代码的时候,结果就来看了一坨不清楚讲什么的代码,就如下图。Chrome为我们提供了二个很人性化的反压缩工具来拉长代码的可读性,大概这么用:

奇迹,有1组复杂的目的要翻开。能够透过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中找到钦命行,然后添加叁个断点
在本子中加多3个debugger调用

}

只是那两种办法都设有八个小意思便是都要到对应的脚本文件中然后再找到呼应的行,那样会相比艰难。那边介绍一个针锋相对火速点的不二法门,就是在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);

不准不相干的本子运营

输出:

当大家开拓当代网页的时候都会用一些第二方的框架恐怕库,它们差不离都以由此测试并且相对来说Bug较少的。然则当我们调节和测试我们和睦的台本的时候也会1比很大心跳到那个文件中,引发额外的调节和测试职分。化解方案吧正是禁止那1部分无需调护医疗的剧本运营,详细情形可知这篇小说::
javascript-debugging-with-black-box。

亚洲必赢官网 20

在较复杂的调护医疗情状下发掘主要要素

3.利用差异显示屏尺寸

在1部分叶影参差的调整情状下大家兴许要出口许多行的始末,那时候我们习于旧贯性的会用console.log,
console.debug, console.warn, console.info,
console.error那一个来进展区分,然后就足以在Inspector中展开过滤。可是有时候大家依然盼望能够自定义显示样式,你能够用CSS来定义本性化的音讯样式:

在桌面上安装不相同移动道具模拟器相当的棒,但现实确是不可行的。如何调治窗口大小呢?Chrome提供了所需的1切。跳到调整台并点击‘切换设备方式’开关。观望窗口变化就可以!

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

四.什么样急迅找到DOM成分

亚洲必赢官网 22

在Elements面板中标识贰个DOM成分,并在调节台北动用它。Chrome调节台会保留选择历史的末段八个要素,最后接纳的第叁个要素被标识为$0,第四个选项的成分为$壹,就这样推算。

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

设若您遵照“item-四”,“item-叁”,“item-二”,“item-一”,“item-0”的11采纳以下标签,则足以在调整桃园访问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产生变化的时候它会唤起您,你能够监测属性别变化化等等:

运行产生了1晃结实:

亚洲必赢官网 27

亚洲必赢官网 28

本文来源:https://segmentfault.com/a/1190000005624728
版权归原版的书文者全体,本文有更改。

陆.赢得函数的库房追踪音信

**极客weekly **
ID:geekweekly(长按识别2维码关心)
互连网犄角旮旯的内容聚合
二个专做分享的阳台

接纳JavaScript框架,会引进大量代码。

亚洲必赢官网 29

创建视图并触及事件,最终你想询问函数调用的长河。

出于JavaScript不是1个很结构化的言语,有时候很难知晓什么样时候发生了什么样。使用console.trace
(仅仅只是在调控台南追踪)能够便宜地调节和测试JavaScript.

设想一下,要查阅第三肆行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调用func贰,func2调用func四。Func4创建了多个Car的实例,然后调用函数car.funcX,依此类推。

即使你感觉自个儿的代码写的要命好,那还是很有用。如果你想更上一层楼本人的代码。获取追踪音讯和全体涉嫌的函数,每壹项都足以点击,能够在她们之间往来切换。就如给你提供了三个调用货仓的精选列表。

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

偶然代码会在生育条件出难点,可是你的source
maps未有布置在生养遇到上。不要怕。Chrome可以将您的JavaScript文件格式化。格式化后的代码即使不像真正代码那样有用,但最少能够见见产生了什么样。点击Chrome调整高雄的源代码查看器中的{}开关就可以。

亚洲必赢官网 31

8.高效寻找要调整的函数

假定你要在函数中打断点,最常用的三种情势是:

[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

10.在复杂的调度进程中检索入眼

在更复杂的调度中,大家有时候希望输出繁多行。能够做的正是保持出色输出结构,使用越多调整台函数,比如,
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同样发挥想象力!

1一.观看比赛特定函数的调用及参数

在Chrome调节新北,能够洞察特定的函数。每便调用该函数,就能打字与印刷出流传的参数。

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

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

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

亚洲必赢官网 35

这是翻开传入函数参数的好格局。然而,若是调控台提醒我们形参的数据就更加好了。在上头的例子中,func一可望1个参数,不过唯有传入了二个参数。借使在代码中从未管理这一个参数,就很也许出错。

1贰.在调控新北快捷访问成分

调整新北比querySelector更加快的艺术是选用英镑符号,$(‘css-selector’)将赶回CSS采取器的首先个相称项。$$(‘css-selector’)将回到全体相称项。借使反复应用一个成分,能够把它保存为一个变量。

亚洲必赢官网 36

13. Postman很棒(但Firefox更快)

过多开辟职员使用Postman查看ajax请求。Postman真的很可观。但张开一个新的窗口,写入请求对象,然后再来测试它们,显得很辛劳。

突发性利用浏览器更便于。

当你选取浏览器查看时,要是请求三个密码验证页面,无需忧郁身份验证的cookie。上边看,在Firefox中哪些编写一碗水端平复发送请求。

开发调控台并切换来network选项卡。右击所需的伸手,然后选择编辑并再一次发送。未来得以改换任何想要的改的。改动标题并编辑参数,然后点击重新发送。

下边小编用分歧的性质发起的两遍呼吁:

亚洲必赢官网 37

1肆.刹车节点改换

DOM是一个妙不可言的东西。有时候它会转移,你并不知道为何。不过,当你调节和测试JavaScript时,Chrome能够在DOM成分产生转移时刹车。你以至能够监视它的性质。在Chrome调节台北,右击该因素,然后在安装中精选暂停:

亚洲必赢官网 38

网站地图xml地图