菜单

Chrome 控制台console的用法

2019年2月19日 - CSS/CSS3

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,可以上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api

 

下边介绍一下控制台的局地连忙键

一 、方向键盘的上下键,我们一用就领会。比如用上键就也等于拔取上次在控制台的输入符号

2、$_一声令下归来近来五遍表明式执行的结果,效能跟按提升的方向键再回车是如出一辙的

图片 17

上面的$_要求了然其奥义才能使用合适,而$0~$4则意味着了不久前四个你挑选过的DOM节点。

哪些看头?在页面右击选取审查元素,然后在弹出来的DOM结点树上面随便点选,这个被点过的节点会被记录下来,而$0会回去近日两回点选的DOM结点,以此类推,$1重回的是一级次点选的DOM节点,最多保留了多个,如若不够5个,则赶回undefined

图片 18

叁 、Chrome
控制夏洛特原生协助类jQuery的选拔器
,也等于说你可以用$添加熟稔的css选用器来挑选DOM节点

图片 19

4、copy透过此命令可以将在控制台获取到的内容复制到剪贴板

图片 20

(哈哈 刚刚从控制台复制的body里面的html可以肆意粘贴到哪 比如记事本
 是还是不是认为作用很强大)

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

图片 21

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

图片 22

 

 

发轫不知情console这么强大,还是能计算时间,分析质量瓶颈。很有意思

6、monitor & unmonitor

monitor(function),它接受一个函数名作为参数,比如function a,每次a被实践了,都会在支配台出口一条新闻,里面含有了函数的称呼a及举行时所传颂的参数。

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

图片 23

看了那张图,应该清楚了,相当于说在monitor和unmonitor中间的代码,执行的时候会在控制台出口一条音信,里面包涵了函数的称呼a及执行时所传诵的参数。当打消监视(相当于履行unmonitor时)就不再在支配台出口新闻了。

JavaScript

$ // 简单了然就是 document.querySelector 而已。 $$ // 简单明了就是
document.querySelectorAll 而已。 $_ // 是上3个表达式的值 $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 改变输出文字的体制

图片 24

贰 、利用控制台出口图片

图片 25

三 、内定输出文字的样式

图片 26

最后说一下chrome控制台二个简易的操作,怎么样查看页面成分,看下图就知晓了

图片 27

您在决定台不难操作三遍就掌握了,是或不是觉得很不难!

赞 6 收藏
评论

图片 28

原文链接:http://www.open-open.com/lib/view/open1421131601390.html

 

世家都有用过各序列型的浏览器,各个浏览器都有友好的天性,本身拙见,在自身用过的浏览器当中,作者是最开心Chrome的,因为它对于调试脚本及前端设计调试都有它比其余浏览器有过之而无不及的地点。或者我们对console.log会有肯定的打听,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出新闻呢,上面笔者就介绍部分调试的入门技巧,让您爱上console.log

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

图片 29

世家可以见见控制台里面有一首诗还有任何音信,假若想清空控制台,可以点击左上角这么些图片 30来清空,当然也可以通过在支配台输入console.clear()来落到实处清空控制台音讯。如下图所示

图片 31

以后假设3个景色,假设二个数组里面有好多的要素,可是你想通晓各类成分具体的值,这时候想想如若您用alert那将是多惨的一件业务,因为alert阻断线程运维,你不点击alert框的显然按钮下1个alert就不会并发。

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

图片 32

看了地方这张图,是还是不是认识到log的强有力之处了,下边大家来看望console里面具体提供了什么样方法可以供我们平昔调试时使用。

图片 33

当前控制台方法和总体性有:

["$$", "$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 用于出口提醒性音讯

叁 、console.error用于出口错误信息

④ 、console.warn用于出口警示消息

⑤ 、console.debug用于出口调试新闻

用图来发话

图片 34

console对象的地方5种艺术,都可以利用printf风格的占位符。不过,占位符的项目相比较少,只帮助字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)五种。

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

图片 35

%o占位符,可以用来查阅七个目的内部景色

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

图片 36

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

图片 37

七 、console.group输出一组音信的发端

捌 、console.groupEnd截止一组输出消息

看你需求采取不一致的出口方法来利用,假使上述多少个方法再同盟group和groupEnd方法来一同利用就可以输入各个种种的不比款式的出口音信。

图片 38

哈哈,是还是不是觉得很神奇啊!

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

图片 39

十 、console.count(那几个法子十三分实用哦)当你想计算代码被实践的次数

图片 40

1壹 、console.dir(这几个格局是作者每每使用的 可不知道比for in方便了不怎么)
间接将该DOM结点以DOM树的社团举办输出,可以详细核对象的措施发展等等

图片 41

12、console.time 计时起先

1③ 、console.timeEnd 计时甘休(看了上面的图你眨眼之间间就感受到它的立意了)

图片 42

1肆 、console.profile和console.profileEnd合作共同利用来查看CPU使用有关消息

图片 43

在Profiles面板里面查看就足以看看cpu相关应用消息

图片 44

1伍 、console.timeLine和console.timeLineEnd同盟共同记录一段时间轴

1陆 、console.trace 堆栈跟踪相关的调试

上述方法只是本人个人明白罢了。借使想查看具体API,可以上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api

 

下边介绍一下控制台的有的火速键

壹 、方向键盘的上下键,我们一用就清楚。比如用上键就约等于采纳上次在控制台的输入符号

2、$_指令归来近来四遍表达式执行的结果,功效跟按提升的方向键再回车是同样的

图片 45

上面的$_内需领会其奥义才能选取合适,而$0~$4则象征了近年多少个你选取过的DOM节点。

怎样看头?在页面右击采纳审查成分,然后在弹出来的DOM结点树上边随便点选,这个被点过的节点会被记录下来,而$0会重临近日三回点选的DOM结点,以此类推,$1重回的是极品次点选的DOM节点,最多保留了八个,要是不够几个,则重临undefined。

图片 46

叁 、Chrome
控制马普托原生帮衬类jQuery的选拔器,相当于说你可以用$加上驾驭的css接纳器来抉择DOM节点

图片 47

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

图片 48

(哈哈 刚刚从控制台复制的body里面的html可以随意粘贴到哪 比如记事本
是否认为功效很强大)

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

图片 49

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

图片 50

 

 

6、monitor & unmonitor

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

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

图片 51

看了那张图,应该了解了,约等于说在monitor和unmonitor中间的代码,执行的时候会在决定台出口一条新闻,里面富含了函数的名称a及举行时所传诵的参数。当废除监视(也等于履行unmonitor时)就不再在支配台出口新闻了。

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

 

下边看一下console.log的一对技巧

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

图片 52

② 、利用控制台出口图片

图片 53

三 、内定输出文字的样式

图片 54

最终说一下chrome控制台2个简约的操作,怎么着查看页面成分,看下图就通晓了

图片 55

您在支配台简单操作两遍就通晓了,是还是不是觉得很简短!

 

相关文章

发表评论

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

网站地图xml地图