普京网址 54

让你爱上console.log普京网址,让你爱上console.log

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日”,2012,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

 

 

普京网址 23

(哈哈 刚刚从调整台复制的body里面包车型大巴html能够专断粘贴到哪 举例记事本
是否感觉效能很苍劲)

6、monitor & unmonitor

monitor(function),它接收叁个函数名作为参数,譬如function a,每次a被推行了,都会在调控台出口一条音讯,里面富含了函数的名目a及实行时所传颂的参数。

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

普京网址 24

看了那张图,应该通晓了,也正是说在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 修正输出文字的体裁

普京网址 25

2、利用调整台出口图片

普京网址 26

3、钦命输出文字的体制

普京网址 27

末尾说一下chrome调控台三个归纳的操作,怎么着查看页面成分,看下图就清楚了

普京网址 28

你在支配台轻便操作二次就精通了,是否感觉很简短!

赞 6 收藏
评论

普京网址 29

普京网址 30

普京网址 31

(哈哈 刚刚从调整台复制的body里面的html能够私下粘贴到哪, 举例记事本,
是还是不是感到作用很强劲)
5、keys和values前端重返传入对象具备属性名组成的数码,前者重返全部属性值组成的数组

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


5、keys和values 前面多少个重回传入对象具有属性名组成的数额,后面一个重临全数属性值组成的数组

普京网址 32

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

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

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

普京网址 33

普京网址 34

普京网址 35

普京网址 36

普京网址 37

5、console.debug用于出口调节和测量试验消息

3、Chrome 调控台北原生扶植类jQuery的接收器,也便是说你可以用$
累积熟识的css选用器来抉择DOM节点

普京网址 38

普京网址 39

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

普京网址 40

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

12、console.time 计时开班
13、console.timeEnd
计时截至(看了上边包车型地铁图你瞬间就感受到它的决意了)

 

普京网址 41

普京网址 42

14、console.profile和console.profileEnd同盟协同使用来查看CPU使用相关新闻

上边我们来挨门挨户介绍一下每种艺术主要的用处。

大家能够看出调节台里面有朝气蓬勃首诗还会有别的新闻,假若想清空气调节器控台,能够点击左上角那些

11、console.dir(这一个点子是自己平日使用的 可不知道比for in方便了略微)
直接将该DOM结点以DOM树的构造举行输出,能够详细核查象的章程提升端等

哈哈哈,是否感到很奇妙啊!
9、console.assert对输入的表明式实行预知,只有表明式为false时,才输出相应的音信到调控台

先的简易介绍一下chrome的调控台,展开chrome浏览器,按f12就足以轻巧的开采调控台

10、console.count(这些艺术拾贰分实用哦)当您想总括代码被施行的次数

 

普京网址 43

%o占位符,能够用来查阅三个对象内部景观

普京网址 44

普京网址 45

4、copy经过此命令能够即将调控台获取到的从头到尾的经过复制到剪贴板

8、console.groupEnd结束意气风发组输出音讯

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>

普京网址 46

普京网址 47

 

7、console.group输出大器晚成组消息的发轫
8、console.groupEnd终结生龙活虎组输出音讯
看你供给选择分裂的出口方法来利用,假诺上述几个点子再协作group和groupEnd方法来三头利用就足以输入五花八门的不等款型的输出新闻。

普京网址 48

普京网址 49

6、monitor & unmonitor

monitor(function),它接纳三个函数名作为参数,比方function
a,每趟a被施行了,都会在调节台出口一条新闻,里面富含了函数的名称a及实施时所传诵的参数。

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

普京网址 50

看了那张图,应该精晓了,约等于说在monitor和unmonitor中间的代码,试行的时候会在调节台出口一条新闻,里面包罗了函数的名称a及举行时所传诵的参数。当撤销监视(也正是实施unmonitor时)就不再在调控台出口消息了。

$ // 简单理解就是 document.querySelector 而已。
$$ // 简单理解就是 document.querySelectorAll 而已。
$_ // 是上一个表达式的值
$0-$4 // 是最近5个Elements面板选中的DOM元素,待会会讲。
dir // 其实就是 console.dir
keys // 取对象的键名, 返回键名组成的数组
values // 去对象的值, 返回值组成的数组

 

下边看一下console.log的有个别技艺

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

普京网址 51

2、利用调控台出口图片

普京网址 52

3、钦赐输出文字的体制

普京网址 53

终极说一下chrome调节台二个轻便的操作,怎么样查看页面成分,看下图就清楚了

普京网址 54

你在支配台轻便操作二遍就掌握了,是或不是认为相当粗略!

 

发表评论

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

相关文章