新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

让你爱上console.log

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日",二零一二,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)所含有的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.timeLineconsole.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能够自由粘贴到哪 举个例子记事本  是还是不是以为功用很有力)

5、keys和values 前面贰个重回传入对象具备属性名组成的多寡,前面一个重回全体属性值组成的数组

图片 21

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

图片 22

 

 

6、monitor & unmonitor

monitor(function),它接受贰个函数名作为参数,举个例子function a,每次a被实践了,都会在支配台出口一条消息,里面包括了函数的名目a及实行时所传颂的参数。

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

图片 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 改造输出文字的样式

图片 24

2、利用调整台出口图片

图片 25

3、内定输出文字的体裁

图片 26

末尾说一下chrome调整台一个简便的操作,怎么着查看页面成分,看下图就清楚了

图片 27

您在支配台轻松操作一回就精晓了,是否感到一点也不细略!

赞 6 收藏 评论

图片 28

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于www.301net,转载请注明出处:让你爱上console.log

您可能还会对下面的文章感兴趣: