香港六马会开奖结果-六合彩特码资料-本港台最快开奖直播

[2019]让您放心游戏,提供六合彩特码资料最丰厚回馈!,本港台最快开奖直播是为您电脑安全以及资金安全的考虑,所以说压实向感受娱乐首先应该进下载时必不可少的。

Chrome 控制台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日",贰零壹壹,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能够Infiniti制粘贴到哪 例如记事本  是或不是以为作用很强大)

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

本文由香港六马会开奖结果发布于本港台最快开奖直播,转载请注明出处:Chrome 控制台console的用法

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文