澳门新葡8455手机版-澳门新葡8455最新网站

您的位置:澳门新葡8455手机版 > 澳门新葡8455最新网站 > 让您爱上console.log

让您爱上console.log

2019-10-07 10:45

6、monitor & unmonitor

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

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

图片 1

看了那张图,应该清楚了,也便是说在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 更动输出文字的体制

图片 2

2、利用调节台出口图片

图片 3

3、钦点输出文字的体裁

图片 4

最终说一下chrome调整台贰个简约的操作,怎么样查看页面成分,看下图就通晓了

图片 5

您在决定台简单操作二回就驾驭了,是还是不是以为很轻巧!

赞 6 收藏 评论

图片 6

图片 7

Chrome 控制台console的用法

2015/01/12 · JavaScript · Chrome

原版的书文出处: ctriphire   

大家都有用过种种类型的浏览器,各个浏览器都有和好的特色,自身拙见,在自个儿用过的浏览器个中,作者是最欢畅Chrome的,因为它对于调节和测量检验脚本及前端设计调试都有它比任何浏览器有过之而无不比的地点。恐怕大家对console.log会有必然的打听,心里难免会想调节和测量检验的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来取代alert输出消息吗,下边小编就介绍一些调治的入门技艺,让您爱上console.log

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

图片 8

我们能够观望调节台里面有一首诗还大概有另外音信,如果想清空调节台,能够点击左上角那多少个图片 9来清空,当然也足以由此在调整台输入console.clear()来达成清空气调节器整台信息。如下图所示

图片 10

当今只要三个气象,假如一个数组里面有广大的因素,可是你想精晓各样成分具体的值,那时候想想借让你用alert那将是多惨的一件事情,因为alert阻断线程运维,你不点击alert框的鲜明开关下一个alert就不会冒出。

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

图片 11

看了上边那张图,是否认知到log的兵不血刃之处了,上面大家来拜谒console里面具体提供了哪些方法能够供大家一直调节和测量检验时利用。

图片 12

日前调节台方法和总体性有:

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用以出口调节和测量检验信息

用图来说话

图片 13

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);

图片 14

%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);

图片 15

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>

图片 16

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

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

看你需求选取不一致的出口方法来选用,假如上述两个措施再合营group和groupEnd方法来一同利用就足以输入美妙绝伦的不等款式的输出信息。

图片 17

嘿嘿,是或不是感觉很神奇啊!

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

图片 18

10、console.count(这一个方法十二分实用哦)当你想总括代码被实践的次数

图片 19

11、console.dir(这几个主意是自己偶尔应用的 可不知道比for in方便了稍稍) 直接将该DOM结点以DOM树的组织实行输出,能够详细校对象的章程发展等等

图片 20

12、console.time 计时上马

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

图片 21

14、console.profileconsole.profileEnd合营共同利用来查阅CPU使用有关消息

图片 22

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

图片 23

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

16、console.trace  货仓追踪相关的调弄整理

上述格局只是自己个人掌握罢了。假使想查看具体API,能够上合法看看,具体地址为:

 

下边介绍一下调节台的部分急忙键

1、方向键盘的上下键,大家一用就清楚。举个例子用上键就一定于采用上次在调节台的输入符号

2、$_一声令下归来如今二遍表明式实践的结果,成效跟按进步的方向键再回车是平等的

图片 24

上面的$_亟需明白其奥义工夫动用极其,而$0~$4则表示了近年5个你选取过的DOM节点。

怎么样看头?在页面右击选择审查元素,然后在弹出来的DOM结点树下面随意点选,那个被点过的节点会被记录下来,而$0会回到近来贰次点选的DOM结点,就那样类推,$1再次来到的是一流次点选的DOM节点,最多保留了5个,若是远远不足5个,则赶回undefined

图片 25

3、Chrome 调节台南原生援助类jQuery的采纳器,也便是说你能够用$丰盛纯熟的css选拔器来选用DOM节点

图片 26

4、copy由此此命令能够将要调整台获取到的源委复制到剪贴板

图片 27

(哈哈 刚刚从调节台复制的body里面包车型客车html可以自由粘贴到哪 举个例子记事本  是否感觉功能很强劲)

5、keys和values 前面一个再次回到传入对象具有属性名组成的多少,前者再次来到全体属性值组成的数组

图片 28

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

图片 29

 

 

6、monitor & unmonitor
monitor(function),它接受一个函数名作为参数,比方function a
,每次a
被实践了,都会在调整台出口一条音讯,里面包括了函数的名称a
及推行时所盛传的参数。
而unmonitor(function)就是用来终止这一监听。

14、console.profile和console.profileEnd合作协同行使来查看CPU使用有关新闻

图片 30

世家能够看看调控台里面有一首诗还应该有任何音讯,假如想清中央空调节台,可以点击左上角那多少个

图片 31

最终说一下chrome调控台三个简单的操作,怎么着查看页面成分,看下图就清楚了

15、console.timeLineconsole.timeLineEnd卓绝协同记录一段时间轴
16、console.trace 货仓追踪相关的调节和测量试验
上述方法只是本人个人精通罢了。倘若想查看具体API,可以上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api
调整台的有个别火速键
1、方向键盘的上下键,大家一用就清楚。比如用上键就也正是选用上次在调控台的输入符号
2、$_一声令下归来近日一回表明式推行的结果,功能跟按进步的方向键再回车是平等的

图片 32

图片 33

%o占位符,能够用来查阅一个对象内幕
var dog = {};dog.name = "大毛";dog.color = "黄色";console.log("%o", dog);

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

提及那,不免想起console.table方法了

3、Chrome 调整高雄原生协理类jQuery的选择器,相当于说你能够用$
增多领会的css选拔器来挑选DOM节点

图片 34

上面的$_
急需精晓其奥义才具选拔方便,而0
4则意味了最近5个你选取过的DOM节点。
怎样意思?在页面右击选拔检查核对成分
,然后在弹出来的DOM结点树下面随意点选,那个被点过的节点会被记录下来,而$0
会重回目前二回点选的DOM结点,依此类推,$1重返的是极品次点选的DOM节点,最多保留了5个,假使相当不足5个,则重返undefined

12、console.time 计时伊始
13、console.timeEnd 计时截至(看了上边包车型地铁图你弹指间就感受到它的决意了)

2、利用调节台出口图片


图片 35

图片 36

图片 37

图片 38

图片 39

图片 40

(哈哈 刚刚从调节台复制的body里面包车型地铁html能够恣心所欲粘贴到哪, 比如记事本, 是否以为功用很有力)
5、keys和values前者重临传入对象具有属性名组成的数码,前者重临全数属性值组成的数组

图片 41

看了上边那张图,是还是不是认知到log的雄强之处了,下边大家来探视console里面具体提供了怎么措施可以供大家一向调节和测量检验时行使。

图片 42

图片 43

图片 44


11、console.dir(这些点子是本身平日使用的 可不知道比for in方便了略微)间接将该DOM结点以DOM树的构造进行输出,能够详细核查象的措施发展等等

7、console.group出口一组音讯的起来
8、console.groupEnd甘休一组输出音信
看您必要采取分歧的输出方法来使用,要是上述多个法子再合营group和groupEnd方法来一同行使就能够输入精彩纷呈的不如款式的出口音讯。

图片 45

图片 46

10、console.count(这一个艺术十三分实用哦)当您想总结代码被实施的次数


上面看一下console.log的有的本事
1、重写console.log 退换输出文字的样式

图片 47

图片 48

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>

前段时间调整台方法和总体性有:
["$$", "$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用于出口调节和测验新闻
用图来发话

图片 49

看了那张图,应该了解了,也正是说在monitor和unmonitor中间的代码,实施的时候会在决定台出口一条音信,里面包蕴了函数的名称a
及实践时所传颂的参数。当撤销监视(也正是实施unmonitor时)就不再在决定台出口新闻了。
$ // 轻松驾驭正是 document.querySelector 而已。
$$ // 轻巧了然正是 document.querySelectorAll 而已。
$_ // 是上二个表达式的值
0−
4 // 是前段时间5个Elements面板选中的DOM成分,待会会讲。
dir // 其实就是 console.dir
keys // 取对象的键名, 重返键名组成的数组
values // 去对象的值, 再次来到值组成的数组

图片 50

图片 51

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

3、钦定输出文字的体裁

哈哈哈,是否以为很神奇啊!
9、console.assert对输入的表明式进行预见,只有表明式为false时,才输出相应的信息到调节台

来清空,当然也足以因此在调控台输入console.clear()来促成清空气调节器控台新闻。如下图所示

图片 52

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

在Profiles面板里面查看就足以见到cpu相关应用音信

图片 53

图片 54

于今一旦四个情景,借使二个数组里面有好些个的成分,不过你想了然种种成分具体的值,那时候想想假诺你用alert那将是多惨的一件业务,因为alert阻断线程运转,你不点击alert框的规定开关下一个alert就不会见世。
下边我们用console.log来替换,感受一下它的吸重力。

console对象的地点5种格局,都足以采纳printf风格的占位符。不过,占位符的连串相当少,只援救字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)种种。
console.log("%d年%d月%d日",二〇一三,3,26);console.log("圆周率是%f",3.1415926);

图片 55

本文由澳门新葡8455手机版发布于澳门新葡8455最新网站,转载请注明出处:让您爱上console.log

关键词: