当前位置:9992019银河国际 > 网络前端 > 未经小编许可,先简要介绍一下chrome的调节台

未经小编许可,先简要介绍一下chrome的调节台

文章作者:网络前端 上传时间:2019-10-22

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

图片 1

将DOM结点以JavaScript对象的款式出口到调节台,而console.log是一向将该DOM结点以DOM树的结构举行输出,与在要素核实时看见的组织是同大器晚成的。区别的变现格局,同样的高雅,种种体位任君选取反正正是福利与关心。

console.profile & console.timeLime

当想要查看CPU使用有关的新闻时,能够动用console.profile配合 console.profileEnd来完毕这一个须求。
那黄金时代功用能够因此UI分界面来完结,Chrome 开垦者工具里面有个tab就是Profile

与此类似的功能还也是有console.timeLine配合 console.timeLineEnd,它的效应是从头记录风姿罗曼蒂克段时间轴,一样能够经过Chrome开拓者工具里的Timeline 标签来张开相应操作。

故而在作者眼里这三个主意有个别鸡肋,因为都足以透过操作分界面来完结。但最少她提供了豆蔻梢头种命令行形式的互相,依旧多了种姿势供选拔吧。

$x("//p");
$x("//p[a]");

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

图片 2

输出一些调节和测验消息是调控台最常用的成效,当然,它的功效远不仅仅于此。当作一些性质测量检验时,同样能够在那处很平价地张开。举例需求考虑衡量大器晚成段代码实行的耗时景况时,能够用console.time与 console.timeEnd来做那件事。

console.assert

当你想代码满足有个别准则时才输出新闻到调节台,那么您不供给写if要么伊利表达式来落成指标,cosole.assert正是这么意况下风度翩翩种很好的工具,它会先对传播的表明式进行预感,独有表明式为假时才输出相应消息到调节台。

JavaScript

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

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

图片 3

$('body');
$$('div');

console.trace

库房追踪相关的调节和测验能够动用console.trace。那几个同样可以因而UI分界面实现。今世码被打断点后,能够在Call Stack面板中查占卜关仓库音讯。

位置介绍的都以挂在window.console这么些目的下边包车型客车办法,统称为Console API,接下去的那个格局得本地说应该叫命令,是Chrome内置提供,在调整新北动用的,他们统称为Command Line API。

诸如此比的操纵台音讯看上去就胸中有数了,就不用再为了找那是属于那风度翩翩行代码输出的再翻一回源码了。

Chrome 调控台不完全指南

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

本文笔者: 伯乐在线 - 刘哇勇 。未经作者许可,幸免转发!
招待加入伯乐在线 专辑小编。

Chrome的开荒者工具已经强盛到没对象的地步了,非常是其成效充足界面友好的console,使用方便能够犹如下作用:

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

图片 4

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

图片 5

瞅着这种“黑法力”是否有种坑分的感觉呢,其实还不仅仅哦!console.table能够让我们输出表格,示例:

copy

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

JavaScript

copy(document.body)

1
copy(document.body)

然后您就足以随地粘了:

图片 6

看完此条命令行,机智的您是还是不是跟脑洞全开的自己相同,冒出了这么三个主见:那就是透过那几个命令可以在JavaScript里进行理并答复制操作进而不用信任Flash插件了。
But现实是残忍的,如从前所述的,这里的主宰台命令只可以在调节高雄情状中实践,因为她不认为然附于任何全局变量譬喻window,所以其实在JS代码里是拜望不了这么些copy方法的,所以从代码层面来调用复制作用也就无从谈到。但愿有天浏览器会提供对应的JS完结呢~

假若你是一人开荒者,笔者想console.log鲜明是平时使用的了,我们器重看看console.log的多少个小朋友:

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('楼上关你毛事?');

图片 7

倘若再同盟console.group 与console.groupEnd,能够将这种分类管理的思维发挥到极致。那符合于在支付三个局面相当大模块非常多很复杂的Web APP时,将各自的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();

图片 8

而关于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;');

图片 9

假诺您感到缺乏过瘾,那就把您能写出来的最华丽的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;');

图片 10

种种招大招的旋律啊~

瞧着上面密集的代码不用惊惧,上面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;");

图片 11

看着地点挥舞的豆比兔是还是不是有种抽它风起云涌脸的扼腕。

除此,console.table 更是直接以表格的款式将数据输出,不能够赞得太多!
借用以前写过的风姿罗曼蒂克篇博文里的例子:

JavaScript

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

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

图片 12

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

JavaScript

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

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

图片 13

前言

debug & undebug

debug同样也是抽取三个函数名作为参数。当该函数试行时自动断下来以供调试,类似于在该函数的入口处打了个断点,能够经过debugger来做到,同一时候也能够透过在Chrome开垦者工具里找到相应源码然后手动打断点。
undebug 则是破除该断点。

而任何还应该有多数命令则令人尚未说的欲望,因为繁多都得以透过Chrome开垦者工具的UI分界面来操作何况比用在支配台输入要低价。

图片 14

至于我:刘哇勇

图片 15

放浪不急爱自由 个人主页 · 笔者的文章 · 17 ·   

图片 16

那是大器晚成对亲密的朋友。前者重回传入对象具有属性名组成的多少,后面一个再次回到全体属性值组成的数组。具体请看上边的例子:

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

图片 17

自然,我们也得以接受自个儿写代码来计时:

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

图片 18

深信您也见到了,用内置的console.time是多么地惠及,省去了谐和写代码来测算的工作量。别的值得豆蔻梢头提的是,通过调用内置的console.time获得的结果要比自个儿手动总计的时光差更可信可信赖。

图片 19

REFERENCE

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

    1 赞 9 收藏 1 评论

下一场您就足以Ctrl+v了。

$

犹如美刀总是被技士及各类编制程序语言研讨所酷爱「你看看PHP代码就明白PHPer有多爱钱了」,在Chrome的操纵台里,$用处还真是蛮多且便于的。
$_指令归来近些日子一遍表明式施行的结果,功效跟按升高的方向键再回车是均等的,但它能够做为二个变量使用在你接下去的表达式中:

JavaScript

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

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

图片 20

上面的$_内需精通其奥义才干利用十分,而$0~$4则意味了近日5个你挑选过的DOM节点。
哪些意思?在页面右击选取审查元素,然后在弹出来的DOM结点树上面随便点选,那个被点过的节点会被记录下来,而$0会重临近期二遍点选的DOM结点,就那样推算,$1重返的是最好次点选的DOM节点,最多保留了5个,假设缺乏5个,则赶回undefined
图片 21

别的值得神采飞扬赞的是,Chrome 调控新北原生协理类jQuery的选取器,也便是说你能够用$加上纯熟的css接受器来采撷DOM节点,多么滴熟谙。

JavaScript

$('body')

1
$('body')

图片 22

$(selector)再次来到的是满意选取条件的第多个DOM成分。
剥去他伪善的门面,其实$(selector)是原生JavaScript document.querySelector() 的封装。
还要另多个限令$$(selector)回去的是富有满意选拔标准的元素的二个聚焦,是对document.querySelectorAll() 的封装。

JavaScript

$$('div')

1
$$('div')

图片 23

讲真,美利坚合众国技术员们真正很爱怜money啊(何人又不是啊),看看PHP就知晓了,满屏的$。而在Chrome的决定台里,$用处一样是蛮多且方便的。

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

图片 24

图片 25

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

$x(path)

将所相配的节点放在三个数组里重返

3.console.error ('错误消息')

$x("//p")相称全部的p节点,$x("//p[a]");相配全体子节点包涵a的p节点

copy(document.body)

monitor & unmonitor

console.clear();清中央空调控台,这么些相应和console.log名气同样高吗。

图片 26

console.assert

上面的$_内需精通其奥义技术应用方便,而$0~$4则意味了近期5个你挑选过的DOM节点。

图片 27

当你想代码满足某个原则时才输出新闻到调控台,那么您完全没供给写if或许安慕希表明式来达到指标,cosole.assert就是那般情状下风流浪漫种很好的工具,它会先对传播的表达式进行预感,独有表达式为假时才输出相应音讯到调节台。

别的值得后生可畏赞的是,Chrome 调整高雄原生帮助类jQuery的选拔器,约等于说你能够用$加上熟悉的css接受器来挑选DOM节点,多么滴熟稔。

[图表上传中。。。(15)]

先简介一下chrome的调节台,展开chrome浏览器,按f12就足以轻易的开采调节台

一些时候后端传回到第一次全国代表大会串数据,是否认为直接console.log或是通过抓包工具查看都会令人蒙头转向呢,今年正事console.table发挥功效的时候了,以表格的花样展现数据,自然了然于胸。

console.table

keys & values

1.console.log ('普通信息')

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

Chrome 调控台不完全指南 – 刘哇勇

console.group("app.bundle");
console.log("来自bundle模块的音信1");console.log("来自bundle模块的消息2");
console.groupEnd();

当您想计算某段代码实施了有一点次时也大可不必自个儿去写相关逻辑,内置的console.count能够很地胜任那样的职分.

图片 28

[图片上传中。。。(13)]

除去标准输出的风貌,还应该有广阔的场馆是计数。

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

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

假设再同盟console.group 与console.groupEnd,能够将这种分类管理的构思发挥到极致。这切合于在支付叁个圈圈一点都不小模块相当多很复杂的Web 应用程式时,将分其余log新闻分组到以独家命名空间为名称的组里面。

console.dir

console.count

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

剥去她伪善的门面,其实$(selector)是原生JavaScript document.querySelector() 的包装。
同一时候另二个指令$$(selector)重临的是有着满意选拔标准的要素的三个集中,是对document.querySelectorAll() 的包裹。

Console API文档;

4.console.warn ('警告信息')

[图表上传中。。。(16)]

图片 29

[图形上传中。。。(14)]

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

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

图片 30

图片 31

世家都会用log,但很稀少人能够很好地动用console.error,console.warn 等将出口到调控台的音信举行分类整理。他们作用界别十分的小,意义在于将出口到调整台的音信进行分类,只怕说让它们更语义化。

debug & undebug

Chrome浏览器作者想是每一个前端er必用工具之蒸蒸日上吧,风流浪漫部分缘由是它速度快,体量极小,匡助的新特色也比其余浏览器多,还会有局部自家想就是因为它的调整台成效强大了啊,说它是神器一点也可是分,很有益。但实则过多开拓者并从未用出调控台的精粹,只是使用简易的console.log();其实调节台功效远远不仅如此简单哦。

哪些意思吧?在页面右击选取核实成分,然后在弹出来的DOM结点树上面随意点选,这几个被点过的节点会被记录下来,而$0会回到最近二次点选的DOM结点,就那样推算,$1重返的是精品次点选的DOM节点,最多保留了5个,假诺非常不足5个,则重临undefined。

Commond API;

console.log家族

debug同样也是接到一个函数名作为参数。当该函数试行时自动断下来以供调节和测量检验,类似于在该函数的入口处打了个断点,能够经过debugger来做到,同期也足以透过在Chrome开采者工具里找到相应源码然后手动打断点。而undebug 则是清除该断点。而别的还有比非常多命令则令人从未说的欲念,因为不菲都足以经过Chrome开拓者工具的UI分界面来操作何况比用在决定台输入要有利。

$(selector)重返的是满足选用标准的首个DOM成分。

monitor(function),它选择二个函数名作为参数,比方function a,每趟a被推行了,都会在决定台出口一条音讯,里面包含了函数的名称a及推行时所盛传的参数。而unmonitor(function)就是用来终止这一监听。

console.group("app.bundle");
console.warn("来自bundle模块的警示音信1");console.warn("来自bundle模块的告诫新闻2");
console.groupEnd();

copy

当想要查看CPU使用相关的消息时,能够行使console.profile合营console.profileEnd来完结这些需要。
那意气风发效应能够通过UI分界面来成功,Chrome 开拓者工具里面有个tab就是Profile。使用方法和console.time基本雷同,其实time开拓者工具里也是有个tab正是timeline。关于console.prefile博主就不做多余的介绍了。想要做越多驾驭的读者能够看这里。

留意:他反对附于任何全局变量比如window,所以实际上在JS代码里是访谈不了这一个copy方法的,所以从代码层面来调用复制功能也就无从聊起。但愿有天浏览器会提供对应的JS完毕呢~那样我们就足以因而js代码举行理并答复制操作而不用再重视Flash插件了。

[图表上传中。。。(12)]

自然,图片也是能够的,读者能够自动尝试,修改上述代码就可以。

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

console.clear

$

console.time & console.timeEnd

图片 32

2.console.info ('提醒性消息')

别的,console.log家族还给大家提供了一个的API:第一个参数能够带一些格式化指令,举例%c,n;看下边那几个炫彩的作用:

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

参考

本文由9992019银河国际发布于网络前端,转载请注明出处:未经小编许可,先简要介绍一下chrome的调节台

关键词: