澳门金莎娱乐手机版 Web前端 让你爱上console.log

让你爱上console.log



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

现今即便贰个意况,若是四个数组里面有过多的要素,不过你想驾驭各种成分具体的值,那时候出主意要是您用alert这将是多惨的生龙活虎件业务,因为alert阻断线程运营,你不点击alert框的鲜明开关下多个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卡塔 尔(英语:State of Qatar)、整数(%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,能够上合法看看,具体地址为:

 

上面介绍一下调控台的有的火速键

1、方向键盘的上下键,我们后生可畏用就知晓。比如用上键就约等于采取上次在调整台的输入符号

2、$_一声令下归来近年来二回表明式试行的结果,作用跟按提升的方向键再回车是如出大器晚成辙的

图片 17

上面的$_亟需精晓其奥义技术利用合适,而$0~$4则意味了多年来5个你筛选过的DOM节点。

什么样看头?在页面右击选用审查元素,然后在弹出来的DOM结点树上边随意点选,那么些被点过的节点会被记录下来,而$0会回到近日二次点选的DOM结点,以此类推,$1再次回到的是拔尖次点选的DOM节点,最多保留了5个,假若相当不够5个,则赶回undefined

图片 18

3、Chrome
调整高雄原生帮衬类jQuery的选用器
,相当于说你可以用$加上熟稔的css采纳器来抉择DOM节点

图片 19

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

图片 20

(哈哈 刚刚从调控台复制的body里面包车型地铁html能够随便粘贴到哪 譬喻记事本
 是否感觉成效很强盛卡塔尔

5、keys和values 前者重返传入对象具备属性名组成的数据,前者重回全体属性值组成的数组

图片 21

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

图片 22

 

 

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

6、monitor & unmonitor

monitor(function),它接纳一个函数名作为参数,比如function a,每次a被实行了,都会在决定台出口一条新闻,里面满含了函数的称谓a及施行时所盛传的参数。

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

图片 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 更动输出文字的体裁

图片 24

2、利用调节台出口图片

图片 25

3、钦定输出文字的体裁

图片 26

说起底说一下chrome调整台八个简练的操作,怎么着查看页面成分,看下图就领悟了

图片 27

您在调控台轻松操作一遍就领会了,是否以为比较轻便!

赞 6 收藏
评论

图片 28


先的大约介绍一下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”, “$_”]
下边大家来挨门挨户介绍一下逐项艺术首要的用场。
相符意况下我们用来输入音信的法子首若是用到如下三个
1、console.log 用于出口普通消息
2、console.info 用来出口提醒性音信
3、console.error用于出口错误新闻
4、console.warn用以出口警告消息
5、console.debug用以出口调节和测量检验音信
用图来讲话


图片 34

console对象的地点5种方式,都足以选择printf风格的占位符。可是,占位符的类型超级少,只帮忙字符(%s卡塔 尔(阿拉伯语:قطر‎、整数(%d或%i卡塔尔、浮点数(%f卡塔尔国和对象(%o卡塔 尔(阿拉伯语:قطر‎多样。
console.log(“%d年%d月%d日”,二零一三,3,26);console.log(“圆周率是%f”,3.1415926);

图片 35

%o占位符,可以用来查阅三个目的内部景色
var dog = {};dog.name = “大毛”;dog.color = “黄色”;console.log(“%o”,
dog);

图片 36

6、console.dirxml用来呈现网页的有些节点(node卡塔 尔(英语:State of Qatar)所满含的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

7、console.group出口大器晚成组新闻的初步
8、console.groupEnd终结豆蔻年华组输出音讯
看您供给接受差异的输出方法来使用,假如上述三个法子再同盟group和groupEnd方法来一齐行使就能够输入多姿多彩标比不上款式的出口消息。

图片 38

哈哈,是或不是认为很神奇啊!
9、console.assert对输入的表明式实行预感,唯有表明式为false时,才输出相应的消息到调控台

图片 39

10、console.count(这几个点子丰裕实用哦卡塔 尔(英语:State of Qatar)当您想总计代码被实行的次数

图片 40

11、console.dir(这么些方法是自身时时应用的 可不知道比for
in方便了多少)直接将该DOM结点以DOM树的组织实行输出,能够详细核对象的法子发展等等

图片 41

12、console.time 计时初步
13、console.timeEnd
计时甘休(看了上面包车型客车图你须臾间就心获得它的决心了卡塔尔


图片 42

14、console.profile和console.profileEnd合作合营利用来查阅CPU使用相关消息

图片 43

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

图片 44

15、console.timeLineconsole.timeLineEnd合营合作记录风流倜傥段时间轴
16、console.trace 宾馆追踪相关的调节
上述措施只是本人个人知道罢了。要是想查看具体API,能够上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api
调节台的后生可畏对火速键
1、方向键盘的上下键,大家意气风发用就精晓。举例用上键就相当于接纳上次在调整台的输入符号
2、$_命令归来近期二次表明式实践的结果,成效跟按升高的方向键再回车是同生龙活虎的

图片 45

上面的$_
需求精通其奥义本事运用方便,而0
4则代表了方今5个你筛选过的DOM节点。
什么看头?在页面右击采取核实元素
,然后在弹出来的DOM结点树上面随意点选,这个被点过的节点会被记录下来,而$0
会回到这段时间壹次点选的DOM结点,以此类推,$1再次来到的是顶尖次点选的DOM节点,最多保留了5个,要是远远不足5个,则重临undefined

图片 46

3、Chrome 调节新北原生帮衬类jQuery的选拔器,也正是说你能够用$
加多熟知的css选拔器来抉择DOM节点

图片 47

4、copy通过此命令能够就要调节台获取到的内容复制到剪贴板

图片 48

(哈哈 刚刚从调节台复制的body里面包车型客车html能够随性所欲粘贴到哪, 比如记事本,
是还是不是感到功用很强盛卡塔尔国
5、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的生龙活虎部分技巧
1、重写console.log 改换输出文字的体裁

图片 52

2、利用调整台出口图片

图片 53

3、钦命输出文字的样式

图片 54

终极说一下chrome调整台四个简便的操作,怎么着查看页面成分,看下图就驾驭了

图片 55

标签:

发表评论

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

相关文章

网站地图xml地图