开拓者工具使用

时间:2019-12-10 02:52来源:2020欧洲杯冠军竞猜官方网站
Chrome 控制台console的用法 2015/01/12 · JavaScript· Chrome 原著出处:ctriphire    大家都有用过各种类型的浏览器,种种浏览器都有友好的特点,本身拙见,在本身用过的浏览器个中,笔者是

Chrome 控制台console的用法

2015/01/12 · JavaScript · Chrome

原著出处: ctriphire   

大家都有用过各种类型的浏览器,种种浏览器都有友好的特点,本身拙见,在本身用过的浏览器个中,笔者是最爱怜Chrome的,因为它对于调节和测量检验脚本及前端设计调节和测量试验都有它比其他浏览器过犹不比的地点。大概大家对console.log会有早晚的垂询,心里难免会想调节和测验的时候用alert不就能够了,干嘛还要用console.log这么一长串的字符串来代替alert输出消息呢,上边小编就介绍一些调度的入门才具,令你爱上console.log

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

图片 1

我们能够见到调整台里面有生龙活虎首诗还会有其余音讯,若是想清空气调节器整台,能够点击左上角那多少个图片 2来清空,当然也能够因此在决定台输入console.clear(卡塔尔(英语:State of Qatar)来兑现清空气调节器控台音信。如下图所示

图片 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卡塔尔(英语:State of Qatar);

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方便了有个别卡塔尔(英语:State of Qatar) 直接将该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卡塔尔(英语:State of Qatar)便是用来终止这一监听。

图片 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卡塔尔(英语:State of Qatar);

图片 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(那几个方法十三分实用哦)当您想总结代码被实践的次数

图片 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卡塔尔(英语:State of Qatar)正是用来终止这一监听。

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

编辑:2020欧洲杯冠军竞猜官方网站 本文来源:开拓者工具使用

关键词: 欧洲杯竞猜