菜单

澳门金沙:javascript代码调试之console.log 用法图文详解,javascriptconsole

2019年2月10日 - 金沙前端

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日”,2011,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  堆栈跟踪相关的调试

澳门金沙js55,上述方法只是自己个人明白罢了。若是想查看具体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的用法

javascript代码调试之console.log 用法图文详解,javascriptconsole

世家都有用过各种类型的浏览器,每种浏览器都有温馨的性状,本人拙见,在自己用过的浏览器当中,我是最欢悦Chrome的,因为它对于调试脚本及前端设计调试都有它比任何浏览器有过之而无不及的地点。可能我们对console.log会有必然的摸底,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出新闻吗,上面我就介绍一些调节的入门技巧,让您爱上console.log

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

澳门金沙 23

世家可以见到控制台里面有一首诗还有其余音信,要是想清空控制台,可以点击左上角那么些澳门金沙 24来清空,当然也可以经过在支配台输入console.clear()来落到实处清空控制台音信。如下图所示

澳门金沙 25

当今假诺一个情形,如若一个数组里面有许多的要素,然则你想通晓各种元素具体的值,那时候想想即使您用alert那将是多惨的一件工作,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会并发。

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

澳门金沙 26

看了上边那张图,是不是认识到log的雄强之处了,上边大家来看望console里面具体提供了什么样方法可以供我们一向调试时采纳。

澳门金沙 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用来出口调试新闻

用图来讲话

澳门金沙 28

console对象的地点5种办法,都可以利用printf风格的占位符。然则,占位符的花色比较少,只扶助字符(%s)、整数(%d或%i)、浮点数(%f)和目的(%o)四种

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

澳门金沙 29

%o占位符,能够用来查看一个对象内部意况

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

澳门金沙 30

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>

澳门金沙 31

7、console.group出口一组音信的上马

8、console.groupEnd利落一组输出音信

看你须求采取分歧的出口方法来行使,若是上述三个形式再合作group和groupEnd方法来一头使用就足以输入各个各个的例外款型的输出消息。

澳门金沙 32

嘿嘿,是还是不是觉得很神奇啊!

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

澳门金沙 33

10、console.count(那些办法格外实用哦)当您想计算代码被执行的次数

澳门金沙 34

11、console.dir(那些方式是我时常采纳的 可不知道比for
in方便了有点)直接将该DOM结点以DOM树的构造进行输出,可以详细查对象的法门提升等等

澳门金沙 35

12、console.time 计时上马

13、console.timeEnd 计时甘休(看了下边的图你瞬间就感受到它的立意了)

澳门金沙 36

14、console.profileconsole.profileEnd格外协同行使来查看CPU使用相关音信

澳门金沙 37

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

澳门金沙 38

15、console.timeLineconsole.timeLineEnd合作共同记录一段时间轴

16、console.trace 堆栈跟踪相关的调剂

上述措施只是自身个人精通罢了。借使想查看具体API,能够上合法看看,具体地址为:

控制台的一对疾速键

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

2、$_一声令下归来如今三遍表明式执行的结果,功效跟按进步的方向键再回车是一律的

澳门金沙 39

上面的$_内需通晓其奥义才能运用至极,而$0~$4则象征了如今5个你挑选过的DOM节点。

怎么样意思?在页面右击选取审查元素,然后在弹出来的DOM结点树下面随便点选,这几个被点过的节点会被记录下来,而$0会回去方今三遍点选的DOM结点,以此类推,$1重临的是一流次点选的DOM节点,最多保留了5个,假如不够5个,则赶回undefined

澳门金沙 40

3、Chrome
控制马普托原生扶助类jQuery的接纳器
,也就是说你能够用$拉长熟知的css接纳器来摘取DOM节点

澳门金沙 41

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

澳门金沙 42

(哈哈 刚刚从控制台复制的body里面的html可以随心所欲粘贴到哪, 比如记事本,
是否觉得成效很有力)

5、keys和values前者重回传入对象拥有属性名组成的数目,后者重回所有属性值组成的数组

澳门金沙 43

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

澳门金沙 44

6、monitor & unmonitor

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

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

澳门金沙 45

看了那张图,应该知道了,也就是说在monitor和unmonitor中间的代码,执行的时候会在控制台出口一条新闻,里面包罗了函数的称呼a及执行时所传诵的参数。当免除监视(也就是履行unmonitor时)就不再在支配台出口信息了。

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

下边看一下console.log的一些技艺

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

澳门金沙 46

2、利用控制台出口图片

澳门金沙 47

3、指定输出文字的样式

澳门金沙 48

说到底说一下chrome控制台一个简短的操作,怎么着查看页面元素,看下图就领会了

澳门金沙 49

您在决定台不难操作四遍就明白了,是或不是觉得很粗略!

用法图文详解,javascriptconsole
我们都有用过各连串型的浏览器,每种浏览器都有协调的特征,本人拙见,在本人用…

世家都有用过种种别型的浏览器,每种浏览器都有友好的特点,本人拙见,在自己用过的浏览器当中,我是最喜悦Chrome的,因为它对于调试脚本及前端设计调试都有它比其他浏览器有过之而无不及的地点。可能大家对console.log会有一定的垂询,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出新闻吗,上边我就介绍部分调节的入门技巧,让您爱上console.log

6、monitor & unmonitor

monitor(function),它接受一个函数名作为参数,比如function a,每次a被实践了,都会在控制台出口一条音讯,里面蕴含了函数的称呼a及实施时所传颂的参数。

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

澳门金沙 50

看了那张图,应该了解了,也就是说在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 改变输出文字的体裁

澳门金沙 51

2、利用控制台出口图片

澳门金沙 52

3、指定输出文字的样式

澳门金沙 53

末尾说一下chrome控制台一个粗略的操作,如何查看页面元素,看下图就驾驭了

澳门金沙 54

你在决定台不难操作一次就清楚了,是否觉得很粗略!

赞 6 收藏
评论

澳门金沙 55


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

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

澳门金沙 56

澳门金沙 57

世家能够看到控制台里面有一首诗还有此外新闻,如若想清空控制台,可以点击左上角那些澳门金沙 58来清空,当然也得以透过在决定台输入console.clear()来兑现清空控制台音讯。如下图所示

世家可以见见控制台里面有一首诗还有任何音讯,借使想清空控制台,可以点击左上角那么些

澳门金沙 59

澳门金沙 60

现在一旦一个景观,假使一个数组里面有过多的要素,可是你想领悟各类元素具体的值,这时候想想若是你用alert那将是多惨的一件业务,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会产出。

来清空,当然也得以因此在决定台输入console.clear()来落实清空控制台消息。如下图所示

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

澳门金沙 61

澳门金沙 62

现在一经一个现象,如若一个数组里面有好多的元素,然而你想精晓各类元素具体的值,那时候想想固然你用alert那将是多惨的一件业务,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会冒出。
下边大家用console.log来替换,感受一下它的魅力。

看了地点那张图,是或不是认识到log的强有力之处了,上面大家来看看console里面具体提供了怎样方法可以供大家平常调试时行使。

澳门金沙 63

澳门金沙 64

看了上边那张图,是还是不是认识到log的无敌之处了,上边大家来探视console里面具体提供了哪些措施可以供大家一贯调试时使用。

如今控制台方法和品质有:

澳门金沙 65

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

眼下控制台方法和性质有:
[“$$”, “$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用于出口调试新闻
用图来发话

上边我们来挨家挨户介绍一下逐个艺术首要的用途。


诚如景况下大家用来输入新闻的章程首若是用到如下三个

澳门金沙 66

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

console对象的地方5种艺术,都可以采用printf风格的占位符。然则,占位符的花色相比少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)各样。
console.log(“%d年%d月%d日”,2011,3,26);console.log(“圆周率是%f”,3.1415926);

2、console.info 用来出口提醒性新闻

澳门金沙 67

3、console.error用以出口错误信息

%o占位符,可以用来查看一个目标内部景观
var dog = {};dog.name = “大毛”;dog.color = “黄色”;console.log(“%o”,
dog);

4、console.warn用来出口警示音讯

澳门金沙 68

5、console.debug用以出口调试消息

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>

用图来说话

澳门金沙 69

澳门金沙 70

相关文章

发表评论

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

网站地图xml地图