Chrome 控制台console的用法

Chrome 控制台console的用法

2015/01/12 · JavaScript
· Chrome 控制台console的用法。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日”,二零一二,3,26);
console.log(“圆周率是%f”,3.1415926);

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

图片 7

%o占位符，可以用来查看1个目标内部情况

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.timeLine和console.timeLineEnd同盟协同记录一段时间轴

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

上述方法只是自家个人通晓罢了。如若想查看具体API，可以上合法看看，具体地址为：

 

上面介绍一下控制台的一对飞速键

一 、方向键盘的上下键，我们一用就精晓。比如用上键就一定于采用上次在控制台的输入符号

2、$_一声令下归来目前一遍表明式执行的结果，成效跟按提升的方向键再回车是一律的

图片 17

上面的$_须要通晓其奥义才能使用方便，而$0~$4则代表了不久前多少个你选取过的DOM节点。

怎么看头？在页面右击选取审查元素，然后在弹出来的DOM结点树上面随便点选，这个被点过的节点会被记录下来，而$0会重回近日五遍点选的DOM结点，以此类推，$1重回的是最佳次点选的DOM节点，最多保留了多少个，假设不够伍个，则赶回undefined。

图片 18

叁 、Chrome
控制弗罗茨瓦夫原生协助类jQuery的接纳器，约等于说你可以用$累加熟练的css拔取器来摘取DOM节点

图片 19

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

图片 20

（哈哈 刚刚从控制台复制的body里面的html可以随意粘贴到哪 比如记事本
 是还是不是觉得功用很强大）

5、keys和values 前者再次回到传入对象拥有属性名组成的数目，后者重返全部属性值组成的数组

图片 21

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

图片 22

 

 

先前不精通console这么强大，还可以计算时间，分析品质瓶颈。很有意思

Chrome 控制台console的用法

上边大家来看望console里面具体提供了哪些方法可以供大家一直调试时行使。

图片 23

眼前控制台方法和性质有：

["$$", "$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用来出口警示音信

用图来说话：

图片 24

6、console.groupEnd截止一组输出音信

看你需求拔取不相同的出口方法来行使，固然上述两个法子再同盟group和groupEnd方法来一同使用就可以输入各样各种的不等款式的出口音信。

图片 25

7、console.assert对输入的表明式举办预见，唯有表明式为false时，才输出相应的音讯到控制台。

图片 26

8、console.count（这些法子丰硕实用哦）当你想计算代码被实施的次数。

图片 27

9、console.dir(那些艺术是本人平时利用的 可不知道比for
in方便了有些) 直接将该DOM结点以DOM树的结构进行输出，可以详细校对象的方法提升等等。

图片 28

10、console.time 计时开始。console.timeEnd  计时截止（看了下边的图你须臾间就感受到它的决意了）

图片 29

11、keys和values 前者重临传入对象拥有属性名组成的数量，后者重临全部属性值组成的数组。

图片 30

12、console.table方法

图片 31

1③ 、Chrome
控制布里斯托原生帮衬类jQuery的采用器，约等于说你可以用$累加熟习的css采用器来挑选DOM节。

图片 32

14、console.profile和console.profileEnd极度共同使用来查看CPU使用相关信。

图片 33

 

① 、查看命令

下边大家来探望console里面具体提供了什么措施可以供我们日常调试时行使。

图片 34

时下控制台方法和性质有：

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

上边我们来挨家挨户介绍一下依次艺术首要的用处。

6、monitor & unmonitor

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

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

图片 35

看了那张图，应该清楚了，也等于说在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 改变输出文字的体裁

图片 36

二 、利用控制台出口图片

图片 37

③ 、钦定输出文字的体制

图片 38

说到底说一下chrome控制台2个粗略的操作，如何查看页面成分，看下图就领会了

图片 39

您在控制台简单操作四次就驾驭了，是或不是觉得很简短！

赞 6 收藏
评论

图片 40

初稿链接：

贰 、命令介绍

一般情形下我们用来输入信息的形式重如若用到如下多少个：

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

2、console.info 用于出口提醒性音信

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

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

用图来发话：

图片 41

6、console.groupEnd终止一组输出音讯

看你需求选取分化的出口方法来拔取，假使上述两个方法再同盟group和groupEnd方法来共同利用就可以输入各个各种的两样样式的出口新闻。

图片 42

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

图片 43

8、console.count（这些艺术丰盛实用哦）当您想统计代码被执行的次数。

图片 44

9、console.dir(这些点子是自己时时使用的 可不知道比for
in方便了不怎么) 直接将该DOM结点以DOM树的社团进行输出，可以详细核对象的法子发展等等。

图片 45

10、console.time 计时启幕。console.timeEnd  计时甘休（看了下边的图你须臾间就感受到它的决定了）

图片 46

11、keys和values 前者重临传入对象拥有属性名组成的数量，后者再次来到全体属性值组成的数组。

图片 47

12、console.table方法

图片 48

1三 、Chrome
控制长沙原生援救类jQuery的选用器，约等于说你可以用$增加纯熟的css选取器来采纳DOM节。

图片 49

14、console.profile和console.profileEnd匹配协同利用来查阅CPU使用相关音讯。

图片 50

 

 

③ 、使用总计

世家都有用过各系列型的浏览器，各个浏览器都有谈得来的特征，自个儿拙见，在自己用过的浏览器当中，我是最兴奋Chrome的，因为它对于调试脚本及前端设计调试都有它比其余浏览器有过之而无不及的地方。或然大家对console.log会有早晚的问询，心里难免会想调试的时候用alert不就行了，干嘛还要用console.log这么一长串的字符串来替代alert输出音讯吗，上边作者就介绍一些调试的入门技巧，让你爱上console.log

1、修改javascript代码

许多少人遇上手动修改脚本后，然后不奏效。

a、独立的js文件的修改章程

　　在F12调试界面中修改的JS代码，是修改的“本地缓存文件”中的代码，而不是存在于服务器上的网页的的确代码，网页的的确代码在浏览器中是不能修改的。

　　Chrome开发者调试工具（F12），可以在调试界面修改代码（包含JS、HTML和CSS）模拟本地运营，具体步骤大约如下：

　　在急需修改的代码段上方合理代码行设置断点；按F5键刷新网页，并伺机网页执行到断点；修改JS代码或其他要求修改的代码，修改后采纳单步执行或继续执行即可。

　　寻常，调试中修改无效，是因为网页加载成功，其实就是运作已经成功了，修改代码不会重新实施。

b、修改html上的js

　　js写在html的脚本区域上，那时在source面板下是无能为力编辑的，但在Elements仍可以的。

　　修改章程就是直接将js代码修改，然后在console再履行一次。

　　缺陷：无法控制已经施行的台本

 

原文：

连带推荐：

 

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

图片 51

世家可以看出控制台里面有一首诗还有任何消息，假使想清空控制台，可以点击左上角那多少个图片 52来清空，当然也足以通过在控制台输入console.clear()来落到实处清空控制台消息。如下图所示

图片 53

今昔即便贰个景色，倘诺1个数组里面有众多的要素，不过你想精通各样成分具体的值，那时候想想借使您用alert那将是多惨的一件工作，因为alert阻断线程运维，你不点击alert框的明确按钮下2个alert就不会油可是生。

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

图片 54

看了上边那张图，是或不是认识到log的有力之处了，上边大家来探视console里面具体提供了什么措施能够供大家平昔调试时利用。

图片 55

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

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

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

貌似情状下我们用来输入音信的办法紧若是用到如下五个

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

贰 、console.info 用于出口指示性音讯

发表评论

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

网站地图xml地图