来自 业界快讯 2019-10-17 07:05 的文章
当前位置: 118kj开奖现场 > 业界快讯 > 正文

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日",二〇一一,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.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

 

 

6、monitor & unmonitor

monitor(function),它接受四个函数名作为参数,举例function a,每次a被施行了,都会在决定台出口一条音信,里面满含了函数的称谓a及实践时所盛传的参数。

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

图片 23

看了这张图,应该驾驭了,也正是说在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 改造输出文字的体制

图片 24

2、利用调整台出口图片

图片 25

3、内定输出文字的体制

图片 26

最后说一下chrome调控台几个简单的操作,如何查看页面成分,看下图就清楚了

图片 27

你在支配台简单操作三次就驾驭了,是否认为很简短!

赞 6 收藏 评论

图片 28

本文由118kj开奖现场发布于业界快讯,转载请注明出处:Chrome 控制台console的用法

关键词: