金沙国际唯一官网-奥门金沙手机娱乐网址

热门关键词: 金沙国际唯一官网,奥门金沙手机娱乐网址
金沙国际唯一官网 > 媒体新闻 > 金沙国际唯一官网让你爱上console.log

原标题:金沙国际唯一官网让你爱上console.log

浏览次数:92 时间:2019-10-18

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日",2012,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代码****
<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

本文由金沙国际唯一官网发布于媒体新闻,转载请注明出处:金沙国际唯一官网让你爱上console.log

关键词:

上一篇:它实现了浏览器与服务器全双工通信

下一篇:没有了