用法图文详解,开发者工具使用

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.profile用法图文详解,开发者工具使用。console.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的用法

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

7、console.group出口一组音讯的发端
8、console.groupEnd终结一组输出音信
看你要求选取分裂的出口方法来利用,若是上述七个艺术再协作group和groupEnd方法来一块行使就可以输入各类各个的不同样式的出口新闻。

console对象的方面5种格局,都得以使用printf风格的占位符。但是,占位符的体系相比少,只协助字符(%s)、整数(%d或%i)、浮点数(%f)和目的(%o)四种

亚洲必赢官网 71

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

哈哈,是否认为很神奇啊!
9、console.assert对输入的表明式举办预感,唯有表明式为false时,才输出相应的音信到控制台

亚洲必赢官网 72

亚洲必赢官网 73

%o占位符,可以用来查阅一个对象内部景色

10、console.count(这一个格局充足实用哦)当你想总括代码被实践的次数

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

亚洲必赢官网 74

亚洲必赢官网 75

11、console.dir(这些艺术是我不时使用的 可不知道比for
in方便了略微)直接将该DOM结点以DOM树的布局进行输出,可以详细校对象的主意发展等等

6、console.dirxml用来呈现网页的某部节点(node)所包括的html/xml代码

亚洲必赢官网 76

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

12、console.time 计时开端
13、console.timeEnd
计时停止(看了上边的图你眨眼之间间就感受到它的厉害了)

亚洲必赢官网 77


7、console.group出口一组信息的启幕

亚洲必赢官网 78

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

14、console.profile和console.profileEnd同盟共同使用来查看CPU使用有关音讯

看你需求接纳分歧的出口方法来利用,如若上述多个措施再同盟group和groupEnd方法来一块利用就足以输入种种各种的例外款型的输出新闻。

亚洲必赢官网 79

亚洲必赢官网 80

在Profiles面板里面查看就足以看到cpu相关应用新闻

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

亚洲必赢官网 81

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

15、console.timeLineconsole.timeLineEnd协作协同记录一段时间轴
16、console.trace 堆栈跟踪相关的调剂
上述方式只是我个人精晓罢了。倘若想查看具体API,可以上合法看看,具体地址为:亚洲必赢官网,https://developer.chrome.com/devtools/docs/console-api
控制台的局地疾速键
1、方向键盘的上下键,我们一用就知晓。比如用上键就相当于采用上次在控制台的输入符号
2、$_一声令下归来近日一遍表明式执行的结果,成效跟按升高的方向键再回车是一致的

亚洲必赢官网 82

亚洲必赢官网 83

10、console.count(那一个主意非凡实用哦)当您想统计代码被执行的次数

上面的$_
内需了然其奥义才能运用分外,而0
4则表示了近年来5个你挑选过的DOM节点。
如何意思?在页面右击选拔审查元素
,然后在弹出来的DOM结点树下边随便点选,这一个被点过的节点会被记录下来,而$0
会回到如今两次点选的DOM结点,以此类推,$1重临的是一级次点选的DOM节点,最多保留了5个,假如不够5个,则重临undefined

亚洲必赢官网 84

亚洲必赢官网 85

11、console.dir(那一个法子是自家不时应用的 可不知道比for
in方便了稍稍)直接将该DOM结点以DOM树的组织举办输出,可以详细核对象的点子发展等等

3、Chrome 控制长沙原生协理类jQuery的选用器,也就是说你能够用$
拉长熟习的css接纳器来抉择DOM节点

亚洲必赢官网 86

亚洲必赢官网 87

12、console.time 计时先导

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

13、console.timeEnd 计时停止(看了下边的图你眨眼间间就感受到它的立意了)

亚洲必赢官网 88

亚洲必赢官网 89

(哈哈 刚刚从控制台复制的body里面的html能够随便粘贴到哪, 比如记事本,
是或不是认为功用很有力)
5、keys和values前端重临传入对象具备属性名组成的多少,后者重返所有属性值组成的数组

14、console.profileconsole.profileEnd卓殊共同行使来查阅CPU使用相关新闻

亚洲必赢官网 90

亚洲必赢官网 91

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

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

亚洲必赢官网 92

亚洲必赢官网 93

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

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

亚洲必赢官网 94

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

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

上述措施只是自个儿个人明白罢了。若是想查看具体API,可以上合法看看,具体地址为:

上边看一下console.log的一对技巧
1、重写console.log 改变输出文字的样式

控制台的有的急速键

亚洲必赢官网 95

1、方向键盘的上下键,大家一用就了解。比如用上键就相当于采纳上次在控制台的输入符号

2、利用控制台出口图片

2、$_一声令下归来如今三次表明式执行的结果,成效跟按升高的方向键再回车是同样的

亚洲必赢官网 96

亚洲必赢官网 97

3、指定输出文字的体裁

上面的$_急需明白其奥义才能选拔方便,而$0~$4则意味了方今5个你挑选过的DOM节点。

亚洲必赢官网 98

何以看头?在页面右击选拔审查元素,然后在弹出来的DOM结点树上边随便点选,那个被点过的节点会被记录下来,而$0会重临近日一遍点选的DOM结点,以此类推,$1再次回到的是极品次点选的DOM节点,最多保留了5个,即使不够5个,则赶回undefined

最终说一下chrome控制台一个不难易行的操作,如何查看页面元素,看下图就明白了

亚洲必赢官网 99

亚洲必赢官网 100

3、Chrome
控制西安原生帮助类jQuery的选取器
,也就是说你可以用$增进熟习的css选拔器来挑选DOM节点

亚洲必赢官网 101

4、copy透过此命令可以将在控制台获取到的情节复制到剪贴板

亚洲必赢官网 102

(哈哈 刚刚从控制台复制的body里面的html可以肆意粘贴到哪, 比如记事本,
是或不是觉得功能很有力)

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

亚洲必赢官网 103

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

亚洲必赢官网 104

6、monitor & unmonitor

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

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

亚洲必赢官网 105

看了那张图,应该知道了,也就是说在monitor和unmonitor中间的代码,执行的时候会在支配台出口一条音信,里面含有了函数的称呼a及执行时所盛传的参数。当打消监视(也就是履行unmonitor时)就不再在支配台出口音讯了。

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

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

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

亚洲必赢官网 106

2、利用控制台出口图片

亚洲必赢官网 107

3、指定输出文字的样式

亚洲必赢官网 108

末尾说一下chrome控制台一个简短的操作,怎么样查看页面元素,看下图就通晓了

亚洲必赢官网 109

你在决定台简单操作三回就清楚了,是否觉得很粗略!

您可能感兴趣的稿子:

  • JavaScript
    输出突显内容(document.write、alert、innerHTML、console.log)
  • 运用Js的console对象,在控制台打印调式新闻测试Js的兑现
  • js
    console.log打印对像与数组用法详解
  • javascript中alert()与console.log()的区别
  • JS中捕获console.log()输出的章程
  • JavaScript中的console.dir()函数介绍
  • JavaScript中的console.trace()函数介绍
  • JavaScript中的console.profile()函数详细介绍
  • Javascript的console[””]常用输入方法汇总
网站地图xml地图