让你爱上console.log

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

相关文章