Chrome 调整台console的用法

作者: 产品分类  发布:2019-10-16

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

本文由全球彩票历史版本发布于产品分类,转载请注明出处:Chrome 调整台console的用法

关键词:

上一篇:十年WEB技术发展历程
下一篇:没有了