开发者工具使用

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卡塔 尔(英语:State of Qatar)八种

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日”,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(那个点子丰富实用哦卡塔尔国当您想总计代码被推行的次数

图片 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可以随意粘贴到哪, 比如记事本,
是还是不是感觉效率很有力卡塔尔国
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