Chrome 控制台console的用法

Chrome 控制台console的用法

2015/01/12 · JavaScript
· Chrome

初稿出处:
ctriphire   

我们都有用过各连串型的浏览器,各类浏览器都有温馨的表征,自己拙见,在小编用过的浏览器其中,笔者是最喜爱Chrome的,因为它对于调试脚本及前端设计调节和测试都有它比其他浏览器有过之而无不比的地点。或然大家对console.log会有自然的刺探,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出音信吗,上面笔者就介绍壹些调节和测试的入门技巧,让你爱上console.log

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

亚洲必赢app 1

我们能够见到控制台里面有一首诗还有其它音讯,假使想清空控制台,能够点击左上角那3个亚洲必赢app 2来清空,当然也足以因此在支配台输入console.clear()来兑现清空控制台音讯。如下图所示

亚洲必赢app 3

当今假诺八个处境,倘使二个数组里面有好多的因素,然则你想精晓种种元素具体的值,那时候想想假如您用alert那将是多惨的一件工作,因为alert阻断线程运维,你不点击alert框的分明按钮下1个alert就不会并发。

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

亚洲必赢app 4

看了上面那张图,是或不是认识到log的强有力之处了,下边大家来探视console里面具体提供了什么样措施能够供大家向来调节和测试时利用。

亚洲必赢app 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用于出口调节和测试音信

亚洲必赢app,用图来说话

亚洲必赢app 6

console对象的上面5种艺术,都足以采纳printf风格的占位符。可是,占位符的品种相比较少,只援救字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)多样

JavaScript

console.log(“%d年%d月%d日”,2011,3,2陆);
console.log(“圆周率是%f”,叁.1415九2陆);

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

亚洲必赢app 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);

亚洲必赢app 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>

亚洲必赢app 9

7、console.group输出一组音信的启幕

8、console.groupEnd甘休一组输出新闻

看你需求选择差别的输出方法来选拔,借使上述多个办法再协作group和groupEnd方法来1块使用就能够输入各个各类的分歧式样的出口音信。

亚洲必赢app 10

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

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

亚洲必赢app 11

10、console.count(这些格局丰硕实用哦)当您想总计代码被执行的次数

亚洲必赢app 12

11、console.dir(这么些点子是自个儿时时使用的 可不知道比for
in方便了多少) 直接将该DOM结点以DOM树的构造实行输出,能够详细核对象的主意提升等等

亚洲必赢app 13

12、console.time 计时上马

13、console.timeEnd  计时结束(看了上边的图你须臾间就感受到它的决意了)

亚洲必赢app 14

14、console.profileconsole.profileEnd万分共同行使来查阅CPU使用有关讯息

亚洲必赢app 15

在Profiles面板里面查看就足以观望cpu相关应用音信

亚洲必赢app 16

15、console.timeLineconsole.timeLineEnd合营共同记录壹段时间轴

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

上述方法只是自身个人通晓罢了。假如想查看具体API,能够上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api

 

上面介绍一下控制台的一部分赶快键

壹、方向键盘的上下键,我们1用就通晓。比如用上键就也正是接纳上次在控制台的输入符号

2、$_指令归来近期3遍表明式执行的结果,功用跟按提升的方向键再回车是1样的

亚洲必赢app 17

上面的$_急需明白其奥义才能运用格外,而$0~$四则意味了近期四个你采取过的DOM节点。

什么样看头?在页面右击采取审查元素,然后在弹出来的DOM结点树上边随便点选,那么些被点过的节点会被记录下来,而$0会回去近期一回点选的DOM结点,以此类推,$一重回的是一流次点选的DOM节点,最多保留了多少个,借使不够多少个,则赶回undefined

亚洲必赢app 18

三、Chrome
控制巴尔的摩原生匡助类jQuery的采取器
,也正是说你能够用$添加熟知的css选取器来摘取DOM节点

亚洲必赢app 19

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

亚洲必赢app 20

(哈哈 刚刚从控制台复制的body里面包车型客车html可以随便粘贴到哪 比如记事本
 是或不是觉得功效很有力)

5、keys和values 前者重回传入对象拥有属性名组成的数目,后者重回全数属性值组成的数组

亚洲必赢app 21

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

亚洲必赢app 22

 

 

 

6、monitor & unmonitor

monitor(function),它接受叁个函数名作为参数,比如function a,每次a被实施了,都会在控制台出口一条新闻,里面包蕴了函数的名称a及实施时所盛传的参数。

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

亚洲必赢app 23

看了那张图,应该通晓了,也正是说在monitor和unmonitor中间的代码,执行的时候会在决定台出口一条音讯,里面富含了函数的称谓a及实施时所盛传的参数。当撤废监视(也便是执行unmonitor时)就不再在决定台出口新闻了。

JavaScript

$ // 简单驾驭正是 document.querySelector 而已。 $$ // 不难明了就是document.querySelectorAll 而已。 $_ // 是上一个表明式的值 $0-$肆 //
是近来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 改变输出文字的样式

亚洲必赢app 24

二、利用控制台出口图片

亚洲必赢app 25

三、钦命输出文字的体裁

亚洲必赢app 26

末尾说一下chrome控制台三个简练的操作,如何查看页面成分,看下图就知道了

亚洲必赢app 27

你在支配台简单操作2回就知晓了,是否觉得相当粗略!

赞 6 收藏
评论

亚洲必赢app 28

 

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

上面的$_亟待明白其奥义才能运用合适,而$0~$4则表示了近日伍个你挑选过的DOM节点。

亚洲必赢app 29

亚洲必赢app 30

怎么样看头?在页面右击采用审查成分,然后在弹出来的DOM结点树上面随便点选,这么些被点过的节点会被记录下来,而$0会回到近来贰次点选的DOM结点,以此类推,$壹重临的是一流次点选的DOM节点,最多保留了两个,即使不够多少个,则再次回到undefined。

亚洲必赢app 31

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]
<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>

于今假如一个情景,假诺一个数组里面有更仆难数的元素,不过你想清楚种种成分具体的值,那时候想想要是您用alert那将是多惨的一件业务,因为alert阻断线程运转,你不点击alert框的明确按钮下2个alert就不会油可是生。

亚洲必赢app 32

亚洲必赢app 33

6、monitor & unmonitor

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

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

亚洲必赢app 34

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

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

 

下边看一下console.log的局部技艺

一、重写console.log 改变输出文字的体制

亚洲必赢app 35

二、利用控制台出口图片

亚洲必赢app 36

三、钦定输出文字的体裁

亚洲必赢app 37

最后说一下chrome控制台多个粗略的操作,怎么着查看页面成分,看下图就明白了

亚洲必赢app 38

你在决定台简单操作一回就精晓了,是还是不是认为相当粗略!

 

三、console.error用于出口错误消息

一、console.log 用于出口普通音信

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

亚洲必赢app 39

亚洲必赢app 40

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

亚洲必赢app 41

一伍、console.timeLine和console.timeLineEnd协作协同记录壹段时间轴

亚洲必赢app 42

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

四、console.warn用于出口警示新闻

十、console.count(那么些法子丰富实用哦)当您想总计代码被实践的次数

用图来说话

亚洲必赢app 43

二、console.info 用于出口提醒性信息

亚洲必赢app 44

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

 

 

伍、console.debug用于出口调节和测试新闻

亚洲必赢app 45

(哈哈 刚刚从控制台复制的body里面包车型地铁html可以自由粘贴到哪 比如记事本
是或不是认为功能很强劲)

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

看了地点那张图,是还是不是认识到log的有力之处了,上边大家来看看console里面具体提供了何等措施可以供大家平日调试时使用。

亚洲必赢app 46

亚洲必赢app 47

6、console.dirxml用来展现网页的某部节点(node)所包括的html/xml代码

上述格局只是本人个人了然罢了。假诺想查看具体API,能够上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api

初稿链接:http://www.open-open.com/lib/view/open1421131601390.html

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

四、copy通过此命令可以将在控制台获取到的始末复制到剪贴板

亚洲必赢app 48

11、console.dir(这一个方法是自个儿常常使用的 可不知道比for in方便了略微)
直接将该DOM结点以DOM树的协会实行输出,可以详细核查象的方法发展等等

亚洲必赢app 49

1二、console.time 计时初叶

亚洲必赢app 50

亚洲必赢app 51

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

亚洲必赢app 52

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

看你要求选拔差别的出口方法来利用,尽管上述多个法子再合作group和groupEnd方法来共同行使就足以输入种种各种的两样样式的输出消息。

世家都有用过各样类型的浏览器,种种浏览器都有协调的特征,本身拙见,在本人用过的浏览器个中,小编是最欣赏Chrome的,因为它对于调节和测试脚本及前端设计调节和测试都有它比别的浏览器有过之而无不比的地点。恐怕大家对console.log会有一定的了然,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出音讯吗,上边作者就介绍部分调节和测试的入门技巧,让您爱上console.log

嘿嘿,是或不是觉得很神奇啊!

14、console.profile和console.profileEnd合营共同利用来查阅CPU使用有关音信

上面大家来挨家挨户介绍一下相继艺术首要的用处。

亚洲必赢app 53

上面介绍一下控制台的有个别神速键

console对象的方面5种办法,都能够行使printf风格的占位符。可是,占位符的连串比较少,只援助字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)种种。

八、console.groupEnd结束1组输出音信

貌似景象下大家用来输入音讯的艺术首假诺用到如下多少个

7、console.group输出一组新闻的启幕

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

亚洲必赢app 54

2、$_一声令下归来近年来3次表达式执行的结果,成效跟按提升的方向键再回车是壹律的

三、Chrome
控制马普托原生帮衬类jQuery的选用器,也正是说你可以用$加上熟知的css选取器来挑选DOM节点

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

在Profiles面板里面查看就能够见见cpu相关应用消息

大家能够看到控制台里面有1首诗还有此外消息,要是想清空控制台,可以点击左上角那些亚洲必赢app 55来清空,当然也足以由此在控制台输入console.clear()来促成清空控制台消息。如下图所示

初阶不精通console这么强大,还能够总括时间,分析质量瓶颈。很风趣

一三、console.timeEnd 计时甘休(看了上边包车型大巴图你须臾间就感受到它的决定了)

发表评论

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

网站地图xml地图