1肆 个你只怕不知底的 JavaScript 调节和测试技巧

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

原来的作品出处:
Raygun   译文出处:oschina   

问询你的工具得以相当的大的赞助您完了职责。尽管 JavaScript
的调整非凡麻烦,但在通晓了技能 (tricks)
的图景下,你照旧得以用尽量少的的时间化解那些错误 (errors) 和难点 (bugs)

我们会列出拾伍个你只怕不了然的调护医疗技艺,
但是若是驾驭了,你就会连忙的想在下次急需调治将养 JavaScript
代码的时候使用它们!

近日开端

固然大多技术也得以用在别的检查工具上,但大许多的才具是用在 Chrome
Inspector 和 Firefox 上的。

姓名:郑红           学号:17101223385

‘debugger;’

除了console.log,debugger便是另三个自身很喜悦的短平快调节和测试的工具,将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正是另1个本人很兴奋的比非常的慢调节和测试的工具,将debugger参加代码之后,Chrome会自动在插入它的地点停下,很像C大概Java里面打断点。你也得以在有个别准绳决定中插入该调节和测试语句,譬如:

2. 把 objects 输出成表格

有时你也许有一群对象急需查阅。你能够用 console.log
把每1个对象都输出出来,你也足以用 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);

输出结果:金沙注册送58 1

【嵌牛导读】:文中已经列出了15个你大概不清楚的调和本领,不过恐怕须要您牢记在心,以便在下次内需调试JavaScript代码时选拔!

多显示屏尺寸测试

Chrome有贰个十分动人的法力正是能够模拟不一致器物的尺寸,在Chrome的Inspector中式点心击toggle
device mode按键,然后就能够在区别的装备显示器尺寸下进展调节和测试咯:

在Console迅速选定DOM成分

在Elements选用面板中甄选有些DOM成分然后在Console中选拔该因素也是非常常见的三个操作,Chrome
Inspector会缓存最终四个DOM成分在它的历史记录中,你能够用类似于Shell中的$0等办法来急迅关联到成分。譬如下图的列表中有‘item-四′,
‘item-三’, ‘item-贰’, ‘item-一’, ‘item-0’这多少个成分,你能够那样使用:

获得有个别函数的调用追踪记录

JavaScript框架十分大便利了笔者们的付出,可是也会带来大气的预约义的函数,譬如创制View的、绑定事件的等等,那样我们就不便于跟踪大家自定义函数的调用进程了。纵然JavaScript不是2个充足担惊受怕的言语,有时候很难搞明白到底爆发了吗,越发是当你需求审阅其余人的代码的时候。那时候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贰,然后调用了func四,func四创办了Car的实例然后调用了car.funcX。

格式化被收缩的代码

奇迹在生产情状下大家发掘了有些莫名奇妙的难点,然后忘了把sourcemaps放到那台服务器上,大概在看外人家的网址的源代码的时候,结果就见到了一坨不知情讲什么的代码,就如下图。Chrome为大家提供了二个很人性化的反压缩工具来抓好代码的可读性,大致这么用:

非常的慢稳固调节和测试函数

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

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

禁止不相干的剧本运营

当大家付出现代网页的时候都会用一些第1方的框架大概库,它们差不多都以由此测试并且相对来讲Bug较少的。可是当大家调节和测试大家同心合力的台本的时候也会一非常大心跳到那些文件中,引发额外的调理职务。化解方案吧便是不准那1部分不必要调理的剧本运维,详细情况可知那篇小说::
javascript-debugging-with-black-box。

在较复杂的调度情状下开采重大意素

在部分错综复杂的调理情况下我们大概要出口许多行的剧情,那时候我们习于旧贯性的会用console.log,
console.debug, console.warn, console.info,
console.error这一个来举行区分,然后就足以在Inspector中开展过滤。可是有时候大家依旧愿意能够自定义呈现样式,你能够用CSS来定义性子化的新闻样式:

调治将养小才具,17个你也许不理解的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’);

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

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

在Chrome中得以监测钦赐函数的调用意况以及参数:

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

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

Console中动用$实行成分查询

在Console中也足以选取来进展类似于querySelector那样基于CSS选用器的查询,(‘css-selector’)
会再次回到满意相配的率先个要素,而$$(‘css-selector’)
会再次来到全体匹配成分。注意,如若您会壹再使用到成分,那么别忘了将它们存入变量中。

if (thisThing) {
debugger;
}

三. 试遍全体的尺寸

即便把各式各样的无绳电话机都摆在桌子上看起来很酷,但那却很不现实。为何不选取直接调治分界面大小呢?
Chrome 浏览器提供了您所要求的成套。
进入检查面板点击 ‘切换设备形式’ 开关,那样您就足以调动视窗的分寸了!

金沙注册送58 2

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

Postman

多五人习贯用Postman进行API调节和测试或然发起Ajax请求,可是别忘了你浏览器自带的也能做那么些,并且你也不必要操心吗认证啊那个,因为Cookie都以自带帮你传送的,这么些只要在network那么些tab里就能拓展,大概那标准:

将Objects以表格格局呈现

四. 怎么赶快牢固 DOM 成分

在要素面板上标志3个 DOM 成分并在 concole 中央银行使它。Chrome Inspector
的历史记录保存如今的七个因素,最终被标志的因素记为
$0,尾数第四个被标识的记为 $一,就那样类推。

假设你像上边那样把成分按梯次标识为 ‘item-4′, ‘item-三’, ‘item-二’,
‘item-1’, ‘item-0’ ,你就足以在 concole 中获得到 DOM 节点:

金沙注册送58 3

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

DOM变化检查评定

DOM有时候依旧很操蛋的,有时候压根不知情几时就变了,可是Chrome提供了三个小的效果便是当DOM产生变化的时候它会提示你,你能够监测属性别变化化等等:

偶尔大家需求看一些复杂的靶子的详细音信,最简便的措施正是用console.log然后彰显成二个列表状,上下滚动进行浏览。但是仿佛用console.table体现有列表会更加好哎,大约是介个样子:

伍. 用 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’);

运转结果:

金沙注册送58 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);

6.拿走函数的库房轨迹信息

您大概知道 JavaScript 框架会发生众多的代码–急速的。

它创立视图触发事件同时你说起底会想理解函数调用是怎么产生的。

因为 JavaScript
不是一个很结构化的语言,有时候很难完全的通晓到底发出了怎么样以及哪些时候产生的。 那一年就轮到
console.trace(在终点的话就唯有 trace )出场来调治 JavaScript了 。

尽管你现在想看 car 实例在第二3行调用 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();

第1三行会输出:

金沙注册送58 5

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

尽管你倍感您对自个儿的本子代码非凡领会,那种分析照旧是立见功用的。
举个例子你想优化你的代码。
获取到仓库轨迹音信和1个存有相关函数的列表。每1行都以可点击的,你能够在他们中间前后持续。
那感到就像是特地为您筹划的美食做法。

掌握工具得以让工具在职业中发挥出越来越大的功力。即便江湖浮言JavaScript很难调节和测试,但若是你左右了多少个手艺,就能用很少的时日来化解错误和bug.

金沙注册送58 6

7. 格式化代码使调试 JavaScript 变得轻巧

神迹你发觉产品有一个标题,而 source map
并不曾布置到服务器。毫不惧怕。Chrome 能够格式化 JavaScript
文件,使之易读。格式化出来的代码在可读性上只怕不比源代码 ——
但至少你能够观测到发出的荒唐。点击源代码查看器上边包车型大巴鼓吹代码开关 {}
就能够。 金沙注册送58 7

文中已经列出了10个你或者不清楚的调度才具,可是大概必要您牢记在心,以便在下次亟需调试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
的时候截止运作:金沙注册送58 8

一起来看

Chrome有二个百般迷人的功效正是能够模拟不一样道具的尺寸,在Chrome的Inspector中式点心击toggle
device mode按键,然后就能够在差异的装置荧屏尺寸下进展调节和测试咯:

九.  屏蔽不相干代码

后天,平常在行使中引进八个库或框架。个中绝大诸多都因此完美的测试且绝对未有缺陷。然则,调节和测试器照旧会跻身与此调节和测试职务毫无干系的文件。解决方案是将不须要调弄整理的脚本屏蔽掉。当然那也足以包含你和谐的脚本。
点此阅读越多关于调节和测试不相干代码。金沙注册送58 9

超越八分之四技艺都适用于Chrome调控台和Firefox,尽管还有众多别样的调节和测试工具,但许多也适用。

金沙注册送58 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’);

输出:
金沙注册送58 11

例如:

在console.log()中,
能够用%s设置字符串,%i设置数字,%c设置自定义样式等等,还有好些个更加好的console.log()使用方法。
假诺应用的是单页应用框架,可感到视图(view)音讯创立2个体制,为模型(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) {
//….
};

接下来输出: 金沙注册送58 12

那是查看将怎么着参数字传送递到函数的一种很好的法子。但自个儿无法不说,假设调控台能够告诉大家供给有个别参数,那就好了。在下面的事例中,函数1梦想1个参数,可是唯有一个参数被盛传。假若代码没有在代码中管理,它大概会导致贰个bug 。

除了console.log,

在Elements选择面板中甄选有个别DOM成分然后在Console中运用该因素也是不行广阔的多少个操作,Chrome
Inspector会缓存最终5个DOM成分在它的历史记录中,你能够用接近于Shell中的$0等办法来异常的快关联到成分。譬如下图的列表中有‘item-4′,
‘item-三’, ‘item-二’, ‘item-一’, ‘item-0’那多少个元素,你能够如此使用:

1贰. 在调控纽伦堡快速访问成分

在调节马普托实施 querySelector 1种更加快的措施是选拔比索符。$(‘css-selector’) 
将会重回第三个门道相当的 CSS 选拔器。$$(‘css-selector’) 将会回来全数。假使你选用二个成分超过贰次,它就值得被视作七个变量。金沙注册送58 13

debugger是大家最欣赏、快捷且浑浊的调弄整理工科具。实行代码后,Chrome会在试行时自动甘休。你以致能够把它封装成条件,只在急需时才运维。

金沙注册送58 14

13. Postman 很棒(但 Firefox 更快)

重重开拓职员都采纳 Postman 来拍卖 Ajax 请求。Postman
真不错,但每一回都亟需展开新的浏览器窗口,新写贰个请求对象来测试。那实在有个别烦人。

神迹直接运用在用的浏览器会更易于。

那样的话,假若您想呼吁一个经过密码保险安全的页面时,就不再须求操心验证
Cookie 的主题材料。那正是 Firefox 中编辑并再次发送请求的点子。

开荒探查器并跻身互联网页面,右键单击要管理的呼吁,采用编辑相提并论新发送。未来您想怎么改就怎么改。能够修改头音信,也可以编写参数,然后点击重新发送就能够。

现行反革命自身发送了两回同一个伸手,但利用了不相同的参数:金沙注册送58 15

 

[if !supportLists]1.[endif]if (thisThing) {

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

14. 节点变化时刹车

DOM
是个有趣的东西。有时候它发生了转移,但您却并不知道为什么会这么。不过,假若你须求调治将养JavaScript,Chrome 能够在 DOM
成分发生变化的时候抛锚处理。你居然能够监督它的质量。在 Chrome
探查器上,右键点击有个别成分,并采用暂停(Break on)选项来使用:

金沙注册送58 16

 

3 赞 5 收藏 1
评论

金沙注册送58 17

[if !supportLists]2.[endif]

JavaScript框架十分大便利了我们的费用,不过也会带来大气的预约义的函数,譬如创造View的、绑定事件的等等,那样大家就不轻易追踪我们自定义函数的调用进程了。尽管JavaScript不是2个尤其如履薄冰的言语,有时候很难搞精晓到底爆发了啥,尤其是当你须求审阅别的人的代码的时候。这时候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展开,更易于见到正在管理的始末!

金沙注册送58 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]

金沙注册送58 19

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

禁止不相干的剧本运维

输出:

当大家开荒当代网页的时候都会用一些第3方的框架大概库,它们大约都以因而测试并且相对而言Bug较少的。可是当大家调节和测试我们自个儿的台本的时候也会一非常大心跳到那么些文件中,引发额外的调整职务。解决方案吧正是明确命令禁止那1部分不供给调弄整理的剧本运转,详细情形可知那篇小说::
javascript-debugging-with-black-box。

金沙注册送58 20

在较复杂的调治意况下开采根本要素

3.应用区别显示屏尺寸

在部分复杂的调弄整理情况下大家大概要出口诸多行的剧情,那时候大家习于旧贯性的会用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

金沙注册送58 21

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

四.怎么着高效找到DOM成分

金沙注册送58 22

在Elements面板中标记三个DOM成分,并在调控斯特拉斯堡动用它。Chrome调整台会保留选拔历史的末段八个成分,最后选项的第多少个因素被标识为$0,第1个选用的要素为$1,由此及彼。

在console.log()中你可以动用%s来表示三个字符串 , %i 来代表数字, 以及 %c
来代表自定义的体制。

金沙注册送58,要是您遵照“item-四”,“item-三”,“item-二”,“item-一”,“item-0”的壹1接纳以下标签,则能够在调节哥伦布做客DOM节点:

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

金沙注册送58 23

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

5.选择console.time()和console.timeEnd()测试循环

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

要意识到有些代码的举办时间,越发是调度缓慢循环时,相当管用。乃至能够通过给艺术传入分裂参数,来设置几个停车计时器。来看望它是怎么运转的:

金沙注册送58 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 =

金沙注册送58 25

0; i < 100000; i++){

Postman

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

不少人习于旧贯用Postman进行API调节和测试恐怕发起Ajax请求,可是别忘了你浏览器自带的也能做这一个,并且你也不须要担忧什么认证啊那些,因为Cookie都是自带帮您传送的,那个只要在network这一个tab里就能进行,大约那样子:

[if !supportLists]7.[endif]}

金沙注册送58 26

[if !supportLists]8.[endif]

DOM变化检验

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

DOM有时候依然很操蛋的,有时候压根不知底几时就变了,不过Chrome提供了3个小的效劳正是当DOM发生变化的时候它会唤起您,你能够监测属性别变化化等等:

运作产生了弹指间结果:

金沙注册送58 27

金沙注册送58 28

本文来源:https://segmentfault.com/a/1190000005624728
版权归最初的著笔者全体,本文有改变。

陆.赢得函数的仓库追踪消息

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

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

金沙注册送58 29

成立视图并触及事件,最终你想打听函数调用的经过。

是因为JavaScript不是2个很结构化的言语,有时候很难领悟什么日期发生了什么。使用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();

2四行将出口:

金沙注册送58 30

能够观察func一调用func贰,func二调用func肆。Func四创立了1个Car的实例,然后调用函数car.funcX,就那样类推。

正是你感觉本人的代码写的万分好,那依然很有用。假诺你想更上一层楼自个儿的代码。获取追踪音信和享有涉嫌的函数,各类都足以点击,能够在他们中间来回切换。如同给您提供了二个调用酒馆的精选列表。

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

奇迹代码会在生育条件出难题,不过你的source
maps未有布置在生养条件上。不要怕。Chrome能够将您的JavaScript文件格式化。格式化后的代码即使不像真正代码那样有用,但最少能够看来产生了怎么着。点击Chrome调节博洛尼亚的源代码查看器中的{}按键就可以。

金沙注册送58 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时,将以调节和测试形式结束:

金沙注册送58 32

玖.屏蔽不相干代码

今昔,我们经常在使用中引进多少个库或框架。在那之中好些个都经过精美的测试且相对未有缺陷。不过,调节和测试器照旧会进去与调度职务非亲非故的公文。消除方案是遮挡不需求调弄整理的剧本。当然能够回顾你本人的台本。在那篇小说中阅读愈多关于调节和测试不相干代码()

金沙注册送58 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’);

输出:

金沙注册送58 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]};

金沙注册送58 35

那是翻开传入函数参数的好点子。但是,借使调控台提醒大家形参的多寡就更好了。在地点的例证中,func一旨在一个参数,可是唯有传入了2个参数。借使在代码中从不管理那一个参数,就很可能出错。

1二.在调整哥伦布飞快访问成分

调节弗罗茨瓦夫比querySelector更加快的法子是利用美元符号,$(‘css-selector’)将重临CSS选择器的率先个相称项。$$(‘css-selector’)将回来全体相称项。假使频仍选拔1个因素,能够把它保存为3个变量。

金沙注册送58 36

13. Postman很棒(但Firefox更快)

无数开荒人士使用Postman查看ajax请求。Postman真的很特出。但张开一个新的窗口,写入请求对象,然后再来测试它们,显得很困苦。

神跡利用浏览器更易于。

当您利用浏览器查看时,假若请求1个密码验证页面,不要求操心身份验证的cookie。下边看,在Firefox中怎么样编写一碗水端平新发送请求。

展开调节台并切换来network选项卡。右击所需的伸手,然后选用编辑并再次发送。今后能够改换任何想要的改的。更换标题并编制参数,然后点击重新发送。

下边笔者用分裂的性质发起的三次呼吁:

金沙注册送58 37

1肆.暂停节点改造

DOM是3个妙不可言的事物。有时候它会变动,你并不知道为何。不过,当您调节和测试JavaScript时,Chrome可以在DOM成分发生变动时停顿。你以致足以监视它的性质。在Chrome调整德雷斯顿,右击该因素,然后在设置中精选暂停:

金沙注册送58 38

相关文章

网站地图xml地图