云顶集团官网手机版-云顶集团网站

热门关键词: 云顶集团官网手机版,云顶集团网站
让你爱上console云顶集团网站.log
分类:web前端

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

 

 

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

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


先的简便介绍一下chrome的调整台,展开chrome浏览器,按f12就足以轻易的开垦调整台

云顶集团网站 29

大家能够看出调整台里面有后生可畏首诗还有其它音讯,假设想清中央空调整台,能够点击左上角那个

云顶集团网站 30

来清空,当然也得以因此在决定台输入console.clear()来兑现清中央空调整台音讯。如下图所示

云顶集团网站 31

前段时间假如二个光景,假诺三个数组里面有过多的因素,可是你想清楚各类成分具体的值,那时候想想假诺您用alert这将是多惨的风流罗曼蒂克件事情,因为alert阻断线程运行,你不点击alert框的规定开关下多个alert就不会不能自已。
上面大家用console.log来替换,感受一下它的魔力。

云顶集团网站 32

看了地点那张图,是否认知到log的强硬之处了,下边大家来走访console里面具体提供了什么方法可以供大家平日调节和测量检验时接收。

云顶集团网站 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用以出口调节和测验音信
用图来讲话


云顶集团网站 34

console对象的地点5种形式,都足以采用printf风格的占位符。可是,占位符的品种相当少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)八种。
console.log("%d年%d月%d日",2013,3,26);console.log("圆周率是%f",3.1415926);

云顶集团网站 35

%o占位符,可以用来查看多个目的内幕
var dog = {};dog.name = "大毛";dog.color = "黄色";console.log("%o", dog);

云顶集团网站 36

6、console.dirxml用来显示网页的某部节点(node)所蕴含的html/xml代码****
让你爱上console云顶集团网站.log。<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>

云顶集团网站 37

7、console.group出口大器晚成组音讯的上马
8、console.groupEnd终结风度翩翩组输出音讯
看你必要接纳不一致的输出方法来利用,假诺上述八个主意再协作group和groupEnd方法来一块行使就足以输入精彩纷呈的差别式样的出口新闻。

云顶集团网站 38

哈哈,是否认为很奇妙啊!
9、console.assert对输入的表明式实行预见,只有表明式为false时,才输出相应的新闻到调节台

云顶集团网站 39

10、console.count(那些方式充足实用哦)当您想总括代码被实施的次数

云顶集团网站 40

11、console.dir(这些点子是自身平日使用的 可不知道比for in方便了有些)直接将该DOM结点以DOM树的组织举办输出,可以详细核对象的方式发展等等

云顶集团网站 41

12、console.time 计时伊始
13、console.timeEnd 计时结束(看了上边包车型地铁图你弹指间就感受到它的厉害了)


云顶集团网站 42

14、console.profile和console.profileEnd同盟协同行使来查阅CPU使用有关新闻

云顶集团网站 43

在Profiles面板里面查看就能够看出cpu相关应用音信

云顶集团网站 44

15、console.timeLineconsole.timeLineEnd极度同盟记录风华正茂段时间轴
16、console.trace 货仓跟踪相关的调节和测量检验
上述方法只是自己个人领会罢了。纵然想查看具体API,能够上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api
调控台的有个别急迅键
1、方向键盘的上下键,大家生龙活虎用就精晓。例如用上键就也正是选择上次在调整台的输入符号
2、$_指令归来近年来壹遍表明式施行的结果,功用跟按提升的方向键再回车是相近的

云顶集团网站 45

上面的$_
需求掌握其奥义工夫应用合适,而0
4则代表了近年来5个你接受过的DOM节点。
何以看头?在页面右击选择检查核对成分
,然后在弹出来的DOM结点树上边随意点选,那几个被点过的节点会被记录下来,而$0
会回来近日三回点选的DOM结点,由此及彼,$1重返的是一级次点选的DOM节点,最多保留了5个,要是远远不够5个,则再次回到undefined

云顶集团网站 46

3、Chrome 调控桃园原生扶持类jQuery的选取器,也便是说你能够用$
增加熟习的css采用器来筛选DOM节点

云顶集团网站 47

4、copy透过此命令能够就要调整台获取到的开始和结果复制到剪贴板

云顶集团网站 48

(哈哈 刚刚从调整台复制的body里面的html能够随便粘贴到哪, 举个例子记事本, 是否认为功用很苍劲)
5、keys和values前面叁个再次来到传入对象具备属性名组成的数码,前面一个再次来到全部属性值组成的数组

云顶集团网站 49

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

云顶集团网站 50

6、monitor & unmonitor
monitor(function),它选取一个函数名作为参数,比方function a
,每次a
被试行了,都会在调节台出口一条消息,里面满含了函数的名称a
及举办时所传诵的参数。
而unmonitor(function)就是用来终止这一监听。

云顶集团网站 51

看了那张图,应该精通了,也正是说在monitor和unmonitor中间的代码,试行的时候会在支配台出口一条音信,里面含有了函数的名称a
及试行时所盛传的参数。当免除监视(也正是施行unmonitor时)就不再在决定台出口音讯了。
$ // 老妪能解正是 document.querySelector 而已。
$$ // 老妪能解就是 document.querySelectorAll 而已。
$_ // 是上三个表明式的值
0−
4 // 是近年来5个Elements面板选中的DOM成分,待会会讲。
dir // 其实便是 console.dir
keys // 取对象的键名, 重临键名组成的数组
values // 去对象的值, 重回值组成的数组

下边看一下console.log的生机勃勃部分技巧
1、重写console.log 改换输出文字的样式

云顶集团网站 52

2、利用调控台出口图片

云顶集团网站 53

3、内定输出文字的体裁

云顶集团网站 54

最后说一下chrome调节台三个简单的操作,如何查看页面成分,看下图就理解了

云顶集团网站 55

本文由云顶集团官网手机版发布于web前端,转载请注明出处:让你爱上console云顶集团网站.log

上一篇:从今以后顾客端再一次发送request云顶集团网站 下一篇:没有了
猜你喜欢
热门排行
精彩图文