菜单

Chrome 控制台console的用法

2019年2月18日 - Bootstrap

Chrome 控制台console的用法

2015/01/12 · JavaScript
· Chrome

初稿出处:
ctriphire   

我们都有用过各连串型的浏览器,逐个浏览器都有友好的特点,自个儿拙见,在自个儿用过的浏览器当中,作者是最欢畅Chrome的,因为它对于调试脚本及前端设计调试都有它比其他浏览器有过之而无不及的地点。可能大家对console.log会有肯定的打听,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出消息吗,上边我就介绍一些调剂的入门技巧,让您爱上console.log

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

manbetx2.0手机版 1

大家可以见到控制台里面有一首诗还有任何音信,倘诺想清空控制台,能够点击左上角这几个manbetx2.0手机版 2来清空,当然也得以因而在控制台输入console.clear()来落实清空控制台消息。如下图所示

manbetx2.0手机版 3

manbetx2.0手机版,最近如果二个情景,若是贰个数组里面有许多的因素,不过你想了然各种成分具体的值,那时候想想假诺您用alert那将是多惨的一件事情,因为alert阻断线程运维,你不点击alert框的鲜明按钮下二个alert就不会产出。

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

manbetx2.0手机版 4

看了地方那张图,是否认识到log的强硬之处了,下边我们来看望console里面具体提供了怎么方法能够供大家平素调试时利用。

manbetx2.0手机版 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用于出口调试音讯

用图来发话

manbetx2.0手机版 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);

manbetx2.0手机版 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);

manbetx2.0手机版 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>

manbetx2.0手机版 9

7、console.group出口一组消息的始发

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

看你需求采用差距的出口方法来行使,即便上述三个章程再协作group和groupEnd方法来一起利用就可以输入各类各个的不等款型的出口音讯。

manbetx2.0手机版 10

哈哈哈,是还是不是觉得很神奇啊!

9、console.assert对输入的表达式举办预感,唯有表明式为false时,才输出相应的音信到控制台

manbetx2.0手机版 11

10、console.count(那么些点子丰盛实用哦)当你想总括代码被执行的次数

manbetx2.0手机版 12

11、console.dir(那些办法是自身时时选拔的 可不知道比for
in方便了不怎么) 直接将该DOM结点以DOM树的社团举行输出,可以详细核查象的章程进步等等

manbetx2.0手机版 13

12、console.time 计时始发

13、console.timeEnd  计时截至(看了上面的图你眨眼之间间就感受到它的立意了)

manbetx2.0手机版 14

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

manbetx2.0手机版 15

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

manbetx2.0手机版 16

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

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

上述办法只是自小编个人知道罢了。若是想查看具体API,可以上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api

 

上面介绍一下控制台的局地飞快键

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

2、$_指令归来方今三回表明式执行的结果,功用跟按升高的方向键再回车是如出一辙的

manbetx2.0手机版 17

上面的$_亟需明白其奥义才能利用合适,而$0~$4则意味着了多年来陆个你挑选过的DOM节点。

哪些意思?在页面右击选取审查元素,然后在弹出来的DOM结点树上面随便点选,这几个被点过的节点会被记录下来,而$0会回去近来一次点选的DOM结点,以此类推,$1再次来到的是一流次点选的DOM节点,最多保留了陆个,假若不够四个,则赶回undefined

manbetx2.0手机版 18

3、Chrome
控制毕尔巴鄂原生支持类jQuery的采纳器
,相当于说你可以用$增进熟练的css采纳器来选拔DOM节点

manbetx2.0手机版 19

4、copy因此此命令可以将在控制台获取到的情节复制到剪贴板

manbetx2.0手机版 20

(哈哈 刚刚从控制台复制的body里面的html可以无限制粘贴到哪 比如记事本
 是或不是觉得成效很强劲)

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

manbetx2.0手机版 21

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

manbetx2.0手机版 22

 

 

以前不知道console这么强大,还可以总括时间,分析质量瓶颈。很有趣

6、monitor & unmonitor

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

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

manbetx2.0手机版 23

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

JavaScript

$ // 简单明了就是 document.querySelector 而已。 $$ // 简单明了就是
document.querySelectorAll 而已。 $_ // 是上1个表明式的值 $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的部分技术

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

manbetx2.0手机版 24

② 、利用控制台出口图片

manbetx2.0手机版 25

③ 、内定输出文字的体裁

manbetx2.0手机版 26

最终说一下chrome控制台一个粗略的操作,如何查看页面成分,看下图就精晓了

manbetx2.0手机版 27

您在决定台简单操作一次就精通了,是否觉得很不难!

赞 6 收藏
评论

manbetx2.0手机版 28

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

 

世家都有用过各连串型的浏览器,每一个浏览器都有投机的个性,自己拙见,在自身用过的浏览器当中,我是最欣赏Chrome的,因为它对于调试脚本及前端设计调试都有它比任何浏览器有过之而无不及的地点。或许我们对console.log会有必然的询问,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出音讯吗,下边小编就介绍一些调剂的入门技巧,让你爱上console.log

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

manbetx2.0手机版 29

世家可以看出控制台里面有一首诗还有任何音讯,假如想清空控制台,可以点击左上角那几个manbetx2.0手机版 30来清空,当然也得以由此在控制台输入console.clear()来兑现清空控制台消息。如下图所示

manbetx2.0手机版 31

近日假若三个光景,如若三个数组里面有无数的因素,但是你想了然种种成分具体的值,那时候想想固然您用alert那将是多惨的一件工作,因为alert阻断线程运转,你不点击alert框的显然按钮下二个alert就不会油可是生。

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

manbetx2.0手机版 32

看了地点那张图,是还是不是认识到log的强劲之处了,上面大家来探视console里面具体提供了何等措施可以供大家一向调试时使用。

manbetx2.0手机版 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用于出口调试音讯

用图来讲话

manbetx2.0手机版 34

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

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

manbetx2.0手机版 35

%o占位符,可以用来查看三个对象内部意况

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

manbetx2.0手机版 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>

manbetx2.0手机版 37

柒 、console.group输出一组新闻的初叶

捌 、console.groupEnd甘休一组输出新闻

看你需求拔取不一致的出口方法来采纳,如若上述七个情势再合作group和groupEnd方法来一块使用就足以输入各类各种的差别式样的出口消息。

manbetx2.0手机版 38

嘿嘿,是或不是认为很神奇啊!

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

manbetx2.0手机版 39

十 、console.count(那些法子充足实用哦)当你想统计代码被实践的次数

manbetx2.0手机版 40

1壹 、console.dir(那一个艺术是自己时时采纳的 可不知道比for in方便了有个别)
直接将该DOM结点以DOM树的构造举办输出,可以详细核查象的主意提升等等

manbetx2.0手机版 41

1② 、console.time 计时初阶

1③ 、console.timeEnd 计时截止(看了下边的图你刹那间就感受到它的决心了)

manbetx2.0手机版 42

1四 、console.profile和console.profileEnd协作共同利用来查阅CPU使用相关新闻

manbetx2.0手机版 43

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

manbetx2.0手机版 44

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

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

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

 

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

1、方向键盘的上下键,咱们一用就领会。比如用上键就一定于采纳上次在控制台的输入符号

2、$_一声令下归来近期三遍表达式执行的结果,作用跟按进步的方向键再回车是平等的

manbetx2.0手机版 45

上面的$_内需了解其奥义才能利用合适,而$0~$4则象征了多年来四个你选用过的DOM节点。

怎么意思?在页面右击采取审查成分,然后在弹出来的DOM结点树上面随便点选,那几个被点过的节点会被记录下来,而$0会回来近日一遍点选的DOM结点,以此类推,$1再次来到的是最佳次点选的DOM节点,最多保留了几个,如若不够伍个,则重返undefined。

manbetx2.0手机版 46

三 、Chrome
控制马尔默原生资助类jQuery的采用器,相当于说你可以用$加上熟谙的css选取器来选用DOM节点

manbetx2.0手机版 47

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

manbetx2.0手机版 48

(哈哈 刚刚从控制台复制的body里面的html可以随心所欲粘贴到哪 比如记事本
是还是不是认为功效很有力)

伍 、keys和values 前者返回传入对象拥有属性名组成的数量,后者重返全体属性值组成的数组

manbetx2.0手机版 49

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

manbetx2.0手机版 50

 

 

6、monitor & unmonitor

monitor(function),它接受2个函数名作为参数,比如function
a,每趟a被执行了,都会在决定台出口一条音讯,里面富含了函数的名称a及实施时所传颂的参数。

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

manbetx2.0手机版 51

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

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

 

上边看一下console.log的部分技术

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

manbetx2.0手机版 52

贰 、利用控制台出口图片

manbetx2.0手机版 53

叁 、内定输出文字的样式

manbetx2.0手机版 54

最后说一下chrome控制台1个简短的操作,如何查看页面成分,看下图就知道了

manbetx2.0手机版 55

你在控制台简单操作一遍就知晓了,是还是不是觉得很简短!

 

相关文章

发表评论

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

网站地图xml地图