开拓者工具使用

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(那么些格局丰富实用哦卡塔尔国当你想总结代码被实行的次数

皇家赌场手机版 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的用法

先前不精晓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

大家都有用过种种类型的浏览器,每个浏览器都有谈得来的性状,本身拙见,在自己用过的浏览器个中,作者是最兴奋Chrome的,因为它对于调节和测验脚本及前端设计调节和测量检验都有它比别的浏览器过为已甚的地点。恐怕大家对console.log会有分明的摸底,心里难免会想调节和测量检验的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出音讯呢,下边笔者就介绍部分调解的入门本领,令你喜欢上console.log

世家能够看看调节台里面有大器晚成首诗还应该有其余音信,如若想清空气调节器整台,能够点击左上角这个

先的简短介绍一下chrome的调节台,展开chrome浏览器,按f12就足以轻易的开发调控台

皇家赌场手机版 30

皇家赌场手机版 31

来清空,当然也能够因此在决定台输入console.clear()来落实清中央空调节台消息。如下图所示

世家能够观看调节台里面有后生可畏首诗还应该有此外音讯,假使想清中央空调整台,能够点击左上角那个皇家赌场手机版 32来清空,当然也足以透过在调节台输入console.clear()来促成清中央空调节台音讯。如下图所示

皇家赌场手机版 33

皇家赌场手机版 34

前天倘若三个光景,即使三个数组里面有不菲的因素,可是你想知道种种成分具体的值,此时动脑假若您用alert那将是多惨的少年老成件工作,因为alert阻断线程运转,你不点击alert框的分明开关下一个alert就不会并发。
上面大家用console.log来替换,体会一下它的魔力。

当今只要多少个情形,借使八个数组里面有为数不菲的要素,可是你想知道各类成分具体的值,那个时候出主意如若你用alert这将是多惨的意气风发件工作,因为alert阻断线程运维,你不点击alert框的规定按键下三个alert就不会师世。

皇家赌场手机版 35

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

看了上面那张图,是否认识到log的强盛之处了,上边大家来走访console里面具体提供了何等方法可以供大家一直调节和测量检验时选取。

皇家赌场手机版 36

皇家赌场手机版 37

看了下边那张图,是或不是意识到log的雄强之处了,上边我们来拜候console里面具体提供了怎么着措施能够供大家平素调试时利用。

脚下调整台方法和总体性有:
[“$$”, “$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用于出口调节和测量检验新闻
用图来发话

皇家赌场手机版 38


这两天调节台方法和品质有:

皇家赌场手机版 39

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

console对象的方面5种办法,都得以动用printf风格的占位符。不过,占位符的档案的次序少之又少,只帮衬字符(%s卡塔尔国、整数(%d或%i卡塔尔国、浮点数(%f卡塔尔国和对象(%o卡塔 尔(阿拉伯语:قطر‎五种。
console.log(“%d年%d月%d日”,二零一一,3,26);console.log(“圆周率是%f”,3.1415926);

上边大家来挨门逐户介绍一下顺序艺术首要的用处。

皇家赌场手机版 40

貌似意况下咱们用来输入信息的艺术主倘若用到如下多少个

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

1、console.log 用于出口普通新闻

皇家赌场手机版 41

2、console.info 用于出口提醒性音信

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>

3、console.error用于出口错误音讯

皇家赌场手机版 42

4、console.warn用于出口警报音信

7、console.group输出意气风发组消息的起来
8、console.groupEnd甘休生机勃勃组输出消息
看你须要接纳区别的出口方法来利用,假若上述八个章程再合营group和groupEnd方法来一同使用就足以输入多姿多彩的不等款式的出口音讯。

5、console.debug用于出口调节和测量检验新闻

皇家赌场手机版 43

用图来讲话

哈哈,是还是不是感到极漂亮妙啊!
9、console.assert对输入的表明式实行预见,唯有表明式为false时,才输出相应的音讯到调节台

皇家赌场手机版 44

皇家赌场手机版 45

console对象的下面5种办法,都得以动用printf风格的占位符。可是,占位符的连串很少,只协助字符(%s卡塔尔国、整数(%d或%i卡塔尔、浮点数(%f卡塔尔国和对象(%o卡塔尔多种。

10、console.count(那个措施丰裕实用哦卡塔尔当您想总计代码被实行的次数

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

皇家赌场手机版 46

皇家赌场手机版 47

11、console.dir(这些办法是本人平日利用的 可不知道比for
in方便了有些)直接将该DOM结点以DOM树的结构举办输出,能够详细核查象的秘籍发展等等

%o占位符,能够用来查看三个指标内部景色

皇家赌场手机版 48

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

12、console.time 计时初阶
13、console.timeEnd
计时甘休(看了上边包车型的士图你弹指间就心得到它的立意了卡塔尔

皇家赌场手机版 49


6、console.dirxml用来显示网页的某部节点(node卡塔 尔(英语:State of Qatar)所包涵的html/xml代码

皇家赌场手机版 50

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

14、console.profile和console.profileEnd协作协同利用来查看CPU使用有关音讯

皇家赌场手机版 51

皇家赌场手机版 52

7、console.group输出生机勃勃组音信的起头

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

8、console.groupEnd结束意气风发组输出音讯

皇家赌场手机版 53

看你供给接收差别的出口方法来利用,若是上述多少个办法再协作group和groupEnd方法来协作使用就足以输入五花八门的两样样式的输出音信。

15、console.timeLineconsole.timeLineEnd相称协作记录风流罗曼蒂克段时间轴
16、console.trace 仓库追踪相关的调治将养
上述方法只是本身个人精通罢了。倘若想查看具体API,能够上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api
调控台的生机勃勃部分快速键
1、方向键盘的上下键,我们后生可畏用就理解。举例用上键就相当于选用上次在调节台的输入符号
2、$_一声令下归来近来一遍表明式实践的结果,功用跟按升高的方向键再回车是意气风发律的

皇家赌场手机版 54

皇家赌场手机版 55

嘿嘿,是否以为很奇妙啊!

上面的$_
急需通晓其奥义本领接收方便,而0
4则意味了近年5个你筛选过的DOM节点。
怎么样意思?在页面右击选取核实成分
,然后在弹出来的DOM结点树上边随意点选,那个被点过的节点会被记录下来,而$0
会返回近期壹次点选的DOM结点,依此类推,$1重回的是最好次点选的DOM节点,最多保留了5个,假若相当不足5个,则重返undefined

9、console.assert对输入的表达式进行预知,唯有表达式为false时,才输出相应的新闻到调整台

皇家赌场手机版 56

皇家赌场手机版 57

3、Chrome 调控台中原生协助类jQuery的选用器,也等于说你能够用$
加上纯熟的css选取器来筛选DOM节点

10、console.count(这些形式十三分实用哦卡塔尔当你想计算代码被推行的次数

皇家赌场手机版 58

皇家赌场手机版 59

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

11、console.dir(那一个法子是自家不常应用的 可不知道比for in方便了微微)
间接将该DOM结点以DOM树的布局举行输出,能够详细核查象的秘诀升高端等

皇家赌场手机版 60

皇家赌场手机版 61

(哈哈 刚刚从调整台复制的body里面包车型客车html能够随意粘贴到哪, 举例记事本,
是或不是感觉作用很有力卡塔 尔(阿拉伯语:قطر‎
5、keys和values前面二个重返传入对象具有属性名组成的数据,后面一个再次回到全数属性值组成的数组

12、console.time 计时起头

皇家赌场手机版 62

13、console.timeEnd 计时甘休(看了下边包车型地铁图你弹指间就心得到它的决定了卡塔 尔(阿拉伯语:قطر‎

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

皇家赌场手机版 63

皇家赌场手机版 64

14、console.profile和console.profileEnd合作合作利用来查看CPU使用相关新闻

6、monitor & unmonitor
monitor(function),它选择四个函数名作为参数,比方function a
,每次a
被实行了,都会在支配台出口一条音讯,里面含有了函数的名称a
及进行时所传颂的参数。
而unmonitor(function)就是用来终止这一监听。

皇家赌场手机版 65

皇家赌场手机版 66

在Profiles面板里面查看就能够看出cpu相关应用新闻

看了那张图,应该掌握了,也便是说在monitor和unmonitor中间的代码,推行的时候会在支配台出口一条音讯,里面含有了函数的名称a
及实行时所盛传的参数。当撤废监视(相当于实行unmonitor时卡塔尔国就不再在决定台出口音信了。
$ // 容易精晓就是 document.querySelector 而已。
$$ // 简单驾驭正是 document.querySelectorAll 而已。
$_ // 是上七个表明式的值
0−
4 // 是近年来5个Elements面板选中的DOM成分,待会会讲。
dir // 其实正是 console.dir
keys // 取对象的键名, 再次来到键名组成的数组
values // 去对象的值, 重临值组成的数组

皇家赌场手机版 67

上面看一下console.log的一些技巧
1、重写console.log 更改输出文字的体制

15、console.timeLine和console.timeLineEnd合营合作记录后生可畏段时间轴

皇家赌场手机版 68

16、console.trace 仓库追踪相关的调节和测量检验

2、利用调节台出口图片

上述办法只是自作者个人知道罢了。若是想查看具体API,能够上合法看看,具体地址为:

皇家赌场手机版 69

 

3、钦定输出文字的体裁

下边介绍一下调控台的后生可畏都部队分快捷键

皇家赌场手机版 70

1、方向键盘的上下键,我们后生可畏用就领会。比方用上键就一定于选取上次在调节台的输入符号

最后说一下chrome调控台三个简便的操作,怎样查看页面元素,看下图就知晓了

2、$_指令归来近日三回表达式实施的结果,功用跟按升高的方向键再回车是均等的

皇家赌场手机版 71

皇家赌场手机版 72

上面的$_急需领会其奥义才具动用特别,而$0~$4则意味了近年5个你筛选过的DOM节点。

什么样看头?在页面右击接纳调查成分,然后在弹出来的DOM结点树上边随意点选,这一个被点过的节点会被记录下来,而$0会回来最近一回点选的DOM结点,依此类推,$1重回的是拔尖次点选的DOM节点,最多保留了5个,若是非常不够5个,则重回undefined。

皇家赌场手机版 73

3、Chrome
调控新竹原生帮助类jQuery的选用器,也正是说你能够用$加上熟习的css采取器来抉择DOM节点

皇家赌场手机版 74

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

皇家赌场手机版 75

(哈哈 刚刚从调控台复制的body里面的html能够随性所欲粘贴到哪 比方记事本
是还是不是以为功效很有力卡塔 尔(英语:State of Qatar)

5、keys和values 后边贰个重返传入对象具备属性名组成的多寡,后面一个重回全部属性值组成的数组

皇家赌场手机版 76

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

皇家赌场手机版 77

 

 

6、monitor & unmonitor

monitor(function),它采用一个函数名作为参数,比方function
a,每一回a被实践了,都会在调控台出口一条新闻,里面满含了函数的名称a及实行时所传诵的参数。

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

皇家赌场手机版 78

看了那张图,应该明了了,也正是说在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 校订输出文字的体制

皇家赌场手机版 79

2、利用调控台出口图片

皇家赌场手机版 80

3、钦点输出文字的样式

皇家赌场手机版 81

终极说一下chrome调节台二个轻易易行的操作,怎样查看页面成分,看下图就精晓了

皇家赌场手机版 82

您在调整台轻便操作三回就领会了,是否感到很简短!

 

Leave a Comment.