令你爱上console.log

Chrome 控制台console的用法

2015/01/12 · JavaScript · Chrome

原来的小讲出处: ctriphire   

大家都有用过各类别型的浏览器,每一个浏览器都有和好的特色,本身拙见,在自家用过的浏览器个中,作者是最欣赏Chrome的,因为它对于调节和测验脚本及前端设计调节和测量检验都有它比别的浏览器有过之而无不比的地点。或许大家对console.log会有一定的询问,心里难免会想调节和测量检验的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来代替alert输出音讯吗,上边笔者就介绍一些调度的入门才干,令你爱上console.log

先的总结介绍一下chrome的调节台,打开chrome浏览器,按f12就足以轻易的开采调控台

2138acom太阳集团app 1

世家能够见到调整台里面有一首诗还大概有另外新闻,假如想清中央空调整台,能够点击左上角那些2138acom太阳集团app 2来清空,当然也能够透过在决定台输入console.clear()来达成清空控制台音信。如下图所示

2138acom太阳集团app 3

当今一旦一个境况,假设一个数组里面有这一个的要素,可是你想清楚各种成分具体的值,那时候想想如若您用alert那将是多惨的一件职业,因为alert阻断线程运营,你不点击alert框的分明开关下一个alert就不会油但是生。

上边大家用console.log来替换,感受一下它的魔力。

2138acom太阳集团app 4

看了上边那张图,是或不是认识到log的雄强之处了,上面大家来探视console里面具体提供了何等措施能够供大家平昔调节和测量试验时行使。

2138acom太阳集团app 5

当下调控台方法和属性有:

JavaScript

[2138acom太阳集团app,"$$", "$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用来出口调节和测验新闻

用图来说话

2138acom太阳集团app 6

console对象的方面5种办法,都能够动用printf风格的占位符。但是,占位符的连串比少之又少,只援助字符(%s)、整数(%d或%i)、浮点数(%f)和目的(%o)种种

JavaScript

console.log("%d年%d月%d日",二〇一三,3,26); console.log("圆周率是%f",3.1415926);

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

2138acom太阳集团app 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);

2138acom太阳集团app 8

6、console.dirxml用来体现网页的某些节点(node)所饱含的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>

2138acom太阳集团app 9

7、console.group输出一组消息的始发

8、console.groupEnd告竣一组输出新闻

看你要求采纳差别的出口方法来选取,尽管上述多个方法再合作group和groupEnd方法来一齐利用就足以输入有滋有味的不等款式的输出音信。

2138acom太阳集团app 10

哈哈哈,是还是不是认为很奇妙啊!

9、console.assert对输入的表明式进行预见,只有表达式为false时,才输出相应的新闻到调控台

2138acom太阳集团app 11

10、console.count(这么些措施充足实用哦)当您想总括代码被试行的次数

2138acom太阳集团app 12

11、console.dir(那么些法子是自家日常利用的 可不知道比for in方便了稍稍) 直接将该DOM结点以DOM树的布局进行输出,可以详细查对象的点子升高档等

2138acom太阳集团app 13

12、console.time 计时始发

13、console.timeEnd  计时停止(看了上边包车型大巴图你须臾间就感受到它的立意了)

2138acom太阳集团app 14

14、console.profileconsole.profileEnd卓越协同行使来查看CPU使用相关音信

2138acom太阳集团app 15

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

2138acom太阳集团app 16

15、console.timeLineconsole.timeLineEnd特别协同记录一段时间轴

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

上述方法只是自家个人明白罢了。假诺想查看具体API,能够上合法看看,具体地址为:

 

下边介绍一下调控台的一部分快捷键

1、方向键盘的上下键,大家一用就领悟。比如用上键就一定于选用上次在调整台的输入符号

2、$_命令归来近日一回表明式施行的结果,功效跟按升高的方向键再回车是大同小异的

2138acom太阳集团app 17

上面的$_供给通晓其奥义技能选取方便,而$0~$4则代表了近些日子5个你挑选过的DOM节点。

怎么看头?在页面右击采纳审查元素,然后在弹出来的DOM结点树下边随意点选,这一个被点过的节点会被记录下来,而$0会再次回到这段时间叁次点选的DOM结点,就这样类推,$1重返的是精品次点选的DOM节点,最多保留了5个,假使远远不够5个,则赶回undefined

2138acom太阳集团app 18

3、Chrome 调节新北原生帮衬类jQuery的选拔器,也等于说你能够用$累积熟练的css选拔器来采摘DOM节点

2138acom太阳集团app 19

4、copy经过此命令可以将要调节台获取到的源委复制到剪贴板

2138acom太阳集团app 20

(哈哈 刚刚从调节台复制的body里面包车型大巴html能够率性粘贴到哪 举个例子记事本  是否感觉成效很苍劲)

5、keys和values 后边叁个重临传入对象具有属性名组成的多少,前者重回全体属性值组成的数组

2138acom太阳集团app 21

聊起这,不免想起console.table方法了

2138acom太阳集团app 22

 

 

本文转自Chrome 控制台console的用法

6、monitor & unmonitor

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

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

2138acom太阳集团app 23

看了那张图,应该清楚了,相当于说在monitor和unmonitor中间的代码,施行的时候会在决定台出口一条音讯,里面满含了函数的称谓a及进行时所传颂的参数。当裁撤监视(也正是实行unmonitor时)就不再在调整台出口音信了。

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 改换输出文字的体制

2138acom太阳集团app 24

2、利用调节台出口图片

2138acom太阳集团app 25

3、钦定输出文字的样式

2138acom太阳集团app 26

末段说一下chrome调整台一个轻松的操作,怎么样查看页面成分,看下图就知道了

2138acom太阳集团app 27

你在调整台轻松操作贰回就知晓了,是否感觉很简短!

赞 6 收藏 评论

2138acom太阳集团app 28


先的大约介绍一下chrome的调控台,张开chrome浏览器,按f12就可以轻易的张开调整台

2138acom太阳集团app 29

大家可以观望调节台里面有一首诗还会有其余消息,假如想清中央空调节台,能够点击左上角这几个

2138acom太阳集团app 30

来清空,当然也足以经过在控制台输入console.clear()来实现清空气调节器节台消息。如下图所示

2138acom太阳集团app 31

今昔只要三个场景,如果贰个数组里面有相当多的因素,不过你想了然各种元素具体的值,那时候想想假设你用alert那将是多惨的一件事情,因为alert阻断线程运转,你不点击alert框的明显开关下一个alert就不会冒出。
上边大家用console.log来替换,感受一下它的吸重力。

2138acom太阳集团app 32

看了上边那张图,是否认知到log的无敌之处了,上边大家来拜会console里面具体提供了哪些方法能够供大家一直调节和测验时利用。

2138acom太阳集团app 33

近日调节台方法和总体性有:
["$$", "$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用以出口调节和测量试验新闻
用图来讲话


2138acom太阳集团app 34

console对象的地点5种办法,都足以行使printf风格的占位符。可是,占位符的品种少之甚少,只帮助字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)多样。
console.log("%d年%d月%d日",二〇一一,3,26);console.log("圆周率是%f",3.1415926);

2138acom太阳集团app 35

%o占位符,能够用来查阅多少个对象内幕
var dog = {};dog.name = "大毛";dog.color = "黄色";console.log("%o", dog);

2138acom太阳集团app 36

6、console.dirxml用来展现网页的某部节点(node)所包括的html/xml代码****
<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>

2138acom太阳集团app 37

7、console.group输出一组消息的启幕
8、console.groupEnd截至一组输出新闻
看你需求选取不相同的出口方法来选拔,要是上述四个章程再协作group和groupEnd方法来共同使用就足以输入各式各样标分裂样式的输出音讯。

2138acom太阳集团app 38

嘿嘿,是否感觉很奇妙啊!
9、console.assert对输入的表明式进行预知,独有表明式为false时,才输出相应的音信到调控台

2138acom太阳集团app 39

10、console.count(那一个主意拾贰分实用哦)当您想总计代码被试行的次数

2138acom太阳集团app 40

11、console.dir(这么些法子是自家时常应用的 可不知道比for in方便了有一些)直接将该DOM结点以DOM树的布局实行输出,能够详细核对象的不二等秘书籍进步端等

2138acom太阳集团app 41

12、console.time 计时启幕
13、console.timeEnd 计时甘休(看了上面的图你须臾间就感受到它的狠心了)


2138acom太阳集团app 42

14、console.profile和console.profileEnd同盟协同利用来查看CPU使用有关音讯

2138acom太阳集团app 43

在Profiles面板里面查看就可以观察cpu相关应用新闻

2138acom太阳集团app 44

15、console.timeLineconsole.timeLineEnd协作协同记录一段时间轴
16、console.trace 仓库追踪相关的调和
上述方法只是自身个人了然罢了。如若想查看具体API,可以上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api
调整台的片段急速键
1、方向键盘的上下键,大家一用就通晓。举例用上键就一定于接纳上次在调节台的输入符号
2、$_指令归来目前三次表达式施行的结果,成效跟按进步的方向键再回车是同样的

2138acom太阳集团app 45

上面的$_
亟需理解其奥义技艺动用特别,而0
4则意味着了近来5个你选拔过的DOM节点。
什么样看头?在页面右击选取检查核对成分
,然后在弹出来的DOM结点树下边随意点选,这个被点过的节点会被记录下来,而$0
会回到近年来一回点选的DOM结点,就那样类推,$1重回的是超级次点选的DOM节点,最多保留了5个,就算非常不够5个,则重返undefined

2138acom太阳集团app 46

3、Chrome 调整高雄原生帮忙类jQuery的选取器,也正是说你能够用$
加多熟悉的css选用器来选用DOM节点

2138acom太阳集团app 47

4、copy因而此命令能够将要调节台获取到的原委复制到剪贴板

2138acom太阳集团app 48

(哈哈 刚刚从调整台复制的body里面包车型地铁html能够自由粘贴到哪, 举例记事本, 是或不是以为功效很苍劲)
5、keys和values前端再次回到传入对象具有属性名组成的多寡,后面一个重返全部属性值组成的数组

2138acom太阳集团app 49

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

2138acom太阳集团app 50

6、monitor & unmonitor
monitor(function),它接受三个函数名作为参数,举个例子function a
,每次a
被施行了,都会在调整台出口一条音讯,里面包罗了函数的名称a
及实行时所传颂的参数。
而unmonitor(function)正是用来终止这一监听。

2138acom太阳集团app 51

看了那张图,应该理解了,相当于说在monitor和unmonitor中间的代码,试行的时候会在调控台出口一条音讯,里面满含了函数的名称a
及实施时所传诵的参数。当免除监视(也正是实行unmonitor时)就不再在调节台出口消息了。
$ // 老妪能解正是 document.querySelector 而已。
$$ // 轻松领会正是 document.querySelectorAll 而已。
$_ // 是上贰个表明式的值
0−
4 // 是近年来5个Elements面板选中的DOM成分,待会会讲。
dir // 其实正是 console.dir
keys // 取对象的键名, 再次来到键名组成的数组
values // 去对象的值, 再次来到值组成的数组

下边看一下console.log的片段技巧
1、重写console.log 改动输出文字的样式

2138acom太阳集团app 52

2、利用调控台出口图片

2138acom太阳集团app 53

3、钦赐输出文字的体裁

2138acom太阳集团app 54

末段说一下chrome调节台二个粗略的操作,怎么着查看页面成分,看下图就通晓了

2138acom太阳集团app 55

本文由2138acom太阳集团app发布于太阳集团2138备用网址,转载请注明出处:令你爱上console.log

相关阅读