www.22138com「太阳集团游戏」太阳2007娱乐官方网址

欢迎更多朋友与我们www.22138com合作,太阳集团游戏是由安全软件管理软件整合而成的最新安全卫士,其实这是因为目前已经推出了太阳2007娱乐官方网址的新网址,带您体验至尊级享受!。

让你爱上console.log

2019-05-18 13:46 来源:未知

Chrome 控制台console的用法

2015/01/12 · JavaScript · Chrome

初稿出处: ctriphire   

世家都有用过各类别型的浏览器,各个浏览器都有和谐的特征,自己拙见,在自个儿用过的浏览器个中,笔者是最欢欣Chrome的,因为它对于调节和测试脚本及前端设计调节和测试都有它比其他浏览器有过之而无不比的地点。恐怕大家对console.log会有一定的问询,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来代替alert输出音信吗,下边作者就介绍部分调治的入门本事,让您爱上console.log

先的简易介绍一下chrome的调整台,张开chrome浏览器,按f1二就能够轻便的开采调控台

图片 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日",2011,3,贰6); console.log("圆周率是%f",叁.1415九26);

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、$_让你爱上console.log。指令归来近些日子一次表明式执行的结果,功用跟按进步的方向键再回车是千篇一律的

图片 17

上面的$_亟需精晓其奥义工夫利用10分,而$0~$四则意味着了多年来多少个你选取过的DOM节点。

何以意思?在页面右击选取审查元素,然后在弹出来的DOM结点树上边随意点选,这一个被点过的节点会被记录下来,而$0会回来方今二回点选的DOM结点,由此及彼,$一重返的是最棒次点选的DOM节点,最多保留了陆个,倘诺不够多少个,则赶回undefined

图片 18

三、Chrome 调控新竹原生援救类jQuery的选用器,约等于说你能够用$增加熟练的css选用器来摘取DOM节点

图片 19

4、copy经过此命令能够就要调整台获取到的源委复制到剪贴板

图片 20

(哈哈 刚刚从调节台复制的body里面包车型客车html能够大肆粘贴到哪 比方记事本  是否认为功用很强劲)

5、keys和values 前者重返传入对象具备属性名组成的数码,后者再次来到全数属性值组成的数组

图片 21

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

图片 22

 

 

6、monitor & unmonitor

monitor(function),它接受3个函数名作为参数,比方function a,每次a被实践了,都会在调整台出口一条音讯,里面包括了函数的称号a及实施时所盛传的参数。

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

图片 23

看了那张图,应该明了了,也正是说在monitor和unmonitor中间的代码,试行的时候会在调整台出口一条新闻,里面包涵了函数的称号a及进行时所传颂的参数。当免除监视(也便是实践unmonitor时)就不再在调控台出口音讯了。

JavaScript

$ // 轻巧明了正是 document.querySelector 而已。 $$ // 轻松明白就是document.querySelectorAll 而已。 $_ // 是上多少个表明式的值 $0-$四 // 是近年来多少个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

二、利用调整台出口图片

图片 25

三、钦赐输出文字的体裁

图片 26

终极说一下chrome调整台2个轻易易行的操作,怎么样查看页面成分,看下图就了然了

图片 27

您在决定台轻巧操作二回就明白了,是否感觉很简单!

赞 6 收藏 评论

图片 28

版权声明:本文由太阳集团发布于太阳2007娱乐官方网址,转载请注明出处:让你爱上console.log