图片 34

开发者工具使用

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卡塔尔、整数(%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(那么些方式足够实用哦卡塔 尔(英语:State of Qatar)当您想总计代码被实践的次数

图片 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时卡塔 尔(英语:State of Qatar)就不再在支配台出口新闻了。

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卡塔 尔(英语:State of Qatar)、浮点数(%f卡塔尔国和对象(%o卡塔尔国二种。
console.log(“%d年%d月%d日”,2012,3,26);console.log(“圆周率是%f”,3.1415926);

图片 35

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

图片 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>

图片 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
计时甘休(看了上边包车型大巴图你须臾间就心获得它的立意了卡塔 尔(英语:State of Qatar)


图片 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能够无约束粘贴到哪, 比方记事本,
是否认为成效很强盛卡塔 尔(英语:State of Qatar)
5、keys和values前面一个重回传入对象具有属性名组成的数目,前面一个再次来到全数属性值组成的数组

图片 49

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

图片 50

6、monitor & unmonitor
monitor(function),它选拔三个函数名作为参数,例如function a
,每次a
被实施了,都会在支配台出口一条新闻,里面含有了函数的名称a
及实行时所传诵的参数。
而unmonitor(function)就是用来终止这一监听。

图片 51

看了那张图,应该知道了,也正是说在monitor和unmonitor中间的代码,试行的时候会在决定台出口一条消息,里面富含了函数的名称a
及试行时所传颂的参数。当裁撤监视(也等于实践unmonitor时卡塔 尔(英语:State of Qatar)就不再在决定台出口音信了。
$ // 简单掌握正是 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

发表评论

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