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

by admin on 2019年1月31日

Chrome 控制台console的用法

2015/01/12 · JavaScript
· Chrome

原稿出处:
ctriphire   

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

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

必发88 1

大家可以看出控制台里面有一首诗还有其余新闻,假若想清空控制台,可以点击左上角那个必发88 2来清空,当然也足以经过在控制台输入console.clear()来促成清空控制台新闻。如下图所示

必发88 3

现行只要一个场景,纵然一个数组里面有过多的因素,不过你想了解各种元素具体的值,那时候想想假设您用alert那将是多惨的一件事情,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会产出。

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

必发88 4

看了地点那张图,是否认识到log的精锐之处了,上边咱们来探望console里面具体提供了什么样措施可以供大家平时调试时接纳。

必发88 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用来出口警示信息

javascript代码调试之console,开发者工具使用。5、console.debug用以出口调试音讯

用图来说话

必发88 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);

必发88 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);

必发88 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>

必发88 9

7、console.group输出一组音讯的起初

8、console.groupEnd截止一组输出音讯

看您须要采取不一样的输出方法来利用,假如上述多少个艺术再合营group和groupEnd方法来一起使用就足以输入种种各种的不等款型的输出音信。

必发88 10

嘿嘿,是否觉得很神奇啊!

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

必发88 11

10、console.count(这一个办法相当实用哦)当你想总计代码被执行的次数

必发88 12

11、console.dir(这么些艺术是本人平时利用的 可不知道比for
in方便了略微) 直接将该DOM结点以DOM树的结构举办输出,可以详细核查象的方法发展等等

必发88 13

12、console.time 计时开首

13、console.timeEnd  计时停止(看了上面的图你刹那间就感受到它的立意了)

必发88 14

14、console.profileconsole.profileEnd同盟协同行使来查看CPU使用有关音信

必发88 15

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

必发88 16

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

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

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

 

下边介绍一下控制台的一些飞快键

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

2、$_指令归来近来五遍表明式执行的结果,成效跟按进步的方向键再回车是同等的

必发88 17

上面的$_亟需驾驭其奥义才能运用方便,而$0~$4则意味着了近期5个你选拔过的DOM节点。

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

必发88 18

3、Chrome
控制纽伦堡原生辅助类jQuery的选用器
,也就是说你可以用$添加熟知的css选用器来接纳DOM节点

必发88 19

4、copy因此此命令可以将在控制台获取到的始末复制到剪贴板

必发88 20

(哈哈 刚刚从控制台复制的body里面的html可以任意粘贴到哪 比如记事本
 是否认为作用很强劲)

5、keys和values 前者重临传入对象具备属性名组成的多少,后者重临所有属性值组成的数组

必发88 21

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

必发88 22

 

 

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

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

我们都有用过各种别型的浏览器,每种浏览器都有投机的特色,本人拙见,在自我用过的浏览器当中,我是最欢快Chrome的,因为它对于调试脚本及前端设计调试都有它比此外浏览器有过之而无不及的地点。可能大家对console.log会有必然的打听,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,上面我就介绍部分调节的入门技巧,让您爱上console.log

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

必发88 23

世家可以见见控制台里面有一首诗还有别的音讯,若是想清空控制台,可以点击左上角那些必发88 24来清空,当然也得以经过在决定台输入console.clear()来促成清空控制台新闻。如下图所示

必发88 25

当今如若一个气象,即使一个数组里面有无数的因素,但是你想精通各种元素具体的值,那时候想想如果您用alert这将是多惨的一件工作,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会冒出。

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

必发88 26

看了上面那张图,是否认识到log的强有力之处了,上面大家来探视console里面具体提供了哪些措施可以供我们日常调试时利用。

必发88 27

眼下控制台方法和总体性有:

[“$$”, “$x”, “dir”, “dirxml”, “keys”, “values”, “profile”,
“profileEnd”, “monitorEvents”, “unmonitorEvents”, “inspect”, “copy”,
“clear”, “getEventListeners”, “undebug”, “monitor”, “unmonitor”,
“table”, “$0”, “$1”, “$2”, “$3”, “$4”, “$_javascript代码调试之console,开发者工具使用。”]

上边大家来挨家挨户介绍一下挨家挨户艺术首要的用途。

貌似情形下我们用来输入音讯的办法首如果用到如下多个

1、console.log 用于出口普通消息

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

3、console.error用于出口错误音信

4、console.warn用以出口警示信息

5、console.debug用于出口调试音信

用图来发话

必发88 28

console对象的下面5种形式,都足以选择printf风格的占位符。不过,占位符的花色比较少,只协理字符(%s)、整数(%d或%i)、浮点数(%f)和目标(%o)各个

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

必发88 29

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

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

必发88 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>

必发88 31

7、console.group输出一组音讯的起来

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

看您要求选拔差其余出口方法来使用,若是上述三个格局再协作group和groupEnd方法来一同使用就能够输入各类各个的不比方式的输出信息。

必发88 32

嘿嘿,是否觉得很神奇啊!

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

必发88 33

10、console.count(这几个方法卓殊实用哦)当您想计算代码被执行的次数

必发88 34

11、console.dir(那几个主意是本身平日应用的 可不知道比for
in方便了略微)直接将该DOM结点以DOM树的协会进行输出,可以详细核对象的方法发展等等

必发88 35

12、console.time 计时开首

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

必发88 36

14、console.profileconsole.profileEnd协作协同行使来查看CPU使用有关音信

必发88 37

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

必发88 38

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

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

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

控制台的片段疾速键

1、方向键盘的上下键,我们一用就明白。比如用上键就相当于拔取上次在控制台的输入符号

2、$_指令归来近日四次表达式执行的结果,功用跟按提升的方向键再回车是千篇一律的

必发88 39

上面的$_急需领会其奥义才能运用合适,而$0~$4则意味了近日5个你挑选过的DOM节点。

何以意思?在页面右击拔取审查元素,然后在弹出来的DOM结点树上边随便点选,那么些被点过的节点会被记录下来,而$0会回来如今三回点选的DOM结点,以此类推,$1重回的是最佳次点选的DOM节点,最多保留了5个,如果不够5个,则赶回undefined

必发88 40

3、Chrome
控制斯科普里原生支持类jQuery的选拔器
,也就是说你可以用$丰盛熟习的css选拔器来选用DOM节点

必发88 41

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

必发88 42

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

5、keys和values前端重临传入对象具备属性名组成的数据,后者再次来到所有属性值组成的数组

必发88 43

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

必发88 44

6、monitor & unmonitor

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

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

必发88 45

看了那张图,应该了解了,也就是说在monitor和unmonitor中间的代码,执行的时候会在支配台出口一条消息,里面含有了函数的称谓a及实施时所盛传的参数。当免除监视(也就是执行unmonitor时)就不再在决定台出口消息了。

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

上面看一下console.log的一对技巧

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

必发88 46

2、利用控制台出口图片

必发88 47

3、指定输出文字的体制

必发88 48

最终说一下chrome控制台一个简约的操作,怎么样查看页面元素,看下图就了解了

必发88 49

你在控制台简单操作一次就清楚了,是还是不是认为很简短!

用法图文详解,javascriptconsole
大家都有用过各种类型的浏览器,每种浏览器都有自己的风味,本人拙见,在自我用…

我们都有用过各连串型的浏览器,每种浏览器都有温馨的表征,本人拙见,在我用过的浏览器当中,我是最喜爱Chrome的,因为它对于调试脚本及前端设计调试都有它比其余浏览器有过之而无不及的地点。可能大家对console.log会有一定的摸底,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,上边我就介绍部分调剂的入门技巧,让您爱上console.log

6、monitor & unmonitor

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

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

必发88 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 改变输出文字的体制

必发88 51

2、利用控制台出口图片

必发88 52

3、指定输出文字的样式

必发88 53

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

必发88 54

你在决定台简单操作一遍就知晓了,是或不是认为很容易!

赞 6 收藏
评论

必发88 55


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

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

必发88 56

必发88 57

我们可以见到控制台里面有一首诗还有其余新闻,假若想清空控制台,可以点击左上角那么些必发88 58来清空,当然也得以通过在决定台输入console.clear()来贯彻清空控制台音信。如下图所示

世家可以看到控制台里面有一首诗还有别的音信,借使想清空控制台,可以点击左上角那些

必发88 59

必发88 60

当今倘诺一个气象,如若一个数组里面有不少的因素,然而你想清楚各种元素具体的值,那时候想想如果你用alert那将是多惨的一件工作,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会现出。

来清空,当然也可以通过在支配台输入console.clear()来贯彻清空控制台新闻。如下图所示

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

必发88 61

必发88 62

现今一旦一个情景,假若一个数组里面有众多的元素,不过你想清楚各种元素具体的值,那时候想想若是您用alert那将是多惨的一件事情,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会出现。
上面大家用console.log来替换,感受一下它的魅力。

看了地方那张图,是还是不是认识到log的强劲之处了,上边大家来看看console里面具体提供了哪些方法能够供我们平时调试时使用。

必发88 63

必发88 64

看了下面那张图,是或不是认识到log的强大之处了,上边大家来探视console里面具体提供了哪些措施可以供大家平素调试时选取。

脚下控制台方法和总体性有:

必发88 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用于出口调试新闻
用图来发话

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


诚如意况下大家用来输入音信的艺术紧假若用到如下多个

必发88 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 用来出口提醒性音信

必发88 67

3、console.error用以出口错误音讯

%o占位符,可以用来查阅一个对象内部情状
var dog = {};dog.name = “大毛”;dog.color = “黄色”;console.log(“%o”,
dog);

4、console.warn用于出口警示新闻

必发88 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>

用图来讲话

必发88 69

必发88 70

7、console.group出口一组音信的始发
8、console.groupEnd得了一组输出音讯
看您必要拔取区其余输出方法来行使,倘诺上述八个章程再同盟group和groupEnd方法来一起利用就可以输入各样各种的不等款式的出口音信。

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

必发88 71

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

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

必发88 72

必发88 73

%o占位符,可以用来查看一个目的内部处境

10、console.count(那一个办法极度实用哦)当你想计算代码被执行的次数

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

必发88 74

必发88 75

11、console.dir(这么些艺术是本人平常利用的 可不知道比for
in方便了略微)直接将该DOM结点以DOM树的结构举办输出,可以详细核对象的点子发展等等

6、console.dirxml用来浮现网页的某个节点(node)所蕴含的html/xml代码

必发88 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
计时为止(看了上面的图你须臾间就感受到它的厉害了)

必发88 77


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

必发88 78

8、console.groupEnd终结一组输出音信

14、console.profile和console.profileEnd协作协同行使来查看CPU使用有关音信

看你要求选取差其他出口方法来采纳,如若上述七个法子再合作group和groupEnd方法来一起行使就足以输入种种各种的不等款式的输出信息。

必发88 79

必发88 80

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

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

必发88 81

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

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

必发88 82

必发88 83

10、console.count(这几个艺术卓殊实用哦)当您想计算代码被执行的次数

上面的$_
亟待明白其奥义才能选拔卓殊,而0
4则意味了近年5个你挑选过的DOM节点。
哪些意思?在页面右击选取审查元素
,然后在弹出来的DOM结点树上边随便点选,这么些被点过的节点会被记录下来,而$0
会回来方今三次点选的DOM结点,以此类推,$1重回的是超级次点选的DOM节点,最多保留了5个,假若不够5个,则再次回到undefined

必发88 84

必发88 85

11、console.dir(那么些主意是自我时常应用的 可不知道比for
in方便了有点)直接将该DOM结点以DOM树的布局举办输出,可以详细核查象的章程升高等等

3、Chrome 控制夏洛特原生扶助类jQuery的拔取器,也就是说你可以用$
添加熟识的css拔取器来选取DOM节点

必发88 86

必发88 87

12、console.time 计时开始

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

13、console.timeEnd 计时为止(看了上边的图你瞬间就感受到它的厉害了)

必发88 88

必发88 89

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

14、console.profileconsole.profileEnd匹配共同利用来查看CPU使用相关新闻

必发88 90

必发88 91

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

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

必发88 92

必发88 93

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

15、console.timeLineconsole.timeLineEnd合营协同记录一段时间轴

必发88 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 改变输出文字的体制

控制台的一部分急速键

必发88 95

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

2、利用控制台出口图片

2、$_指令归来近期四回表达式执行的结果,效用跟按升高的方向键再回车是一律的

必发88 96

必发88 97

3、指定输出文字的样式必发88,

上面的$_须要精通其奥义才能运用方便,而$0~$4则意味着了近来5个你选取过的DOM节点。

必发88 98

怎么看头?在页面右击拔取审查元素,然后在弹出来的DOM结点树上边随便点选,这个被点过的节点会被记录下来,而$0会重返方今一次点选的DOM结点,以此类推,$1重回的是最佳次点选的DOM节点,最多保留了5个,如若不够5个,则赶回undefined

最终说一下chrome控制台一个简单的操作,如何查看页面元素,看下图就知晓了

必发88 99

必发88 100

3、Chrome
控制纽伦堡原生援助类jQuery的选拔器
,也就是说你可以用$加上精通的css选取器来选用DOM节点

必发88 101

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

必发88 102

(哈哈 刚刚从控制台复制的body里面的html可以随意粘贴到哪, 比如记事本,
是或不是觉得作用很强劲)

5、keys和values前端重临传入对象具备属性名组成的数量,后者再次回到所有属性值组成的数组

必发88 103

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

必发88 104

6、monitor & unmonitor

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

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

必发88 105

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

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

下边看一下console.log的有的技巧

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

必发88 106

2、利用控制台出口图片

必发88 107

3、指定输出文字的体裁

必发88 108

末尾说一下chrome控制台一个简单易行的操作,怎么着查看页面元素,看下图就驾驭了

必发88 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地图