菜单

Chrome 控制台console的用法

2019年2月16日 - JavaScript

Chrome 控制台console的用法

2015/01/12 · JavaScript
· manbetx网页手机登录版,Chrome

初稿出处:
ctriphire   

我们都有用过各种类型的浏览器,各个浏览器都有谈得来的特征,本人拙见,在本人用过的浏览器当中,作者是最喜爱Chrome的,因为它对于调试脚本及前端设计调试都有它比其余浏览器有过之而无不及的地点。或许大家对console.log会有一定的精通,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出音信吗,下边笔者就介绍一些调剂的入门技巧,让你爱上console.log

先的简要介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松的开拓控制台

manbetx网页手机登录版 1

我们可以看到控制台里面有一首诗还有其余音信,即使想清空控制台,可以点击左上角那多少个manbetx网页手机登录版 2来清空,当然也能够通过在支配台输入console.clear()来贯彻清空控制台消息。如下图所示

manbetx网页手机登录版 3

当今只要三个气象,倘若八个数组里面有无数的因素,可是你想清楚种种成分具体的值,那时候想想固然你用alert那将是多惨的一件工作,因为alert阻断线程运转,你不点击alert框的规定按钮下一个alert就不会产出。

上面我们用console.log来替换,感受一下它的魔力。

manbetx网页手机登录版 4

看了上边那张图,是还是不是认识到log的兵不血刃之处了,上面我们来探望console里面具体提供了怎么样措施可以供我们一直调试时拔取。

manbetx网页手机登录版 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用于出口调试音讯

用图来说话

manbetx网页手机登录版 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);

manbetx网页手机登录版 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);

manbetx网页手机登录版 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>

manbetx网页手机登录版 9

7、console.group出口一组新闻的始发

8、console.groupEnd利落一组输出音信

看你需求选用差其余出口方法来利用,如果上述多个主意再同盟group和groupEnd方法来一同行使就足以输入各个各个的不比款式的输出音信。

manbetx网页手机登录版 10

哈哈,是还是不是认为很神奇啊!

9、console.assert对输入的表明式进行预见,唯有表明式为false时,才输出相应的音讯到控制台

manbetx网页手机登录版 11

10、console.count(那个办法拾分实用哦)当您想总括代码被实践的次数

manbetx网页手机登录版 12

11、console.dir(这些艺术是作者时时接纳的 可不知道比for
in方便了多少) 直接将该DOM结点以DOM树的结构进行输出,可以详细核对象的不二法门提升等等

manbetx网页手机登录版 13

12、console.time 计时开班

13、console.timeEnd  计时甘休(看了上边的图你须臾间就感受到它的决意了)

manbetx网页手机登录版 14

14、console.profileconsole.profileEnd合营协同行使来查阅CPU使用相关音讯

manbetx网页手机登录版 15

在Profiles面板里面查看就足以看来cpu相关应用新闻

manbetx网页手机登录版 16

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

16、console.trace  堆栈跟踪相关的调剂

上述方式只是自己个人了解罢了。如果想查看具体API,可以上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api

 

上面介绍一下控制台的部分快捷键

一,方向键盘的上下键,大家一用就了解。比如用上键就一定于拔取上次在控制台的输入符号

2、$_命令归来近期三次表明式执行的结果,成效跟按升高的方向键再回车是同一的

manbetx网页手机登录版 17

上面的$_须要精通其奥义才能采纳合适,而$0~$4则代表了近年两个你选用过的DOM节点。

怎么着意思?在页面右击拔取审查元素,然后在弹出来的DOM结点树上边随便点选,那一个被点过的节点会被记录下来,而$0会回来如今三回点选的DOM结点,以此类推,$1重回的是一级次点选的DOM节点,最多保留了多少个,即使不够三个,则赶回undefined

manbetx网页手机登录版 18

叁,Chrome
控制莱比锡原生帮忙类jQuery的采纳器
,相当于说你可以用$加上熟谙的css接纳器来摘取DOM节点

manbetx网页手机登录版 19

4、copy经过此命令可以将在控制台获取到的内容复制到剪贴板

manbetx网页手机登录版 20

(哈哈 刚刚从控制台复制的body里面的html可以专擅粘贴到哪 比如记事本
 是否认为作用很有力)

5、keys和values 前者再次回到传入对象具备属性名组成的多寡,后者再次回到全体属性值组成的数组

manbetx网页手机登录版 21

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

manbetx网页手机登录版 22

 

 

原先不晓得console这么强大,还能总结时间,分析品质瓶颈。很有意思

6、monitor & unmonitor

monitor(function),它接受一个函数名作为参数,比如function a,每次a被实施了,都会在控制台出口一条音信,里面包含了函数的称号a及实施时所盛传的参数。

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

manbetx网页手机登录版 23

看了那张图,应该知道了,相当于说在monitor和unmonitor中间的代码,执行的时候会在支配台出口一条音信,里面含有了函数的名目a及实施时所盛传的参数。当免除监视(相当于进行unmonitor时)就不再在支配台出口消息了。

JavaScript

$ // 简单明了就是 document.querySelector 而已。 $$ // 不难驾驭就是
document.querySelectorAll 而已。 $_ // 是上三个表明式的值 $0-$4 //
是新近多个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的一些技术

壹,重写console.log 改变输出文字的样式

manbetx网页手机登录版 24

二,利用控制台出口图片

manbetx网页手机登录版 25

三,指定输出文字的体制

manbetx网页手机登录版 26

末段说一下chrome控制台一个粗略的操作,怎么样查看页面元素,看下图就精通了

manbetx网页手机登录版 27

你在控制台简单操作一遍就清楚了,是否觉得很简短!

赞 6 收藏
评论

manbetx网页手机登录版 28

原文链接:http://www.open-open.com/lib/view/open1421131601390.html

 

世家都有用过各体系型的浏览器,每个浏览器都有谈得来的性状,自己拙见,在本人用过的浏览器当中,作者是最欢乐Chrome的,因为它对于调试脚本及前端设计调试都有它比其余浏览器有过之而无不及的地点。大概我们对console.log会有肯定的摸底,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息吗,上边小编就介绍一些调节的入门技巧,让您爱上console.log

先的简练介绍一下chrome的控制台,打开chrome浏览器,按f12就足以轻松的开拓控制台

manbetx网页手机登录版 29

世家可以见到控制台里面有一首诗还有任何新闻,借使想清空控制台,能够点击左上角那个manbetx网页手机登录版 30来清空,当然也可以由此在支配台输入console.clear()来落成清空控制台消息。如下图所示

manbetx网页手机登录版 31

当今若是1个意况,假设一个数组里面有为数不少的因素,然而你想知道各类成分具体的值,那时候想想尽管您用alert那将是多惨的一件工作,因为alert阻断线程运营,你不点击alert框的分明按钮下一个alert就不会冒出。

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

manbetx网页手机登录版 32

看了上边那张图,是否认识到log的强有力之处了,下边大家来探视console里面具体提供了如何措施可以供大家一贯调试时拔取。

manbetx网页手机登录版 33

目前控制台方法和属性有:

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

上边我们来挨家挨户介绍一下种种艺术主要的用途。

诚如景况下大家用来输入消息的法门主假若用到如下八个

一,console.log 用于出口普通音信

二,console.info 用于出口指示性消息

③console.error用于出口错误音讯

四,console.warn用于出口警示新闻

5、console.debug用于出口调试新闻

用图来发话

manbetx网页手机登录版 34

console对象的地点5种方法,都可以使用printf风格的占位符。不过,占位符的花色比较少,只援救字符(%s)、整数(%d或%i)、浮点数(%f)和目标(%o)五种。

console.log("%d年%d月%d日",2011,3,26);
console.log("圆周率是%f",3.1415926);

manbetx网页手机登录版 35

%o占位符,可以用来查阅1个对象内部景观

var dog = {};
dog.name = "大毛";
dog.color = "黄色";
console.log("%o", dog);

manbetx网页手机登录版 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>

manbetx网页手机登录版 37

7、console.group输出一组信息的起首

八,console.groupEnd截至一组输出音信

看您要求采纳不相同的输出方法来使用,假设上述多个方法再合作group和groupEnd方法来一同利用就能够输入各类各种的不比形式的出口音讯。

manbetx网页手机登录版 38

嘿嘿,是否认为很神奇啊!

九,console.assert对输入的表明式进行预知,唯有表明式为false时,才输出相应的音信到控制台

manbetx网页手机登录版 39

10、console.count(那一个法子丰富实用哦)当你想计算代码被实施的次数

manbetx网页手机登录版 40

1一,console.dir(那么些措施是自己平常利用的 可不知道比for in方便了有些)
直接将该DOM结点以DOM树的布局举行输出,能够详细核对象的章程进步等等

manbetx网页手机登录版 41

12、console.time 计时早先

1三,console.timeEnd 计时截至(看了上面的图你弹指间就感受到它的厉害了)

manbetx网页手机登录版 42

1肆,console.profile和console.profileEnd同盟协同利用来查阅CPU使用相关音讯

manbetx网页手机登录版 43

在Profiles面板里面查看就可以见见cpu相关应用音讯

manbetx网页手机登录版 44

15、console.timeLine和console.timeLineEnd合作协同记录一段时间轴

1陆,console.trace 堆栈跟踪相关的调节

上述方法只是自身个人掌握罢了。倘使想查看具体API,可以上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api

 

上面介绍一下控制台的有些快速键

一,方向键盘的上下键,我们一用就驾驭。比如用上键就相当于采取上次在控制台的输入符号

2、$_命令归来近来三遍表明式执行的结果,效率跟按进步的方向键再回车是同一的

manbetx网页手机登录版 45

上面的$_要求明白其奥义才能利用方便,而$0~$4则代表了目前几个你挑选过的DOM节点。

怎么样看头?在页面右击接纳审查成分,然后在弹出来的DOM结点树上边随便点选,那些被点过的节点会被记录下来,而$0会回到近日几遍点选的DOM结点,以此类推,$1再次回到的是超级次点选的DOM节点,最多保留了多少个,如若不够陆个,则重回undefined。

manbetx网页手机登录版 46

三,Chrome
控制纽伦堡原生协助类jQuery的选拔器,约等于说你可以用$加上熟知的css选用器来摘取DOM节点

manbetx网页手机登录版 47

肆,copy通过此命令可以将在控制台获取到的内容复制到剪贴板

manbetx网页手机登录版 48

(哈哈 刚刚从控制台复制的body里面的html能够任意粘贴到哪 比如记事本
是否觉得作用很有力)

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

manbetx网页手机登录版 49

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

manbetx网页手机登录版 50

 

 

6、monitor & unmonitor

monitor(function),它接受多少个函数名作为参数,比如function
a,每一次a被实施了,都会在控制台出口一条音讯,里面包涵了函数的名称a及进行时所传诵的参数。

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

manbetx网页手机登录版 51

看了那张图,应该明了了,约等于说在monitor和unmonitor中间的代码,执行的时候会在决定台出口一条音讯,里面富含了函数的名称a及举办时所传颂的参数。当撤销监视(相当于实践unmonitor时)就不再在控制台出口新闻了。

$ // 简单理解就是 document.querySelector 而已。
$$ // 简单理解就是 document.querySelectorAll 而已。
$_ // 是上一个表达式的值
$0-$4 // 是最近5个Elements面板选中的DOM元素,待会会讲。
dir // 其实就是 console.dir
keys // 取对象的键名, 返回键名组成的数组
values // 去对象的值, 返回值组成的数组

 

上面看一下console.log的一些技艺

一,重写console.log 改变输出文字的体裁

manbetx网页手机登录版 52

贰,利用控制台出口图片

manbetx网页手机登录版 53

三,指定输出文字的样式

manbetx网页手机登录版 54

末段说一下chrome控制台一个简单易行的操作,怎样查看页面成分,看下图就了解了

manbetx网页手机登录版 55

你在控制台简单操作三次就清楚了,是或不是认为很简单!

 

相关文章

发表评论

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

网站地图xml地图