调节台不完全指南,调控台如何运用

Chrome 调节台不完全指南

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

本文我: 伯乐在线 –
刘哇勇
。未经作者许可,制止转载!
接待参预伯乐在线 专辑审核人。

Chrome的开荒者工具已经强盛到没对象的程度了,非常是其职能丰盛分界面友好的console,使用十一分能够就像是下功用:

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

前言

Chrome 控制台console的用法

2015/01/12 · JavaScript
· Chrome

初稿出处:
ctriphire   

世家都有用过各系列型的浏览器,各个浏览器都有和谐的特点,本身拙见,在自己用过的浏览器当中,作者是最爱怜Chrome的,因为它对于调节和测量试验脚本及前端设计调节和测验都有它比任何浏览器纠枉过正的地点。恐怕大家对console.log会有自然的问询,心里难免会想调节和测量试验的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来代替alert输出音信吗,下边作者就介绍一些调和的入门技能,让您喜欢上console.log

先的粗略介绍一下chrome的调整台,张开chrome浏览器,按f12就足以轻便的展开调整台

皇家赌场手机版 1

世家能够见见调整台里面有黄金时代首诗还也可以有任何新闻,假诺想清空气调节器控台,能够点击左上角那些皇家赌场手机版 2来清空,当然也足以通过在支配台输入console.clear()来贯彻清中央空调整台新闻。如下图所示

皇家赌场手机版 3

明天风度翩翩旦三个风貌,倘若叁个数组里面有不菲的要素,不过你想理解种种成分具体的值,那时思考如果您用alert那将是多惨的意气风发件职业,因为alert阻断线程运转,你不点击alert框的显明开关下二个alert就不会冒出。

下边我们用console.log来替换,体会一下它的魔力。

皇家赌场手机版 4

看了地点那张图,是还是不是认识到log的刚劲之处了,上面大家来探视console里面具体提供了什么样措施能够供咱们一直调试时使用。

皇家赌场手机版 5

现阶段调整台方法和品质有:

JavaScript

["$$", "$x", "dir", "dirxml",
"keys", "values", "profile",
"profileEnd", "monitorEvents",
"unmonitorEvents", "inspect", "copy",
"clear", "getEventListeners", "undebug",
"monitor", "unmonitor", "table",
"$0", "$1", "$2", "$3",
"$4", "$_"]

1
["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

下边大家来挨门挨户介绍一下相继艺术主要的用场。

平日意况下我们用来输入新闻的情势主假使用到如下八个

1、console.log 用于出口普通消息

2、console.info 用于出口提醒性音信

3、console.error用以出口错误音信

4、console.warn用于出口警报消息

5、console.debug调节台不完全指南,调控台如何运用。用以出口调节和测量检验音信

用图来发话

皇家赌场手机版 6

console对象的上边5种方式,都足以接纳printf风格的占位符。不过,占位符的品种相当少,只扶助字符(%s卡塔尔、整数(%d或%i卡塔 尔(阿拉伯语:قطر‎、浮点数(%f卡塔尔国和指标(%o卡塔尔各类

JavaScript

console.log(“%d年%d月%d日”,2012,3,26);
console.log(“圆周率是%f”,3.1415926);

1
2
console.log("%d年%d月%d日",2011,3,26);
console.log("圆周率是%f",3.1415926);

皇家赌场手机版 7

%o占位符,能够用来查阅一个对象内部景色

JavaScript

var dog = {}; dog.name = “大毛”; dog.color = “黄色”; console.log(“%o”,
dog);

1
2
3
4
var dog = {};
dog.name = "大毛";
dog.color = "黄色";
console.log("%o", dog);

皇家赌场手机版 8

6、console.dirxml用来展示网页的某部节点(node卡塔 尔(英语:State of Qatar)所包括的html/xml代码**

JavaScript

<body> <table id=”mytable”> <tr>
<td>A</td> <td>A</td> <td>A</td>
</tr> <tr> <td>bbb</td> <td>aaa</td>
<td>ccc</td> </tr> <tr> <td>111</td>
<td>333</td> <td>222</td> </tr>
</table> </body> <script type=”text/javascript”>
window.onload = function () { var mytable =
document.getElementById(‘mytable’); console.dirxml(mytable); }
</script>

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
<body>
    <table id="mytable">
        <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>aaa</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>111</td>
            <td>333</td>
            <td>222</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    window.onload = function () {
        var mytable = document.getElementById(‘mytable’);
        console.dirxml(mytable);
    }
</script>

皇家赌场手机版 9

7、console.group输出意气风发组音信的启幕

8、console.groupEnd得了黄金年代组输出新闻

看你须求选用差别的出口方法来利用,即便上述七个章程再同盟group和groupEnd方法来一块使用就足以输入琳琅满指标不一样式样的输出音讯。

皇家赌场手机版 10

嘿嘿,是还是不是感觉很美丽妙啊!

9、console.assert对输入的表明式进行预知,独有表明式为false时,才输出相应的音讯到调整台

皇家赌场手机版 11

10、console.count(那么些格局足够实用哦卡塔 尔(阿拉伯语:قطر‎当您想总结代码被推行的次数

皇家赌场手机版 12

11、console.dir(这个点子是自个儿平日使用的 可不知道比for
in方便了某个) 直接将该DOM结点以DOM树的构造举行输出,能够详细核对象的措施进步档等

皇家赌场手机版 13

12、console.time 计时开首

13、console.timeEnd  计时截至(看了上边的图你弹指间就心拿到它的厉害了卡塔 尔(阿拉伯语:قطر‎

皇家赌场手机版 14

14、console.profileconsole.profileEnd合营协同利用来查阅CPU使用相关音讯

皇家赌场手机版 15

在Profiles面板里面查看就足以看见cpu相关应用消息

皇家赌场手机版 16

15、console.timeLine调节台不完全指南,调控台如何运用。和console.timeLineEnd拾叁分合营记录意气风发段时间轴

16、console.trace  仓库追踪相关的调节和测量试验

上述格局只是本人个人理解罢了。如若想查看具体API,能够上合法看看,具体地址为:

 

上面介绍一下调控台的有个别急忙键

1、方向键盘的上下键,我们意气风发用就领悟。比方用上键就相当于选拔上次在调整台的输入符号

2、$_指令归来近些日子叁遍表明式试行的结果,功能跟按进步的方向键再回车是相像的

皇家赌场手机版 17

上面的$_要求驾驭其奥义才具选取格外,而$0~$4则代表了近年来5个你采用过的DOM节点。

何以看头?在页面右击选用审查元素,然后在弹出来的DOM结点树下面随意点选,这一个被点过的节点会被记录下来,而$0会回来近来叁回点选的DOM结点,由此及彼,$1再次回到的是最棒次点选的DOM节点,最多保留了5个,假如远远不足5个,则赶回undefined

皇家赌场手机版 18

3、Chrome
调节高雄原生扶持类jQuery的选取器
,也正是说你能够用$增多领会的css选取器来采撷DOM节点

皇家赌场手机版 19

4、copy透过此命令能够将要调节台获取到的故事情节复制到剪贴板

皇家赌场手机版 20

(哈哈 刚刚从调节台复制的body里面包车型地铁html能够无约束粘贴到哪 举例记事本
 是或不是以为作用很强盛卡塔 尔(英语:State of Qatar)

5、keys和values 前面一个再次来到传入对象具有属性名组成的多寡,前面一个再次回到全体属性值组成的数组

皇家赌场手机版 21

谈起那,不免想起console.table方法了

皇家赌场手机版 22

 

 

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

皇家赌场手机版 23

如果再同盟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();

皇家赌场手机版 24

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

皇家赌场手机版 25

万大器晚成你以为非常不足过瘾,那就把您能写出来的最华丽的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;’);

皇家赌场手机版 26

各样招大招的节拍啊~

看着地点密集的代码不用焦灼,下边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;");

皇家赌场手机版 27

望着上边摇动的豆比兔是或不是有种抽它一脸的激动。

除此,console.table 更是直接以表格的样式将数据输出,不可能赞得太多!
借用早先写过的生机勃勃篇博文里的事例:

JavaScript

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

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

皇家赌场手机版 28

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

JavaScript

console.log(‘%c你好’,’color:red;’,’小明’,’你了解小红被老妈打了么’);

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

皇家赌场手机版 29

Chrome浏览器作者想是每三个前端er必用工具之后生可畏吧,意气风发部分原因是它速度快,体量比一点都不大,援救的新性情也比其它浏览器多,还大概有一点我想就是因为它的调节台功效强大了吗,说它是神器一点也但是分,很有益。但实质上过多开荒者并从未用出调节台的精华,只是接收简便的console.log();其实调节台功效远远不仅这么轻松哦。

6、monitor & unmonitor

monitor(function),它接收三个函数名作为参数,比如function a,每次a被试行了,都会在调控台出口一条消息,里面包含了函数的称号a及进行时所传颂的参数。

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

皇家赌场手机版 30

看了这张图,应该清楚了,也正是说在monitor和unmonitor中间的代码,推行的时候会在调节台出口一条音信,里面包蕴了函数的称呼a及实践时所盛传的参数。当裁撤监视(也正是实践unmonitor时卡塔 尔(英语:State of Qatar)就不再在支配台出口音信了。

JavaScript

$ // 轻易精晓便是 document.querySelector 而已。 $$ // 老妪能解就是document.querySelectorAll 而已。 $_ // 是上三个表明式的值 $0-$4 //
是近期5个Elements面板选中的DOM成分,待会会讲。 dir // 其实正是console.dir keys // 取对象的键名, 重临键名组成的数组 values //
去对象的值, 重返值组成的数组

1
2
3
4
5
6
7
$ // 简单理解就是 document.querySelector 而已。
$$ // 简单理解就是 document.querySelectorAll 而已。
$_ // 是上一个表达式的值
$0-$4 // 是最近5个Elements面板选中的DOM元素,待会会讲。
dir // 其实就是 console.dir
keys // 取对象的键名, 返回键名组成的数组
values // 去对象的值, 返回值组成的数组

 

下边看一下console.log的片段技巧

1、重写console.log 改换输出文字的体裁

皇家赌场手机版 31

2、利用调整台出口图片

皇家赌场手机版 32

3、钦赐输出文字的体制

皇家赌场手机版 33

最后说一下chrome调整台叁个轻便易行的操作,怎么着查看页面成分,看下图就明白了

皇家赌场手机版 34

您在支配台轻易操作二回就明白了,是或不是以为很简短!

赞 6 收藏
评论

皇家赌场手机版 35

console.assert

当您想代码满足某个标按期才输出信息到调控台,那么你不必要写if要么安慕希表明式来完结指标,cosole.assert正是那般场景下生龙活虎种很好的工具,它会先对传播的表明式进行预感,唯有表明式为假时才输出相应新闻到调整台。

JavaScript

var isDebug=false; console.assert(isDebug,’开荒中的log新闻。。。’);

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

皇家赌场手机版 36

console.clear

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

皇家赌场手机版 37

console.clear();清中央空调整台,那个理应和console.log人气同样高呢。

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

皇家赌场手机版 38

console.log家族

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

皇家赌场手机版 39

自然,大家也得以选用自个儿写代码来计时:

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

皇家赌场手机版 40

相信您也见到了,用内置的console.time是何等地点便,省去了温馨写代码来测算的职业量。其余值得后生可畏提的是,通过调用内置的console.time赢得的结果要比本身手动计算的日子差更确切可信赖。

先简介一下chrome的调节台,张开chrome浏览器,按f12就可以轻易的开拓调整台

console.profile & console.timeLime

当想要查看CPU使用相关的新闻时,能够利用console.profile配合 console.profileEnd来产生这些需求。
那生机勃勃功力能够由此UI分界面来完成,Chrome
开荒者工具里面有个tab便是Profile

与此肖似的成效还应该有console.timeLine配合 console.timeLineEnd,它的功效是初步记录意气风发段时间轴,相似能够由此Chrome开拓者工具里的Timeline 标签来進展相应操作。

之所以以作者之见那七个章程有个别鸡肋,因为都足以透过操作分界面来完毕。但最少他提供了生机勃勃种命令行形式的相互影响,依然多了种姿势供接受吧。

皇家赌场手机版 41

console.trace

库房跟踪相关的调试能够运用console.trace。这么些相仿能够由此UI分界面完结。现代码被打断点后,能够在Call Stack面板中查阅相关仓库新闻。

上边介绍的都以挂在window.console本条指标下边包车型地铁主意,统称为Console
API,接下去的这个点子得本地说应该叫命令,是Chrome内置提供,在调控桃园运用的,他们统称为Command
Line API。

风流罗曼蒂克旦你是一个人开拓者,作者想console.log分明是断断续续应用的了,大家第生机勃勃看看console.log的多少个小家伙:

$

犹如美刀总是被程序猿及各样编程语言研讨所器重「你看看PHP代码就理解PHPer有多爱钱了」,在Chrome的垄断台里,$用场还真是蛮多且便于的。
$_一声令下归来最近二次表达式施行的结果,作用跟按进步的方向键再回车是平等的,但它能够做为八个变量使用在你接下去的表明式中:

JavaScript

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

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

皇家赌场手机版 42

上面的$_亟需精晓其奥义工夫采用十分,而$0~$4则意味着了近年5个你筛选过的DOM节点。
如何意思?在页面右击选拔审查元素,然后在弹出来的DOM结点树上边随意点选,那么些被点过的节点会被记录下来,而$0会回去这几天叁遍点选的DOM结点,由此及彼,$1再次来到的是超级次点选的DOM节点,最多保留了5个,假设缺乏5个,则赶回undefined
皇家赌场手机版 43

除此以外值得后生可畏赞的是,Chrome
调节新竹原生辅助类jQuery的选拔器,也正是说你可以用$增加驾驭的css选用器来选拔DOM节点,多么滴纯熟。

JavaScript

$(‘body’)

1
$(‘body’)

皇家赌场手机版 44

$(selector)重临的是满意采用规范的第一个DOM成分。
剥去他伪善的外衣,其实$(selector)是原生JavaScript document.querySelector() 的封装。
再就是另多少个限令$$(selector)回来的是具备知足接受标准的因素的贰个会见,是对document.querySelectorAll() 的封装。

JavaScript

$$(‘div’)

1
$$(‘div’)

皇家赌场手机版 45

1.console.log (‘普通消息’)

copy

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

JavaScript

copy(document.body)

1
copy(document.body)

下一场您就足以随处粘了:

皇家赌场手机版 46

看完此条命令行,机智的您是否跟脑洞全开的自个儿相通,冒出了那般叁个设法:那正是因此那个命令能够在JavaScript里开展复制操作进而不用注重Flash插件了。
But现实是粗暴的,如从前所述的,这里的操纵台命令只可以在调控新北情状中施行,因为他反对附于任何全局变量比方window,所以其实在JS代码里是寻访不了这一个copy办法的,所以从代码层面来调用复制作用也就无从聊到。但愿有天浏览器会提供相应的JS完结吗~

2.console.info (‘提醒性消息’)

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

皇家赌场手机版 47

3.console.error (‘错误新闻’)

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

皇家赌场手机版 48

4.console.warn (‘警报消息’)

debug & undebug

debug同样也是收取多个函数名作为参数。当该函数实行时自动断下来以供调节和测试,相同于在该函数的入口处打了个断点,能够经过debugger来做到,同临时候也能够透过在Chrome开垦者工具里找到相应源码然后手动打断点。
undebug 则是肃清该断点。

而其余还会有众多命令则令人尚未说的欲望,因为许多都能够通过Chrome开荒者工具的UI分界面来操作况且比用在调控台输入要有利。

皇家赌场手机版 49

REFERENCE

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

    1 赞 9 收藏 1
    评论

大家都会用log,但很罕有人能够很好地运用console.error,console.warn
等将出口到调控台的新闻进行分类收拾。他们效率界别非常小,意义在于将出口到调控台的音讯实行分类,可能说让它们更语义化。

关于我:刘哇勇

皇家赌场手机版 50

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

皇家赌场手机版 51

只要再协作console.group
与console.groupEnd,能够将这种分类管理的思量发挥到十二万分。那相符于在支付一个范围超级大模块比很多很复杂的Web
应用程式时,将独家的log音讯分组到以独家命名空间为名称的组里面。

console.group(“app.bundle”);
console.warn(“来自bundle模块的警示消息1”);console.warn(“来自bundle模块的告诫消息2”);
console.groupEnd();

console.group(“app.bundle”);
console.log(“来自bundle模块的新闻1”);console.log(“来自bundle模块的音信2”);
console.groupEnd();

皇家赌场手机版 52

如此这般的支配台音讯看上去就一清二楚了,就无须再为了找那是归属那一行代码输出的再翻贰次源码了。

其它,console.log宗族还给大家提供了五个的API:第二个参数能够带一些格式化指令,举例%c,n;看上面那个炫酷的法力:

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

皇家赌场手机版 53

本来,图片也是能够的,读者能够自行尝试,改进上述代码就可以。

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

皇家赌场手机版 54

console.table

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

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

皇家赌场手机版 55

一些时候后端传回到第一次全国代表大会串数据,是否认为直接console.log或是通过抓包工具查看都会令人昏头昏脑呢,当时正事console.table发挥功用的时候了,以表格的花样突显数据,自然一览无余。

console.assert

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

当您想代码满意某个原则时才输出消息到调节台,那么你大可不必写if大概莫斯利安表明式来完毕指标,cosole.assert便是如此意况下生龙活虎种很好的工具,它会先对传播的表达式实行预见,独有表达式为假时才输出相应新闻到控制台。

皇家赌场手机版 56

console.count

除了规范输出的情景,还只怕有广阔的情景是计数。

当您想计算某段代码试行了不怎么次时也大可不必本人去写相关逻辑,内置的console.count能够很地胜任那样的任务.

皇家赌场手机版 57

console.dir

将DOM结点以JavaScript对象的花样出口到调控台,而console.log是一直将该DOM结点以DOM树的组织举办输出,与在要素核实时观看的布局是同样的。差别的显现格局,一样的文雅,各样体位任君接受反正正是福利与关爱。

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

皇家赌场手机版 58

皇家赌场手机版,console.time & console.timeEnd

出口一些调节和测量试验消息是调控台最常用的机能,当然,它的效率远不独有于此。充任一些性质测量检验时,同样能够在此很有益地展开。比方需求勘察意气风发段代码实行的耗费时间意况时,能够用console.time与
console.timeEnd来做那一件事。

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

皇家赌场手机版 59

当想要查看CPU使用相关的新闻时,能够应用console.profile协作console.profileEnd来达成这一个需要。
那风姿洒脱功效能够由此UI分界面来成功,Chrome
开采者工具里面有个tab就是Profile。使用格局和console.time基本均等,其实time开采者工具里也会有个tab正是timeline。关于console.prefile博主就不做多余的牵线了。想要做愈来愈多通晓的读者能够看这里。

$

讲真,美利哥技士们真的很欢悦money啊(什么人又不是啊卡塔 尔(英语:State of Qatar),看看PHP就知道了,满屏的$。而在Chrome的主宰台里,$用途相近是蛮多且便于的。

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

上面的$_要求理解其奥义技能使用方便,而$0~$4则意味着了前天5个你筛选过的DOM节点。

怎么看头啊?在页面右击选拔检查核对成分,然后在弹出来的DOM结点树上边随意点选,这一个被点过的节点会被记录下来,而$0会再次回到方今一回点选的DOM结点,就那样类推,$1再次回到的是精品次点选的DOM节点,最多保留了5个,如若非常不足5个,则再次来到undefined。

皇家赌场手机版 60

别的值得风流倜傥赞的是,Chrome
调控台南原生帮助类jQuery的选拔器,约等于说你能够用$加上谙习的css选用器来接收DOM节点,多么滴领悟。

$(‘body’);
$$(‘div’);

[图表上传中。。。(12卡塔尔国]

$(selector)重返的是满足采取标准的第二个DOM成分。

剥去他伪善的外衣,其实$(selector)是原生JavaScript
document.querySelector() 的包装。
并且另二个指令$$(selector)再次回到的是富有满意选用标准的因素的一个会合,是对document.querySelectorAll()
的包装。

$x(path)

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

$x(“//p”);
$x(“//p[a]”);

[图形上传中。。。(13卡塔尔]

$x(“//p”)相配全部的p节点,$x(“//p[a]”);相配全部子节点包罗a的p节点

copy

copy(document.body)

然后您就足以Ctrl+v了。

只顾:他批驳附于任何全局变量举个例子window,所以实际在JS代码里是拜望不了那些copy方法的,所以从代码层面来调用复制作用也就无从聊起。但愿有天浏览器会提供对应的JS达成呢~那样大家就足以由此js代码进行复制操作而不用再正视Flash插件了。

keys & values

那是生机勃勃对老铁。前面叁个重返传入对象具备属性名组成的多寡,前者重返全数属性值组成的数组。具体请看上边的事例:

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

[图表上传中。。。(14卡塔尔国]

monitor & unmonitor

monitor(function),它接收多个函数名作为参数,比方function
a,每一趟a被推行了,都会在支配台出口一条音信,里面含有了函数的名称a及推行时所传诵的参数。而unmonitor(function)正是用来终止这一监听。

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

[图表上传中。。。(15卡塔 尔(阿拉伯语:قطر‎]

debug & undebug

debug同样也是收取一个函数名作为参数。当该函数施行时自动断下来以供调试,形似于在该函数的入口处打了个断点,能够经过debugger来做到,同时也能够透过在Chrome开辟者工具里找到呼应源码然后手动打断点。而undebug
则是割除该断点。而别的还大概有众多命令则令人尚未说的欲望,因为大多都能够经过Chrome开荒者工具的UI分界面来操作并且比用在决定台输入要惠及。

[图形上传中。。。(16卡塔尔国]

参考

Console API文档;

Commond API;

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

Leave a Comment.