菜单

Chrome 控制台console的用法

2019年2月26日 - XML

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

方今一经叁个现象,若是2个数组里面有这几个的成分,不过你想清楚各类成分具体的值,那时候想想即使您用alert那将是多惨的一件业务,因为alert阻断线程运营,你不点击alert框的规定按钮下2个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,可以上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api

 

下边介绍一下控制台的一对火速键

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

2、$_一声令下归来方今1遍表明式执行的结果,效用跟按提升的方向键再回车是一律的

图片 17

上面的$_急需驾驭其奥义才能接纳十分,而$0~$4则意味了近年四个你选择过的DOM节点。

什么样看头?在页面右击选取审查元素,然后在弹出来的DOM结点树上边随便点选,那一个被点过的节点会被记录下来,而$0会回去如今3遍点选的DOM结点,以此类推,$1重临的是一流次点选的DOM节点,最多保留了陆个,假设不够5个,则赶回undefined

图片 18

三 、Chrome
控制德雷斯顿原生帮忙类jQuery的选拔器
,也正是说你能够用$累加纯熟的css选用器来摘取DOM节点

图片 19

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

图片 20

(哈哈 刚刚从控制台复制的body里面包车型大巴html可以肆意粘贴到哪 比如记事本
 是还是不是认为功效很有力)

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

图片 21

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

图片 22

 

 

在此在此以前不精通console这么强大,仍是能够总括时间,分析品质瓶颈。很有意思

6、monitor & unmonitor

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

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

图片 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 改变输出文字的样式

图片 24

二 、利用控制台出口图片

图片 25

③ 、钦赐输出文字的体制

图片 26

终极说一下chrome控制台1个粗略的操作,怎么样查看页面成分,看下图就理解了

图片 27

您在支配台简单操作3遍就精晓了,是否认为很简短!

赞 6 收藏
评论

图片 28

初稿链接:http://www.open-open.com/lib/view/open1421131601390.html

 

我们都有用过各体系型的浏览器,每一个浏览器都有自个儿的风味,自个儿拙见,在自家用过的浏览器在那之中,作者是最欣赏Chrome的,因为它对于调节和测试脚本及前端设计调节和测试都有它比其它浏览器有过之而无不及的地点。恐怕大家对console.log会有肯定的刺探,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出新闻呢,上面作者就介绍一些调节的入门技巧,让你爱上console.log

先的简约介绍一下chrome的控制台,打开chrome浏览器,按f12就能够轻松的开辟控制台

图片 29

世家能够见到控制台里面有一首诗还有其余消息,借使想清空控制台,能够点击左上角那多少个图片 30来清空,当然也足以经过在控制台输入console.clear()来贯彻清空控制台消息。如下图所示

图片 31

现行反革命一经多少个场景,假若二个数组里面有成都百货上千的因素,不过你想清楚各种成分具体的值,那时候想想如若您用alert这将是多惨的一件事情,因为alert阻断线程运营,你不点击alert框的鲜明按钮下三个alert就不会冒出。

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

图片 32

看了地点那张图,是否认识到log的精锐之处了,上边我们来看望console里面具体提供了哪些措施能够供我们日常调试时采取。

图片 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用于出口警示音信

伍 、console.debug用于出口调节和测试讯息

用图来讲话

图片 34

console对象的方面5种方法,都得以使用printf风格的占位符。然则,占位符的项目相比较少,只援救字符(%s)、整数(%d或%i)、浮点数(%f)和目的(%o)多种。

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

图片 35

%o占位符,能够用来查阅多少个对象内部境况

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

图片 36

陆 、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>

图片 37

柒 、console.group输出一组新闻的早先

⑧ 、console.groupEnd截止一组输出新闻

看您需求选择差异的输出方法来选取,如果上述八个章程再协作group和groupEnd方法来三只使用就能够输入各类各类的例外款型的出口音讯。

图片 38

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

九 、console.assert对输入的说明式举办预知,只有表达式为false时,才输出相应的音讯到控制台

图片 39

十 、console.count(这些方式充裕实用哦)当你想总括代码被执行的次数

图片 40

1壹 、console.dir(这么些主意是自个儿每每使用的 可不知道比for in方便了不怎么)
直接将该DOM结点以DOM树的协会实行输出,能够详细核对象的艺术发展等等

图片 41

1二 、console.time 计时早先

1③ 、console.timeEnd 计时截至(看了下边包车型客车图你弹指间就感受到它的决心了)

图片 42

1④ 、console.profile和console.profileEnd合作共同利用来查看CPU使用有关消息

图片 43

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

图片 44

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

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

上述情势只是本人个人驾驭罢了。假诺想查看具体API,能够上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api

 

上面介绍一下控制台的部分急迅键

壹 、方向键盘的上下键,大家一用就领会。比如用上键就相当于选取上次在控制台的输入符号

2、$_指令归来近来一遍表达式执行的结果,效能跟按进步的方向键再回车是一致的

图片 45

上面的$_内需精晓其奥义才能选取方便,而$0~$4则象征了如今6个你选拔过的DOM节点。

什么意思?在页面右击选用审查成分,然后在弹出来的DOM结点树下面随便点选,那几个被点过的节点会被记录下来,而$0会回去近来二遍点选的DOM结点,以此类推,$1再次来到的是拔尖次点选的DOM节点,最多保留了6个,假设不够两个,则重临undefined。

图片 46

叁 、Chrome
控制塞内加尔达喀尔原生扶助类jQuery的选用器,也正是说你能够用$加上熟习的css选拔器来摘取DOM节点

图片 47

四 、copy通过此命令能够将在控制台获取到的始末复制到剪贴板

图片 48

(哈哈 刚刚从控制台复制的body里面包车型地铁html能够任意粘贴到哪 比如记事本
是否觉得成效很强劲)

五 、keys和values 前者重回传入对象具备属性名组成的数码,后者重临全体属性值组成的数组

图片 49

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

图片 50

 

 

6、monitor & unmonitor

monitor(function),它接受八个函数名作为参数,比如function
a,每一遍a被执行了,都会在支配台出口一条新闻,里面含有了函数的名称a及实施时所盛传的参数。

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

图片 51

看了这张图,应该精通了,相当于说在monitor和unmonitor中间的代码,执行的时候会在支配台出口一条新闻,里面含有了函数的名称a及实施时所盛传的参数。当撤除监视(也正是进行unmonitor时)就不再在决定台出口信息了。

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

 

下边看一下console.log的局地技艺

壹 、重写console.log 改变输出文字的体制

图片 52

② 、利用控制台出口图片

图片 53

叁 、钦赐输出文字的体裁

图片 54

说到底说一下chrome控制台贰个大致的操作,怎么样查看页面成分,看下图就驾驭了

图片 55

您在决定台简单操作三回就领会了,是还是不是认为很不难!

 

相关文章

发表评论

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

网站地图xml地图