Chrome 控制台console的用法

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、Chrome 控制台console的用法。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  堆栈跟踪相关的调剂

上述方法只是本身个人精通罢了。即使想查看具体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

 

 

原先不晓得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

13、Chrome
控制埃德蒙顿原生援助类jQuery的选拔器
,也就是说你可以用$添加熟习的css接纳器来摘取DOM节。

图片 32

14、console.profileconsole.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 //
是如今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 改变输出文字的体制

图片 36

2、利用控制台出口图片

图片 37

3、指定输出文字的体裁

图片 38

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

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

13、Chrome
控制毕尔巴鄂原生扶助类jQuery的选择器
,也就是说你能够用$加上熟识的css拔取器来拔取DOM节。

图片 49

14、console.profileconsole.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

前天一旦一个风貌,要是一个数组里面有那些的要素,可是你想驾驭各样元素具体的值,那时候想想如若你用alert那将是多惨的一件工作,因为alert阻断线程运行,你不点击alert框的确定按钮下一个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", "$_"]

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

貌似景况下我们用来输入音信的措施主要是用到如下七个

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

2、console.info 用于出口提示性音讯

相关文章

发表评论

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

*
*
Website