开发者工具使用永利澳门游戏网址304:

Chrome 控制台console的用法

2015/01/12 · JavaScript
· Chrome

原稿出处:
ctriphire   

世家都有用过各种类型的浏览器,种种浏览器都有和好的特色,本身拙见,在自身用过的浏览器当中,小编是最欢腾Chrome的,因为它对于调节和测量检验脚本及前端设计调节和测试都有它比别的浏览器有过之而无不如的地方。恐怕大家对console.log会有一定的询问,心里难免会想调节和测量试验的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来代替alert输出消息吗,上边小编就介绍部分调理的入门技艺,让您爱上console.log

先的简易介绍一下chrome的调整台,展开chrome浏览器,按f12就能够轻易的开采调节台

永利澳门游戏网址304 1

世家能够看到调控台里面有一首诗还应该有任何新闻,假诺想清中央空调节台,能够点击左上角那些永利澳门游戏网址304 2来清空,当然也能够通过在支配台输入console.clear()来完成清空气调节器控台新闻。如下图所示

永利澳门游戏网址304 3

后天假诺四个风貌,要是一个数组里面有成都百货上千的要素,不过你想理解各种成分具体的值,那时候想想假诺您用alert那将是多惨的一件工作,因为alert阻断线程运维,你不点击alert框的规定按键下二个alert就不会产出。

上边我们用console.log来替换,感受一下它的吸重力。

永利澳门游戏网址304 4

看了地点那张图,是否认知到log的强劲之处了,上边大家来会见console里面具体提供了怎样措施能够供我们平日调节和测量试验时利用。

永利澳门游戏网址304 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用于出口调节和测验音信

用图来发话

永利澳门游戏网址304 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);

永利澳门游戏网址304 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);

永利澳门游戏网址304 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>

永利澳门游戏网址304 9

7、console.group出口一组消息的起初

8、console.groupEnd终结一组输出消息

看您须求选用差异的输出方法来使用,假若上述多少个法子再协作group和groupEnd方法来一同行使即可输入五光十色的不等款式的出口新闻。

永利澳门游戏网址304 10

哈哈哈,是否认为很奇妙啊!

9、console.assert对输入的表明式举行预见,独有表明式为false时,才输出相应的音信到调整台

永利澳门游戏网址304 11

10、console.count(那几个法子足够实用哦)当您想总计代码被推行的次数

永利澳门游戏网址304 12

11、console.dir(那一个艺术是本身常常利用的 可不知道比for
in方便了略微) 直接将该DOM结点以DOM树的结构进行输出,能够详细核查象的措施发展等等

永利澳门游戏网址304 13

12、console.time 计时始发

13、console.timeEnd  计时甘休(看了下边的图你弹指间就感受到它的立意了)

永利澳门游戏网址304 14

14、console.profileconsole.profileEnd格外协同行使来查看CPU使用相关新闻

永利澳门游戏网址304 15

在Profiles面板里面查看就能够观察cpu相关应用音讯

永利澳门游戏网址304 16

15、console.timeLineconsole.timeLineEnd十分协同记录一段时间轴

16、console.trace  宾馆追踪相关的调节和测量检验

上述方法只是本人个人理解罢了。若是想查看具体API,能够上合法看看,具体地址为:

 

上边介绍一下调控台的有个别迅速键

1、方向键盘的上下键,我们一用就明白。例如用上键就一定于选拔上次在调节台的输入符号

2、$_命令归来近期三遍表明式试行的结果,作用跟按升高的方向键再回车是大同小异的

永利澳门游戏网址304 17

上面的$_内需理解其奥义技能动用方便,而$0~$4则代表了这几天5个你挑选过的DOM节点。

何以看头?在页面右击选用审查元素,然后在弹出来的DOM结点树上面随意点选,那一个被点过的节点会被记录下来,而$0会重临近期一遍点选的DOM结点,就那样推算,$1再次来到的是极品次点选的DOM节点,最多保留了5个,假设相当不足5个,则赶回undefined

永利澳门游戏网址304 18

3、Chrome
调整台南原生协助类jQuery的接纳器
,也即是说你能够用$累加领会的css选用器来抉择DOM节点

永利澳门游戏网址304 19

4、copy经过此命令能够就要调节台获取到的剧情复制到剪贴板

永利澳门游戏网址304 20

(哈哈 刚刚从调节台复制的body里面的html能够Infiniti制粘贴到哪 比如记事本
 是否以为成效很强劲)

5、keys和values 前面三个重临传入对象具备属性名组成的多寡,前者重临全体属性值组成的数组

永利澳门游戏网址304 21

谈到那,不免想起console.table方法了

永利澳门游戏网址304 22

 

 

正文转自Chrome
控制台console的用法

6、monitor & unmonitor

monitor(function),它接受五个函数名作为参数,比方function a,每次a被施行了,都会在支配台出口一条音信,里面含有了函数的称呼a及进行时所传诵的参数。

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

永利澳门游戏网址304 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 退换输出文字的样式

永利澳门游戏网址304 24

2、利用调整台出口图片

永利澳门游戏网址304 25

3、钦命输出文字的体裁

永利澳门游戏网址304 26

终极说一下chrome调节台二个总结的操作,怎么着查看页面成分,看下图就知道了

永利澳门游戏网址304 27

你在决定台轻便操作一遍就知晓了,是或不是以为一点也不细略!

赞 6 收藏
评论

永利澳门游戏网址304 28


先的简便介绍一下chrome的调节台,张开chrome浏览器,按f12就可以轻易的开辟调节台

永利澳门游戏网址304 29

大家能够看看调节台里面有一首诗还会有另外新闻,假使想清空气调节器控台,能够点击左上角这么些

永利澳门游戏网址304 30

来清空,当然也得以经过在决定台输入console.clear()来兑现清空气调节器控台消息。如下图所示

永利澳门游戏网址304 31

这段日子借使二个光景,要是二个数组里面有那些的因素,但是你想清楚各样成分具体的值,那时候想想假诺你用alert那将是多惨的一件事情,因为alert阻断线程运转,你不点击alert框的规定按键下二个alert就不会现出。
上边我们用console.log来替换,感受一下它的吸引力。

永利澳门游戏网址304 32

看了地方那张图,是否认知到log的强硬之处了,上面咱们来探视console里面具体提供了怎样措施能够供大家平时调节和测量检验时行使。

永利澳门游戏网址304 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用于出口调节和测量检验音讯
用图来发话


永利澳门游戏网址304 34

console对象的方面5种情势,都得以使用printf风格的占位符。不过,占位符的项目比相当少,只帮助字符(%s)、整数(%d或%i)、浮点数(%f)和目标(%o)二种。
console.log(“%d年%d月%d日”,2012,3,26);console.log(“圆周率是%f”,3.1415926);

永利澳门游戏网址304 35

%o占位符,能够用来查看三个对象内部原因
var dog = {};dog.name = “大毛”;dog.color = “黄色”;console.log(“%o”,
dog);

永利澳门游戏网址304 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>

永利澳门游戏网址304 37

7、console.group出口一组新闻的起来
8、console.groupEnd利落一组输出消息
看您供给选拔不一样的输出方法来使用,假若上述多个办法再协作group和groupEnd方法来一起使用就能够输入多姿多彩的比不上格局的出口音信。

永利澳门游戏网址304 38

嘿嘿,是或不是以为很巧妙啊!
9、console.assert对输入的表明式举办预见,只有表明式为false时,才输出相应的音讯到调控台

永利澳门游戏网址304 39

10、console.count(这么些措施丰裕实用哦)当你想计算代码被试行的次数

永利澳门游戏网址304 40

11、console.dir(这么些办法是本人再三接纳的 可不知道比for
in方便了不怎么)直接将该DOM结点以DOM树的结构进行输出,可以详细核对象的格局发展等等

永利澳门游戏网址304 41

12、console.time 计时上马
永利澳门游戏网址304,13、console.timeEnd
计时停止(看了上边包车型客车图你弹指间就感受到它的决心了)

发表评论

电子邮件地址不会被公开。 必填项已用*标注