金沙js333娱乐场Chrome 开发者工具使用

6、monitor & unmonitor

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

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

金沙js333娱乐场 1

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

JavaScript

$ // 简单明了正是 document.querySelector 而已。 $$ // 简单明了正是document.querySelectorAll 而已。 $_ // 是上二个表明式的值 $0-$四 //
是目前多少个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 改变输出文字的体制

金沙js333娱乐场 2

二、利用控制台出口图片

金沙js333娱乐场 3

三、钦点输出文字的样式

金沙js333娱乐场 4

终极说一下chrome控制台二个粗略的操作,怎么着查看页面成分,看下图就领会了

金沙js333娱乐场 5

您在决定台不难操作一回就明白了,是还是不是认为不会细小略!

赞 6 收藏
评论

金沙js333娱乐场 6

金沙js333娱乐场 7

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

大家都有用过各体系型的浏览器,每一个浏览器都有温馨的表征,本人拙见,在自家用过的浏览器当中,作者是最欢欣Chrome的,因为它对于调节和测试脚本及前端设计调试都有它比其余浏览器有过之而无不如的地点。也许大家对console.log会有早晚的刺探,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出音讯吗,下边作者就介绍1些调节的入门技巧,让你爱上console.log

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

金沙js333娱乐场 8

我们能够见到控制台里面有一首诗还有其余音信,假若想清空控制台,可以点击左上角那个金沙js333娱乐场 9来清空,当然也得以通过在决定台输入console.clear()来落到实处清空控制台音讯。如下图所示

金沙js333娱乐场 10

最近1经3个情景,若是3个数组里面有那些的成分,可是你想掌握各种元素具体的值,那时候想想要是您用alert那将是多惨的1件事情,因为alert阻断线程运转,你不点击alert框的鲜明按钮下1个alert就不会并发。

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

金沙js333娱乐场 11

看了地点那张图,是或不是认识到log的强大之处了,下边大家来探望console里面具体提供了什么样措施能够供大家日常调节和测试时选取。

金沙js333娱乐场 12

当下控制台方法和属性有:

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

下边大家来挨家挨户介绍一下梯次艺术重要的用处。

1般景观下我们用来输入音信的措施主若是用到如下八个

1、console.log 用于出口普通音讯

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

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

4、console.warn用来出口警示消息

5、console.debug用于出口调节和测试信息

用图来发话

金沙js333娱乐场 13

console对象的上面五种办法,都足以利用printf风格的占位符。可是,占位符的种类相比少,只帮助字符(%s)、整数(%d或%i)、浮点数(%f)和指标(%o)多样

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

金沙js333娱乐场 14

%o占位符,能够用来查阅1个对象内部情状

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

金沙js333娱乐场 15

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

金沙js333娱乐场 16

7、console.group出口一组音讯的发端

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

看您必要接纳分裂的出口方法来行使,假若上述八个法子再协作group和groupEnd方法来1块行使就足以输入各样各类的差异式样的输出音信。

金沙js333娱乐场 17

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

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

金沙js333娱乐场 18

10、console.count(这一个法子十一分实用哦)当你想计算代码被实践的次数

金沙js333娱乐场 19

11、console.dir(这几个艺术是本身日常利用的 可不知道比for
in方便了有些)直接将该DOM结点以DOM树的结构实行输出,能够详细核查象的诀要发展等等

金沙js333娱乐场 20

12、console.time 计时始发

13、console.timeEnd 计时结束(看了下边包车型客车图你须臾间就感受到它的厉害了)

金沙js333娱乐场 21

14、console.profileconsole.profileEnd相配协同利用来查看CPU使用有关音信

金沙js333娱乐场 22

在Profiles面板里面查看就能够看来cpu相关应用新闻

金沙js333娱乐场 23

15、console.timeLineconsole.timeLineEnd相称共同记录1段时间轴

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

上述情势只是自己个人领会罢了。如若想查看具体API,能够上合法看看,具体地址为:

控制台的一些急速键

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

2、$_一声令下归来近期二次表明式执行的结果,作用跟按进步的方向键再回车是同样的

金沙js333娱乐场 24

上面的$_亟需明白其奥义才能采用非凡,而$0~$四则意味着了近年四个你挑选过的DOM节点。

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

金沙js333娱乐场 25

三、Chrome
控制杜阿拉原生协理类jQuery的选取器
,也正是说你可以用$加上熟稔的css选取器来选取DOM节点

金沙js333娱乐场 26

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

金沙js333娱乐场 27

(哈哈 刚刚从控制台复制的body里面包车型客车html能够随意粘贴到哪, 比如记事本,
是或不是觉得效率很强大)

5、keys和values前端再次来到传入对象拥有属性名组成的多寡,后者再次来到全部属性值组成的数组

金沙js333娱乐场 28

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

金沙js333娱乐场 29

6、monitor & unmonitor

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

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

金沙js333娱乐场 30

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

$ // 简单明了正是 document.querySelector 而已。$$ // 简单明了就是document.querySelectorAll 而已。$_ // 是上二个表明式的值$0-$肆 //
是近年四个Elements面板选中的DOM成分,待会会讲。dir // 其实就是console.dirkeys // 取对象的键名, 重回键名组成的数组values // 去对象的值,
再次来到值组成的数组

下边看一下console.log的局地技术

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

金沙js333娱乐场 31

贰、利用控制台出口图片

金沙js333娱乐场 32

叁、钦点输出文字的样式

金沙js333娱乐场 33

最后说一下chrome控制台三个简易的操作,怎么样查看页面成分,看下图就驾驭了

金沙js333娱乐场 34

您在控制台简单操作一次就精晓了,是或不是认为很不难!

用法图像和文字详解,javascriptconsole
我们都有用过各系列型的浏览器,各个浏览器都有谈得来的特征,本人拙见,在作者用…

Chrome 控制台console的用法

2015/01/12 · JavaScript
· Chrome

原稿出处:
ctriphire   

我们都有用过各体系型的浏览器,每一种浏览器都有投机的天性,本身拙见,在自小编用过的浏览器在那之中,小编是最喜爱Chrome的,因为它对于调节和测试脚本及前端设计调节和测试都有它比其余浏览器有过之而无比不上的地点。大概大家对console.log会有自然的垂询,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么1长串的字符串来替代alert输出音信吗,上面作者就介绍一些调剂的入门技巧,让你爱上console.log

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

金沙js333娱乐场 35

咱们能够看看控制台里面有一首诗还有此外音信,即使想清空控制台,能够点击左上角那多少个金沙js333娱乐场 36来清空,当然也能够透过在支配台输入console.clear()来完结清空控制台消息。如下图所示

金沙js333娱乐场 37

当今只要一个情况,如若三个数组里面有为数不少的要素,不过你想知道各样成分具体的值,那时候想想假使你用alert那将是多惨的一件工作,因为alert阻断线程运维,你不点击alert框的规定按钮下三个alert就不会出现。

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

金沙js333娱乐场 38

看了上边这张图,是或不是认识到log的兵不血刃之处了,上面大家来看望console里面具体提供了何等方法能够供我们一直调节和测试时使用。

金沙js333娱乐场 39

当前控制台方法和品质有:

JavaScript

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

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

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

诚如景况下我们用来输入音讯的秘诀重假使用到如下八个

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

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

3、console.error用于出口错误新闻

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

5、console.debug用于出口调节和测试音讯

用图来发话

金沙js333娱乐场 40

console对象的地点五种艺术,都足以利用printf风格的占位符。但是,占位符的品种相比较少,只帮忙字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种

JavaScript

console.log(“%d年%d月%d日”,2011,叁,二陆);
console.log(“圆周率是%f”,三.1415玖二六);

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

金沙js333娱乐场 41

%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);

金沙js333娱乐场 42

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>

金沙js333娱乐场 43

7、console.group输出1组消息的上马

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

看您须求选用分歧的输出方法来行使,若是上述八个点子再同盟group和groupEnd方法来二头利用就能够输入各个各种的例外款型的出口消息。

金沙js333娱乐场 44

嘿嘿,是否认为很神奇啊!

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

金沙js333娱乐场 45

10、console.count(那么些艺术13分实用哦)当您想总结代码被执行的次数

金沙js333娱乐场 46

11、console.dir(这么些点子是本人时常采纳的 可不知道比for
in方便了有点) 直接将该DOM结点以DOM树的构造实行输出,能够详细核查象的措施升高等等

金沙js333娱乐场 47

12、console.time 计时上马

13、console.timeEnd  计时甘休(看了上面包车型客车图你眨眼间间就感受到它的立意了)

金沙js333娱乐场 48

14、console.profileconsole.profileEnd非凡共同使用来查阅CPU使用相关音讯

金沙js333娱乐场 49

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

金沙js333娱乐场 50

15、console.timeLineconsole.timeLineEnd11分协同记录1段时间轴

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

上述方法只是本身个人领悟罢了。假如想查看具体API,能够上合法看看,具体地址为:

 

下边介绍一下控制台的1部分急忙键

一、方向键盘的上下键,大家壹用就明白。比如用上键就也等于选择上次在控制台的输入符号

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

金沙js333娱乐场 51

上面的$_急需通晓其奥义才能使用合适,而$0~$四则意味了不久前多少个你挑选过的DOM节点。

哪些看头?在页面右击选用审查元素,然后在弹出来的DOM结点树上面随便点选,那一个被点过的节点会被记录下来,而$0会回来近年来一遍点选的DOM结点,以此类推,$壹重回的是一流次点选的DOM节点,最多保留了多个,假若不够五个,则赶回undefined

金沙js333娱乐场 52

③、Chrome
控制斯科普里原生援助类jQuery的采取器
,也正是说你能够用$累加熟习的css选拔器来摘取DOM节点

金沙js333娱乐场 53

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

金沙js333娱乐场 54

(哈哈 刚刚从控制台复制的body里面包车型大巴html可以轻易粘贴到哪 比如记事本
 是还是不是认为功效很强大)

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

金沙js333娱乐场 55

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

金沙js333娱乐场 56

 

 

上面的$_
必要精晓其奥义才能选择方便,而0
4则象征了近日六个你挑选过的DOM节点。
怎么样意思?在页面右击选用审查成分
,然后在弹出来的DOM结点树上边随便点选,这些被点过的节点会被记录下来,而$0
会回到近期一次点选的DOM结点,以此类推,$一重返的是极品次点选的DOM节点,最多保留了伍个,假如不够伍个,则再次来到undefined

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

金沙js333娱乐场 57

10、console.count(这些措施丰盛实用哦)当你想总计代码被实施的次数

7、console.group输出1组音信的伊始
8、console.groupEnd告竣一组输出消息
看您须求选拔不一致的输出方法来行使,假如上述八个法子再同盟group和groupEnd方法来二头行使就能够输入种种种种的不等款型的出口音信。

金沙js333娱乐场 58

脚下控制台方法和属性有:
[“$$”, “$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用于出口调节和测试音信
用图来发话

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

金沙js333娱乐场 59

金沙js333娱乐场 60

11、console.dir(那些点子是自己不时选用的 可不知道比for
in方便了稍稍)直接将该DOM结点以DOM树的构造举行输出,能够详细核对象的法子升高等等

金沙js333娱乐场 61

下边看一下console.log的有些技能
一、重写console.log 改变输出文字的样式

明天只要三个光景,假诺2个数组里面有不乏先例的因素,可是你想掌握种种成分具体的值,那时候想想假使你用alert那将是多惨的一件工作,因为alert阻断线程运转,你不点击alert框的规定按钮下三个alert就不会并发。
下边大家用console.log来替换,感受一下它的魔力。

12、console.time 计时开班
13、console.timeEnd
计时停止(看了下边包车型客车图你弹指间就感受到它的决心了)

金沙js333娱乐场 62

金沙js333娱乐场 63

金沙js333娱乐场 64

哈哈,是还是不是认为很神奇啊!
9、console.assert对输入的表达式实行预知,唯有表明式为false时,才输出相应的音讯到控制台

发表评论

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