>

chrome完全指南,调节台不完全指南

- 编辑:澳门新葡亰平台游戏 -

chrome完全指南,调节台不完全指南

Chrome 调控台不完全指南

2015/01/10 · JavaScript · 1 评论 · Chrome

本文作者: 伯乐在线 - 刘哇勇 。未经笔者许可,禁止转发!
应接参预伯乐在线 专辑小编。

Chrome的开垦者工具已经壮大到没朋友的境地了,特别是其功用丰裕分界面友好的console,使用合适可以犹如下作用:

  • 更高「逼格」越来越快「开荒调节和测量试验」越来越强「升级级的Frontender」
  • Bug无处遁形「Console大法好」

Chrome 调控台不完全指南,chrome完全指南

正文转自  

Chrome的开拓者工具已经壮大到没朋友的境地了,极度是其功用丰裕分界面友好的console,使用方便能够就像下功用:

  • 越来越高「逼格」更加快「开垦调节和测量检验」越来越强「进级级的Frontender」
  • Bug无处遁形「Console大法好」

console.log

大家都会用log,但鲜有人很好地运用console.error , console.warn 等将出口到调节台的音讯实行分类整理。
她们效用分别比极小,意义在于将出口到调控台的音讯举行分拣,或许说让它们更语义化。
逐一所表示的语义如下:

  • console.log:普通音讯
  • console.info:提醒类音信
  • console.error:错误新闻
  • console.warn:警示消息

当合理运用上述log方法后,可以很便利地在调控台选取查看特定类型的新闻。

JavaScript

console.log('一颗红心向太阳','吼吼~'); console.info('楼上药不能够停!'); console.warn('楼上嘴太贱!'); console.error('楼上关你毛事?');

1
2
3
4
console.log('一颗红心向太阳','吼吼~');
console.info('楼上药不能停!');
console.warn('楼上嘴太贱!');
console.error('楼上关你毛事?');

图片 1

假定再协作console.group 与console.groupEnd,能够将这种分类管理的沉思发挥到极致。那符合于在开辟贰个层面一点都不小模块比非常多很复杂的Web 应用软件时,将分头的log音讯分组到以分别命名空间为名称的组里面。

JavaScript

console.group("app.foo"); console.log("来自foo模块的消息 blah blah blah..."); console.groupEnd(); console.group("app.bar"); console.log("来自bar模块的音讯 blah blah blah..."); console.groupEnd();

1
2
3
4
5
6
console.group("app.foo");
console.log("来自foo模块的信息 blah blah blah...");
console.groupEnd();
console.group("app.bar");
console.log("来自bar模块的信息 blah blah blah...");
console.groupEnd();

图片 2

而关于console.log,早就被捉弄坏了。一切都来源于Chrome提供了那样贰个API:第一个参数能够分包部分格式化的吩咐例如%c

比如给hello world 做件美貌的嫁衣再拉出去见人:

JavaScript

console.log('%chello world','font-size:25px;color:red;');

1
console.log('%chello world','font-size:25px;color:red;');

图片 3

只要你感觉远远不足过瘾,那就把您能写出来的最华侈的CSS样式都施用上吧,譬如渐变。于是你能够拿走如下华丽丽的功力:

JavaScript

console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

1
console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

图片 4

各类招大招的节奏啊~

瞧着下边密集的代码不用紧张,上面console.log()第三个参数全部是纯CSS用来支配样式的,你不会素不相识。而首先个参数里能够带用百分号开首的转义指令,如上边输出带样式的文字时使用的%c一声令下。更详实的通令参见官方API文书档案的其一表格。

要是还远远不够过瘾,那大家来log一些图片吧,以致。。。动图?
对,你得先有图,大家拿这张图为例。

JavaScript

console.log("%c", "padding:50px 300px;line-height:120px;backgroundnull:url('') no-repeat;");

1
console.log("%c", "padding:50px 300px;line-height:120px;backgroundnull:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");

图片 5

瞧着上边摇动的豆比兔是否有种抽它一脸的兴奋。

除此,console.table 更是一向以表格的款式将数据输出,不可能赞得太多!
借用在此之前写过的一篇博文里的例证:

JavaScript

var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}]; console.table(data);

1
2
var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];
console.table(data);

图片 6

另外,console.log() 接收不定参数,参数间用逗号分隔,最终会输出会将它们以空白字符连接。

JavaScript

console.log('%c你好','color:red;','小明','你知道小红被阿妈打了么');

1
console.log('%c你好','color:red;','小明','你知道小红被妈妈打了么');

图片 7

console.log

世家都会用log,但鲜有人很好地选择console.error , console.warn 等将出口到调整台的消息实行分类整理。
他们功用分别非常的小,意义在于将出口到调控台的信息实行分类,只怕说让它们更语义化。
各类所代表的语义如下:

  • console.log:普通音信
  • console.info:提醒类新闻
  • console.error:错误信息
  • console.warn:警示新闻

当合理使用上述log方法后,能够很有益地在调整台选拔查看特定类型的音信。

console.log('一颗红心向太阳','吼吼~');
console.info('楼上药不能停!');
console.warn('楼上嘴太贱!');
console.error('楼上关你毛事?');

图片 8

如果再合作console.group 与console.groupEnd,能够将这种分类处理的图谋发挥到极致。那契合于在支付一个圈圈相当大模块比很多很复杂的Web 应用程式时,将分头的log消息分组到以个别命名空间为名称的组里面。

console.group("app.foo");
console.log("来自foo模块的信息 blah blah blah...");
console.groupEnd();
console.group("app.bar");
console.log("来自bar模块的信息 blah blah blah...");
console.groupEnd();

图片 9

而关于console.log,早已被调侃坏了。一切都源于Chrome提供了如此二个API:第七个参数能够蕴含部分格式化的命令比如%c

比如给hello world 做件美貌的嫁衣再拉出去见人:

console.log('%chello world','font-size:25px;color:red;');

图片 10

要是你感到非常不够过瘾,这就把您能写出来的最高尚的CSS样式都利用上吗,例如渐变。于是你能够获取如下华丽丽的功用:

console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

图片 11

种种招大招的节拍啊~

望着地点密集的代码不用恐慌,上边console.log()其次个参数全皆以纯CSS用来决定样式的,你不会目生。而首先个参数里能够带用百分号开首的转义指令,如上边输出带样式的文字时使用的%c指令。更详尽的一声令下参见官方API文书档案的那几个表格。

一旦还非常不够过瘾,那大家来log一些图片吧,甚至。。。动图?
对,你得先有图,我们拿那张图为例。

console.log("%c", "padding:50px 300px;line-height:120px;backgroundnull:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");

图片 12

看着地点摇拽的豆比兔是或不是有种抽它一脸的冲动。

除此,console.table 更是向来以表格的款式将数据输出,无法赞得太多!
借用在此以前写过的一篇博文里的例证:

var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];
console.table(data);

图片 13

另外,console.log() 接收不定参数,参数间用逗号分隔,最终会输出会将它们以空白字符连接。

console.log('%c你好','color:red;','小明','你知道小红被妈妈打了么');

图片 14

console.assert

当你想代码满意某个原则时才输出音讯到调整台,那么您不须要写if如故莫斯利安表明式来达到目标,cosole.assert就是这么境况下一种很好的工具,它会先对传播的表明式举办预知,只有表明式为假时才输出相应音讯到调整台。

JavaScript

var isDebug=false; console.assert(isDebug,'开辟中的log音讯。。。');

1
2
var isDebug=false;
console.assert(isDebug,'开发中的log信息。。。');

图片 15

console.assert

当你想代码满意有些原则时才输出音信到调控台,那么你不需求写if照旧安慕希表明式来达到目标,cosole.assert正是如此情况下一种很好的工具,它会先对传播的表达式进行预知,唯有表明式为假时才输出相应新闻到调整台。

var isDebug=false;
console.assert(isDebug,'开发中的log信息。。。');

图片 16

console.count

除却标准输出的现象,还应该有大规模的气象是计数。
当您想总括某段代码实施了不怎么次时也没有供给自身去写相关逻辑,内置的console.count能够很地胜任那样的任务。

JavaScript

function foo(){ //别的函数逻辑blah blah。。。 console.count('foo 被实施的次数:'); } foo(); foo(); foo();

1
2
3
4
5
6
7
function foo(){
//其他函数逻辑blah blah。。。
console.count('foo 被执行的次数:');
}
foo();
foo();
foo();

图片 17

console.count

而外标准输出的场馆,还应该有广阔的场景是计数。
当您想总括某段代码实践了有一点次时也大可不必自个儿去写相关逻辑,内置的console.count能够很地胜任这样的职务。

function foo(){
 //其他函数逻辑blah blah。。。
 console.count('foo 被执行的次数:');
}
foo();
foo();
foo();

图片 18

console.dir

将DOM结点以JavaScript对象的款式出口到调控台
console.log是一贯将该DOM结点以DOM树的构造举行输出,与在要素调查时看到的布局是同样的。不相同的变现格局,同样的高雅,种种体位任君接纳反正便是福利与关爱。

JavaScript

console.dir(document.body); console.log(document.body);

1
2
console.dir(document.body);
console.log(document.body);

图片 19

console.dir

将DOM结点以JavaScript对象的款型出口到调节台
console.log是直接将该DOM结点以DOM树的结构举办输出,与在要素审核时见到的构造是同一的。区别的显示情势,同样的优雅,种种体位任君选择反正便是惠及与吝惜。

console.dir(document.body);
console.log(document.body);

图片 20

console.time & console.timeEnd

出口一些调节和测验音信是调整台最常用的效果与利益,当然,它的效果与利益远不仅于此。当做一些本性测验时,同样能够在此间很实惠地张开。
比如供给考虑衡量一段代码执行的耗费时间情状时,能够用console.time与 console.timeEnd来做那件事。

那边借用官方文书档案的事例:

JavaScript

console.time("Array initialize"); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.timeEnd("Array initialize");

1
2
3
4
5
6
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array initialize");

图片 21

当然,大家也足以挑选本身写代码来计时:

JavaScript

var start=new Date().getTime(); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.log(new Date().getTime()-start);

1
2
3
4
5
6
var start=new Date().getTime();
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.log(new Date().getTime()-start);

图片 22

深信您也看看了,用内置的console.time是何其地方便人民群众,省去了团结写代码来总计的职业量。别的值得一说的是,通过调用内置的console.time获得的结果要比自身手动总计的年月差矫正确可相信。

console.time & console.timeEnd

出口一些调节和测量检验音讯是调控台最常用的效力,当然,它的效果远不只有于此。当做一些特性测量试验时,同样可以在那边很便利地打开。
比方说须要勘探一段代码实行的耗费时间情形时,能够用console.time与 console.timeEnd来做那一件事。

此处借用官方文书档案的例子:

console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array initialize");

图片 23

当然,我们也得以选用自身写代码来计时:

var start=new Date().getTime();
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.log(new Date().getTime()-start);

图片 24

深信你也看到了,用内置的console.time是何等地方便人民群众,省去了投机写代码来测算的职业量。别的值得一说的是,通过调用内置的console.time猎取的结果要比本人手动计算的光阴差更加准确可信赖。

console.profile & console.timeLime

当想要查看CPU使用相关的音讯时,能够行使console.profile配合 console.profileEnd来成功那些供给。
这一作用能够透过UI分界面来成功,Chrome 开辟者工具里面有个tab就是Profile

与此类似的意义还只怕有console.timeLine配合 console.timeLineEnd,它的成效是始于记录一段时间轴,一样能够经过Chrome开辟者工具里的Timeline 标签来张开相应操作。

故而以作者之见那五个格局有个别鸡肋,因为都能够通过操作分界面来成功。但最少他提供了一种命令生势势的竞相,照旧多了种姿势供采取吧。

console.profile & console.timeLime

当想要查看CPU使用有关的音讯时,能够动用console.profile配合 console.profileEnd来产生这一个须要。
这一效率可以由此UI界面来造成,Chrome 开辟者工具里面有个tab就是Profile

与此类似的作用还也有console.timeLine配合 console.timeLineEnd,它的效果是从头记录一段时间轴,相同能够透过Chrome开辟者工具里的Timeline 标签来开展对应操作。

于是以小编之见那三个措施有个别鸡肋,因为都得以经过操作分界面来成功。但最少她提供了一种命令行格局的互相,照旧多了种姿势供选用吧。

console.trace

库房跟踪相关的调剂能够动用console.trace。那几个同样能够经过UI分界面实现。当代码被打断点后,能够在Call Stack面板中查阅相关货仓音信。

下边介绍的都以挂在window.console那一个指标上面包车型大巴办法,统称为Console API,接下去的这一个艺术得本地说应该叫命令,是Chrome内置提供,在控制台南动用的,他们统称为Command Line API。

console.trace

酒馆追踪相关的调整可以应用console.trace。这么些一样能够由此UI分界面完毕。当代码被打断点后,可以在Call Stack面板中查阅相关货仓音信。

地点介绍的都以挂在window.console这几个指标上边的方法,统称为Console API,接下去的这个办法得本地说应该叫命令,是Chrome内置提供,在调节新竹接纳的,他们统称为Command Line API。

$

犹如美刀总是被工程师及各个编程语言切磋所尊重「你看看PHP代码就清楚PHPer有多爱钱了」,在Chrome的决定台里,$用处还真是蛮多且便于的。
$_一声令下归来前段时间一次表明式实施的结果,成效跟按升高的方向键再回车是一律的,但它能够做为三个变量使用在您接下去的表达式中:

JavaScript

2+2//回车,再 $_+1//回车得5

1
2
2+2//回车,再
$_+1//回车得5

图片 25

上面的$_急需理解其奥义技术采用极度,而$0~$4则意味了近年5个你挑选过的DOM节点。
哪些意思?在页面右击采取审查元素,然后在弹出来的DOM结点树上面随意点选,这么些被点过的节点会被记录下来,而$0会回来近期三回点选的DOM结点,就那样类推,$1重临的是最棒次点选的DOM节点,最多保留了5个,假设远远不够5个,则赶回undefined
图片 26

其余值得一赞的是,Chrome 调控新竹原生辅助类jQuery的选拔器,也正是说你能够用$拉长熟练的css采取器来摘取DOM节点,多么滴熟识。

JavaScript

$('body')

1
$('body')

图片 27

$(selector)重临的是满意采用条件的第2个DOM成分。
剥去他伪善的伪装,其实$(selector)是原生JavaScript document.querySelector() 的封装。
还要另一个发令$$(selector)重回的是怀有满足选用条件的因素的二个聚焦,是对document.querySelectorAll() 的封装。

JavaScript

$$('div')

1
$$('div')

图片 28

$

就像是美刀总是被技士及各样编制程序语言所注重「你看看PHP代码就知晓PHPer有多爱钱了」,在Chrome的主宰台里,$用处还真是蛮多且便于的。
$_一声令下归来前段时间三遍表明式实行的结果,效能跟按进步的方向键再回车是同等的,但它能够做为一个变量使用在您接下去的表明式中:

2+2//回车,再
$_+1//回车得5

图片 29

上面的$_急需领会其奥义技艺应用方便,而$0~$4则表示了前段时间5个你挑选过的DOM节点。
怎么着意思?在页面右击选择审查元素,然后在弹出来的DOM结点树下面随意点选,这个被点过的节点会被记录下来,而$0会再次来到近期一遍点选的DOM结点,就这样类推,$1重回的是极品次点选的DOM节点,最多保留了5个,假若远远不足5个,则赶回undefined
图片 30

除此以外值得一赞的是,Chrome 调节桃园原生帮忙类jQuery的选用器,约等于说你能够用$增进熟谙的css接纳器来抉择DOM节点,多么滴熟习。

$('body')

图片 31

$(selector)重返的是知足接纳标准的第多个DOM成分。
剥去她伪善的外衣,其实$(selector)是原生JavaScript document.querySelector() 的封装。
同有时候另四个限令$$(selector)回来的是装有满足选取标准的要素的一个聚众,是对document.querySelectorAll() 的封装。

$$('div')

图片 32

copy

通过此命令能够将要调整台获取到的剧情复制到剪贴板。

JavaScript

copy(document.body)

1
copy(document.body)

下一场你就能够四处粘了:

图片 33

看完此条命令行,机智的你是否跟脑洞全开的自身同样,冒出了这么一个主见:那正是透过这一个命令能够在JavaScript里展开复制操作进而不用正视Flash插件了。
But现实是残忍的,如在此之前所述的,这里的主宰台命令只好在调控台南景况中推行,因为她反对附于任何全局变量举个例子window,所以其实在JS代码里是探问不了这么些copy方法的,所以从代码层面来调用复制作而成效也就无从聊起。但愿有天浏览器会提供相应的JS完毕啊~

copy

经过此命令能够就要调控台获取到的内容复制到剪贴板。

copy(document.body)

然后你就足以随处粘了:

图片 34

看完此条命令行,机智的您是否跟脑洞全开的本身同样,冒出了如此多少个想方设法:那正是因此那些命令能够在JavaScript里举办复制操作从而不用重视Flash插件了。
But现实是严酷的,如在此以前所述的,这里的支配台命令只能在调节桃园景况中实行,因为她反对附于任何全局变量比方window,所以实际上在JS代码里是访问不了这么些copy情势的,所以从代码层面来调用复制功用也就无从聊起。但愿有天浏览器会提供对应的JS实现呢~

keys & values

那是一对好朋友。后面一个再次来到传入对象具备属性名组成的数量,前面一个重回全数属性值组成的数组。具体请看上面包车型大巴例子:

JavaScript

var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'}; keys(tboy); values(tboy);

1
2
3
var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};
keys(tboy);
values(tboy);

图片 35

keys & values

那是一对基友。前面一个重返传入对象具备属性名组成的数据,后面一个重回全体属性值组成的数组。具体请看下边包车型地铁例证:

var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};
keys(tboy);
values(tboy);

图片 36

monitor & unmonitor

monitor(function),它接受一个函数名作为参数,比方function a,每次a被实行了,都会在调节台出口一条信息,里面满含了函数的称呼a及实行时所传颂的参数。

而unmonitor(function)便是用来终止这一监听。

JavaScript

function sayHello(name){ alert('hello,'+name); } monitor(sayHello); sayHello('wayou'); unmonitor(sayHello); sayHello('wayou');

1
2
3
4
5
6
7
function sayHello(name){
alert('hello,'+name);
}
monitor(sayHello);
sayHello('wayou');
unmonitor(sayHello);
sayHello('wayou');

图片 37

monitor & unmonitor

monitor(function),它接受二个函数名作为参数,比方function a,每次a被试行了,都会在支配台出口一条音信,里面含有了函数的称谓a及实行时所传诵的参数。

而unmonitor(function)正是用来终止这一监听。

function sayHello(name){
 alert('hello,'+name);
}
monitor(sayHello);
sayHello('wayou');
unmonitor(sayHello);
sayHello('wayou');

图片 38

debug & undebug

debug一样也是吸收接纳一个函数名作为参数。当该函数试行时自动断下来以供调节和测量试验,类似于在该函数的入口处打了个断点,能够经过debugger来做到,同不常间也足以经过在Chrome开辟者工具里找到呼应源码然后手动打断点。
undebug 则是祛除该断点。

而别的还有繁多命令则令人从未说的欲念,因为不少都足以透过Chrome开辟者工具的UI分界面来操作并且比用在支配台输入要方便。

debug & undebug

debug一样也是收取多少个函数名作为参数。当该函数施行时自动断下来以供调试,类似于在该函数的入口处打了个断点,能够因此debugger来做到,同一时间也足以由此在Chrome开采者工具里找到呼应源码然后手动打断点。
undebug 则是驱除该断点。

而别的还也可能有许多命令则令人从未说的私欲,因为相当多都足以通过Chrome开拓者工具的UI分界面来操作况兼比用在支配台输入要有利。

 

调控台不完全指南,chrome完全指南 本文转自 Chrome的开辟者工具已经庞大到没朋友的...

REFERENCE

  • Styled console logging in the Chrome DevTools (Canary)
  • Chrome Console API
  • Chrome Console Command Line API

    1 赞 9 收藏 1 评论

有关小编:刘哇勇

图片 39

放浪不急爱自由 个人主页 · 小编的小说 · 17 ·   

图片 40

本文由前端php发布,转载请注明来源:chrome完全指南,调节台不完全指南