开发者工具使用,javascript代码调节和测试之console

Chrome 控制台console的用法

2015/01/12 · JavaScript
· Chrome

初稿出处:
ctriphire   

世家都有用过各体系型的浏览器,每一种浏览器都有协调的特征,自个儿拙见,在本人用过的浏览器个中,小编是最喜爱Chrome的,因为它对于调节和测试脚本及前端设计调节和测试都有它比别的浏览器有过之而无比不上的地方。可能大家对console.log会有早晚的问询,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出新闻吗,上面小编就介绍一些调剂的入门技巧,让您爱上console.log

先的简短介绍一下chrome的控制台,打开chrome浏览器,按f12就足以轻松的开拓控制台

www.301.net 1

大家能够看来控制台里面有一首诗还有其余新闻,假使想清空控制台,能够点击左上角那多少个www.301.net 2来清空,当然也能够通过在支配台输入console.clear()来落到实处清空控制台音信。如下图所示

www.301.net 3

今后若是二个景象,假诺四个数组里面有不少的要素,可是你想精晓各类成分具体的值,那时候想想假诺您用alert那将是多惨的一件工作,因为alert阻断线程运维,你不点击alert框的规定按钮下三个alert就不会油可是生。

上边大家用console.log来替换,感受一下它的吸重力。

www.301.net 4

看了下边那张图,是还是不是认识到log的无敌之处了,上边大家来探望console里面具体提供了怎么措施可以供大家一贯调节和测试时行使。

www.301.net 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用来出口调试音信

用图来讲话

www.301.net 6

console对象的地方5种办法,都可以应用printf风格的占位符。但是,占位符的门类比较少,只辅助字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)七种

JavaScript

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

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

www.301.net 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);

www.301.net 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>

www.301.net 9

7、console.group出口一组消息的伊始

8、console.groupEnd终结一组输出新闻

看你须求选取分裂的出口方法来利用,如若上述五个法子再合营group和groupEnd方法来1只行使就足以输入各个各个的不等款式的输出音信。

www.301.net 10

哈哈哈,是还是不是认为很神奇啊!

9、console.assert对输入的表明式进行预知,唯有表达式为false时,才输出相应的音讯到控制台

www.301.net 11

10、console.count(那一个措施足够实用哦)当你想总计代码被实践的次数

www.301.net 12

11、console.dir(那几个主意是本人每每使用的 可不知道比for
in方便了不怎么) 直接将该DOM结点以DOM树的协会进行输出,能够详细核查象的点子发展等等

www.301.net 13

12、console.time 计时始于

13、console.timeEnd  计时截至(看了下边包车型大巴图你弹指间就感受到它的决意了)

www.301.net 14

14、console.profileconsole.profileEnd非常共同使用来查看CPU使用有关音信

www.301.net 15

在Profiles面板里面查看就可以见见cpu相关应用消息

www.301.net 16

15、console.timeLineconsole.timeLineEnd非常共同记录一段时间轴

16、console.trace  堆栈跟踪相关的调节和测试

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

 

上边介绍一下控制台的一对快捷键

① 、方向键盘的上下键,我们一用就理解。比如用上键就一定于选拔上次在控制台的输入符号

2、$_一声令下归来方今2次表明式执行的结果,作用跟按升高的方向键再回车是一律的

www.301.net 17

上面的$_亟待驾驭其奥义才能采取合适,而$0~$4则表示了多年来四个你挑选过的DOM节点。

怎样意思?在页面右击选用审查元素,然后在弹出来的DOM结点树下面随便点选,那几个被点过的节点会被记录下来,而$0会回到方今2遍点选的DOM结点,以此类推,$1再次回到的是一流次点选的DOM节点,最多保留了七个,要是不够多少个,则赶回undefined

www.301.net 18

③ 、Chrome
控制马尔默原生帮忙类jQuery的采取器
,也正是说你能够用$增进熟练的css选用器来挑选DOM节点

www.301.net 19

4、copy透过此命令能够将在控制台获取到的剧情复制到剪贴板

www.301.net 20

(哈哈 刚刚从控制台复制的body里面的html能够轻易粘贴到哪 比如记事本
 是还是不是认为功能很强大)

5、keys和values 前者再次回到传入对象具备属性名组成的数目,后者再次来到全部属性值组成的数组

www.301.net 21

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

www.301.net 22

 

 

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

javascript代码调节和测试之console.log 用法图像和文字详解,javascriptconsole

世家都有用过各种类型的浏览器,每个浏览器都有协调的特征,本身拙见,在本身用过的浏览器当中,作者是最喜悦Chrome的,因为它对于调试脚本及前端设计调节和测试都有它比别的浏览器有过之而无不如的地点。也许我们对console.log会有早晚的问询,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出消息吗,下边小编就介绍部分调剂的入门技巧,让您爱上console.log

先的回顾介绍一下chrome的控制台,打开chrome浏览器,按f12就足以轻松的开拓控制台

www.301.net 23

世家能够看到控制台里面有一首诗还有任何音讯,假诺想清空控制台,能够点击左上角这几个www.301.net 24来清空,当然也能够因而在支配台输入console.clear()来落实清空控制台信息。如下图所示

www.301.net 25

明日即使一个风貌,倘使三个数组里面有过多的要素,可是你想精晓各类成分具体的值,那时候想想若是您用alert那将是多惨的一件工作,因为alert阻断线程运营,你不点击alert框的明显按钮下1个alert就不会师世。

下边我们用console.log来替换,感受一下它的魔力。

www.301.net 26

看了上边这张图,是还是不是认识到log的强大之处了,下边大家来探视console里面具体提供了怎么着措施能够供大家向来调节和测试时行使。

www.301.net 27

脚下控制台方法和性质有:

[“$$”, “$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用于出口调节和测试消息

用图来发话

www.301.net 28

console对象的上边5种艺术,都足以选取printf风格的占位符。可是,占位符的体系相比较少,只帮忙字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)多种

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

www.301.net 29

%o占位符,能够用来查看四个目的内部景色

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

www.301.net 30

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

www.301.net 31

7、console.group出口一组音讯的初始

8、console.groupEnd终结一组输出消息

看你须求采用分裂的出口方法来采用,假如上述多少个法子再合作group和groupEnd方法来一起行使就足以输入各类各种的不等款式的出口音信。

www.301.net 32

哈哈,是还是不是认为很神奇啊!

9、console.assert对输入的表明式举行预见,只有表达式为false时,才输出相应的新闻到控制台

www.301.net 33

10、console.count(这些点子足够实用哦)当您想总计代码被实践的次数

www.301.net 34

11、console.dir(这一个方式是小编不时使用的 可不知道比for
in方便了稍稍)直接将该DOM结点以DOM树的构造举办输出,能够详细核对象的点子提升等等

www.301.net 35

12、console.time 计时起来

13、console.timeEnd 计时甘休(看了上面包车型地铁图你瞬间就感受到它的决定了)

www.301.net 36

14、console.profileconsole.profileEnd匹配共同利用来查阅CPU使用相关音信

www.301.net 37

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

www.301.net 38

15、console.timeLineconsole.timeLineEnd匹配协同记录一段时间轴

16、console.trace 堆栈跟踪相关的调节和测试

上述方法只是自己个人通晓罢了。若是想查看具体API,可以上合法看看,具体地址为:

控制台的部分火速键

壹 、方向键盘的上下键,我们一用就清楚。比如用上键就一定于采取上次在控制台的输入符号

2、$_命令归来方今二次表达式执行的结果,作用跟按提升的方向键再回车是均等的

www.301.net 39

上面的$_必要精通其奥义才能使用合适,而$0~$4则代表了不久前5个你挑选过的DOM节点。

怎样看头?在页面右击选用审查元素,然后在弹出来的DOM结点树下面随便点选,那么些被点过的节点会被记录下来,而$0会回来近来2次点选的DOM结点,以此类推,$1再次来到的是一级次点选的DOM节点,最多保留了多少个,假若不够陆个,则赶回undefined

www.301.net 40

叁 、Chrome
控制长沙原生支持类jQuery的选拔器
,也正是说你能够用$充分纯熟的css选用器来摘取DOM节点

www.301.net 41

4、copy经过此命令能够将在控制台获取到的始末复制到剪贴板

www.301.net 42

(哈哈 刚刚从控制台复制的body里面的html能够自由粘贴到哪, 比如记事本,
是还是不是觉得成效很强劲)

5、keys和values前者重临传入对象拥有属性名组成的多寡,后者重回全体属性值组成的数组

www.301.net 43

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

www.301.net 44

6、monitor & unmonitor

monitor(function),它接受2个函数名作为参数,比如function a,每次a被执行了,都会在决定台出口一条音信,里面富含了函数的名号a及执行时所传诵的参数。

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

www.301.net 45

看了那张图,应该掌握了,也正是说在monitor和unmonitor中间的代码,执行的时候会在支配台出口一条音信,里面含有了函数的名目a及执行时所传诵的参数。当免除监视(也正是实践unmonitor时)就不再在支配台出口消息了。

$ // 简单明了就是 document.querySelector 而已。$$ // 不难明了就是document.querySelectorAll 而已。$_ // 是上3个表明式的值$0-$4 //
是近来八个Elements面板选中的DOM元素,待会会讲。dir // 其实正是console.dirkeys // 取对象的键名, 重返键名组成的数组values // 去对象的值,
重返值组成的数组

上面看一下console.log的一部分技能

一 、重写console.log 改变输出文字的样式

www.301.net 46

二 、利用控制台出口图片

www.301.net 47

③ 、钦点输出文字的体制

www.301.net 48

终极说一下chrome控制台三个差不多的操作,怎样查看页面成分,看下图就通晓了

www.301.net 49

你在支配台不难操作三回就知道了,是或不是认为很简短!

用法图像和文字详解,javascriptconsole
大家都有用过各种类型的浏览器,种种浏览器都有协调的特征,本身拙见,在自笔者用…

6、monitor & unmonitor

monitor(function),它接受一个函数名作为参数,比如function a,每次a被执行了,都会在支配台出口一条音讯,里面含有了函数的称呼a及进行时所传颂的参数。

www.301.net,而unmonitor(function)就是用来终止这一监听。

www.301.net 50

看了那张图,应该驾驭了,也正是说在monitor和unmonitor中间的代码,执行的时候会在控制台出口一条新闻,里面包罗了函数的称号a及进行时所传颂的参数。当免除监视(也正是推行unmonitor时)就不再在控制台出口新闻了。

JavaScript

$ // 不难明了正是 document.querySelector 而已。 $$ // 不难明了正是document.querySelectorAll 而已。 $_ // 是上三个表明式的值 $0-$4 //
是多年来四个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的一部分技能

壹 、重写console.log 改变输出文字的体裁

www.301.net 51

二 、利用控制台出口图片

www.301.net 52

③ 、钦点输出文字的样式

www.301.net 53

终极说一下chrome控制台八个简易的操作,怎样查看页面元素,看下图就了然了

www.301.net 54

你在控制台简单操作一回就知道了,是还是不是认为很简单!

赞 6 收藏
评论

www.301.net 55


先的简约介绍一下chrome的控制台,打开chrome浏览器,按f12就能够轻松的打开控制台

www.301.net 56

大家能够看来控制台里面有一首诗还有别的消息,若是想清空控制台,能够点击左上角那1个

www.301.net 57

来清空,当然也得以经过在决定台输入console.clear()来兑现清空控制台音信。如下图所示

www.301.net 58

未来假诺2个景色,假若叁个数组里面有不少的要素,不过你想清楚各种成分具体的值,那时候想想假使您用alert那将是多惨的一件业务,因为alert阻断线程运营,你不点击alert框的鲜明按钮下一个alert就不会见世。
上边大家用console.log来替换,感受一下它的吸重力。

www.301.net 59

看了下面那张图,是不是认识到log的无敌之处了,下边大家来探望console里面具体提供了怎样措施能够供大家一贯调节和测试时选取。

www.301.net 60

最近控制台方法和总体性有:
[“$$”, “$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用来出口调节和测试新闻
用图来讲话


www.301.net 61

console对象的方面5种艺术,都得以动用printf风格的占位符。可是,占位符的项目相比少,只帮衬字符(%s)、整数(%d或%i)、浮点数(%f)和指标(%o)各种。
console.log(“%d年%d月%d日”,二零一二,3,26);console.log(“圆周率是%f”,3.1415926);

www.301.net 62

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

www.301.net 63

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>

www.301.net 64

7、console.group出口一组新闻的发端
8、console.groupEnd终止一组输出音信
看您需求选用差异的出口方法来使用,如若上述多个方式再合作group和groupEnd方法来一块使用就足以输入各类各个的分裂式样的输出新闻。

www.301.net 65

嘿嘿,是还是不是觉得很神奇啊!
9、console.assert对输入的表明式实行预感,唯有表明式为false时,才输出相应的音信到控制台

www.301.net 66

10、console.count(那么些方法十三分实用哦)当您想总括代码被执行的次数

www.301.net 67

11、console.dir(那一个主意是自小编时常应用的 可不知道比for
in方便了有点)直接将该DOM结点以DOM树的组织进行输出,能够详细核对象的法门发展等等

www.301.net 68

12、console.time 计时开首
13、console.timeEnd
计时甘休(看了上面包车型大巴图你刹那间就感受到它的立意了)


www.301.net 69

14、console.profile和console.profileEnd协作协同使用来查阅CPU使用相关新闻

www.301.net 70

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

www.301.net 71

15、console.timeLineconsole.timeLineEnd至极协同记录一段时间轴
16、console.trace 堆栈跟踪相关的调节和测试
上述措施只是自身个人知道罢了。要是想查看具体API,能够上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api
控制台的一对快速键
① 、方向键盘的上下键,大家一用就理解。比如用上键就一定于采纳上次在控制台的输入符号
2、$_指令归来近来3回表明式执行的结果,成效跟按升高的方向键再回车是相同的

www.301.net 72

上面的$_
急需精晓其奥义才能动用优异,而0
4则意味了近日4个你挑选过的DOM节点。
怎么着意思?在页面右击选拔审查成分
,然后在弹出来的DOM结点树下面随便点选,这一个被点过的节点会被记录下来,而$0
会回到方今1回点选的DOM结点,以此类推,$1重返的是一流次点选的DOM节点,最多保留了两个,即使不够多少个,则再次回到undefined

www.301.net 73

叁 、Chrome 控制哈博罗内原生支持类jQuery的选用器,相当于说你能够用$
添加熟练的css选用器来选拔DOM节点

www.301.net 74

4、copy因而此命令能够将在控制台获取到的剧情复制到剪贴板

www.301.net 75

(哈哈 刚刚从控制台复制的body里面的html可以肆意粘贴到哪, 比如记事本,
是还是不是认为功效很强大)
5、keys和values前者重返传入对象拥有属性名组成的数额,后者重回所有属性值组成的数组

www.301.net 76

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

www.301.net 77

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

www.301.net 78

看了那张图,应该明了了,也正是说在monitor和unmonitor中间的代码,执行的时候会在控制台出口一条信息,里面包括了函数的名称a
及进行时所传颂的参数。当免除监视(约等于推行unmonitor时)就不再在控制台出口音信了。
$ // 简单驾驭便是 document.querySelector 而已。
$$ // 简单精通正是 document.querySelectorAll 而已。
$_ // 是上一个表达式的值
0−
4 // 是近日5个Elements面板选中的DOM成分,待会会讲。
dir // 其实正是 console.dir
keys // 取对象的键名, 重返键名组成的数组
values // 去对象的值, 重回值组成的数组

下边看一下console.log的部分技术
一 、重写console.log 改变输出文字的体制

www.301.net 79

② 、利用控制台出口图片

www.301.net 80

三 、钦定输出文字的体裁

www.301.net 81

末尾说一下chrome控制台二个简单的操作,怎么着查看页面成分,看下图就知道了

www.301.net 82

Post Author: admin

发表评论

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