Chrome 调整台console的用法(转)

by admin on 2019年10月4日

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

 

 

一、查看命令

下边大家来拜谒console里面具体提供了哪些方法能够供大家一向调节和测量试验时利用。

图片 23

现阶段调节台方法和总体性有:

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

上面我们来家家户户介绍一下一一艺术首要的用处。

console里面具体有怎么样方法:

图片 24

Paste_Image.png

6、monitor & unmonitor

monitor(function),它接受三个函数名作为参数,比方function a,每次a被试行了,都会在决定台出口一条消息,里面含有了函数的名号a及试行时所传诵的参数。

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

图片 25

看了那张图,应该知道了,也便是说在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 改动输出文字的体裁

图片 26

2、利用调节台出口图片

图片 27

3、钦赐输出文字的样式

图片 28

末尾说一下chrome调整台一个轻巧易行的操作,怎么样查看页面成分,看下图就领悟了

图片 29

您在调控台轻巧操作叁遍就了然了,是否以为很简短!

赞 6 收藏
评论

图片 30

二、命令介绍

貌似景观下我们用来输入消息的艺术首尽管用到如下七个:

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

2、console.info 用来出口提醒性新闻

3、console.error用于出口错误音信

4、console.warn用以出口警示消息

用图来讲话:

图片 31

6、console.groupEnd竣事一组输出音讯

看您需求选取差别的输出方法来行使,假如上述七个办法再合营group和groupEnd方法来八只使用就能够输入丰富多彩的不等款型的出口消息。

图片 32

7、console.assert对输入的表明式实行预感,唯有表明式为false时,才输出相应的新闻到调节台。

图片 33

8、console.count(那几个方法丰硕实用哦)当您想计算代码被实施的次数。

图片 34

9、console.dir(那个措施是自己时常利用的 可不知道比for
in方便了有一点) 直接将该DOM结点以DOM树的布局举办输出,能够详细核对象的不二秘诀进步档等。

图片 35

10、console.time 计时最早。console.timeEnd  计时截止(看了上边的图你须臾间就感受到它的狠心了)

图片 36

11、keys和values 前者再次来到传入对象具有属性名组成的数量,后面一个再次来到全数属性值组成的数组。

图片 37

12、console.table方法

图片 38

13、Chrome
调整高雄原生帮忙类jQuery的选取器
,也正是说你能够用$丰裕熟谙的css采取器来抉择DOM节。

图片 39

14、console.profileconsole.profileEnd相称共同使用来查阅CPU使用有关音信。

图片 40

 

常用的格局

  • 1.console.log用来出口普通新闻
  • 2.console.info用来出口提醒性音讯
  • 3.console.error用以出口错误音讯
  • 4.console.warn用来出口警示新闻
  • 5.console.debug用来出口调节和测验音讯

图片 41

Paste_Image.png

三、使用总结

console对象的方面5种情势,都得以选用printf风格的占位符。可是,占位符的项目相当少,只扶助字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)八种:

图片 42

Paste_Image.png

1、修改javascript代码

无尽人赶过手动修改脚本后,然后不奏效。

a、独立的js文件的修改章程

  在F12调节和测验分界面中期维修改的JS代码,是修改的“本地缓存文件”中的代码,并非存在于服务器上的网页的真正代码,网页的真的代码在浏览器中是无力回天修改的。

  Chrome开荒者调节和测量检验工具(F12),能够在调度分界面修改代码(包蕴JS、HTML和CSS)模拟本地运维,具体步骤差不离如下:

  在急需修改的代码段上方合理代码行设置断点;按F5键刷新网页,并听候网页实践到断点;修改JS代码或别的必要修改的代码,修改后选用单步推行或继续实施就可以。

  常常,调节和测量检验中期维修改无效,是因为网页加载成功,其实即是运转已经实现了,修改代码不会再次实行。

b、修改html上的js

  js写在html的脚本区域上,这时在source面板下是力不能及编辑的,但在Elements依旧得以的。

  修改章程正是一向将js代码修改,然后在console再施行一次。

  破绽:没有办法调整已经实行的本子

 

原文:

相关推荐:

 

keys(重临传入对象所在属性名组成的多寡)和values(重返全体属性值组成的数组)

图片 43

Paste_Image.png

%o占位符,可以用来查看二个对象底细

图片 44

Paste_Image.png

发表评论

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

网站地图xml地图