澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站:开发者工具使用,Java

JavaScript在浏览器上的调整本领

2016/11/04 · JavaScript · 8 评论 · 调试

正文小编: 伯乐在线 - TGCode 。未经作者许可,幸免转发!
应接参预伯乐在线 专辑小编。

在网址开垦中,大家难免会碰到各个bug,那时,大家就须要去调度我们的JavaScript脚本找寻标题,然后去改良代码。那我们什么样去调解呢?

最简单易行的正是alert()格局,不过,alert 弹出窗口会中断程序, 何况借使要在循环中彰显消息,就能弹出四个弹窗,你不点击alert框的明确按键下八个alert就不相会世,此外alert 显示对象永久显示为[object ],所以alert()方法只相符小程序。

其次种是断点调节和测量试验

1.在源码上应用debugger

例如:

JavaScript

function check(){ var i=0; debugger; alert(1); } check();

1
2
3
4
5
6
function check(){
var i=0;
debugger;
alert(1);
}
check();

澳门新浦京娱乐场网站 1

能够看来,程序会运维到debugger处就能够停住,并不曾举办后边,你能够按F8来继续试行。

2. 一贯在浏览器上断点,相近是开垦调节台的source,找到你要调度的代码,然后点击你要断点的那风流浪漫行代码的左边行码处,如下图:

澳门新浦京娱乐场网站 2

其三种就是本身最垂怜的console

最常用的就是console.log(),在调整桃园打字与印刷新闻,它能够采纳其余字符串、数字和JavaScript对象,也能够担负换行符n以至制表符t。

JavaScript

var i=0; var name="我是console"; var json={ "key":"console" }; console.log(i); console.log(name); console.log(json);

1
2
3
4
5
6
7
8
var i=0;
var name="我是console";
var json={
"key":"console"
};
console.log(i);
console.log(name);
console.log(json);

澳门新浦京娱乐场网站 3

您可以按红箭头所指的按键衰亡调节台,也足以直接用console.clear()死灭。

自然console可不唯有那三个方法,它还会有:

console.info 用于出口提醒性消息

console.error用于出口错误消息

console.warn用于出口警告音信

console.debug用于出口调节和测验音讯

console.info(“提示”); console.error(“报错了”); console.warn(“警示”); console.debug(“调节和测验信息”);

澳门新浦京娱乐场网站 4

console对象的方面5种方法,都可以运用printf风格的占位符。不过,占位符的花色比非常少,只协理字符(%s卡塔尔、整数(%d或%i卡塔 尔(英语:State of Qatar)、浮点数(%f卡塔尔国和目的(%o卡塔 尔(阿拉伯语:قطر‎五种。

JavaScript

console.log("%s年",2016); console.log("%d年%d月",2016,6); console.log("%f",3.1415); console.log("%o",json);

1
2
3
4
console.log("%s年",2016);
console.log("%d年%d月",2016,6);
console.log("%f",3.1415);
console.log("%o",json);

澳门新浦京娱乐场网站 5

比如您认为下面的输出音信太枯燥了,大家还足以那样:

JavaScript

console.log("%c自定义样式","font-size:20px;color:green"); console.log("%c作者是%c自定义样式","font-size:20px;color:green","font-weight:bold;color:red");

1
2
console.log("%c自定义样式","font-size:20px;color:green");
console.log("%c我是%c自定义样式","font-size:20px;color:green","font-weight:bold;color:red");

澳门新浦京娱乐场网站 6

console.dirxml用来体现网页的有个别节点(node卡塔尔国所包括的html/xml代码

<table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> <script> var table=document.querySelector("table"); console.dirxml(table); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
<script>
var table=document.querySelector("table");
console.dirxml(table);
</script>

澳门新浦京娱乐场网站 7

console.group输出风姿洒脱组音信的启幕

console.groupEnd停止大器晚成组输出信息

JavaScript

console.group("start"); console.log("子项"); console.groupEnd("end"); console.log("aa");

1
2
3
4
console.group("start");
console.log("子项");
console.groupEnd("end");
console.log("aa");

澳门新浦京娱乐场网站 8

console.assert对输入的表达式进行预感,独有表明式为false时,才输出相应的音信到调节台

JavaScript

var isTrue=true; console.assert(isTrue,"小编是八花九裂"); isTrue=false; console.assert(isTrue,"小编是指鹿为马2");

1
2
3
4
var isTrue=true;
console.assert(isTrue,"我是错误");
isTrue=false;
console.assert(isTrue,"我是错误2");

澳门新浦京娱乐场网站 9

console.count  当你想总括代码被实践的次数,这些点子很有用

JavaScript

function play(){ console.count("实践次数:"); } play(); play(); play();

1
2
3
4
5
6
function play(){
     console.count("执行次数:");
}
play();
play();
play();

澳门新浦京娱乐场网站 10

console.dir  直接将该DOM结点以DOM树的布局进行输出,能够详细核对象的格局升高级等

<table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> var table=document.querySelector("table"); console.dir(table);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
 
var table=document.querySelector("table");
console.dir(table);

console.time 计时初叶

console.timeEnd 计时甘休

JavaScript

console.time("array"); var a=0; for(var i=0;i<100000;i ){ a = i; } console.timeEnd("array");

1
2
3
4
5
6
console.time("array");
var a=0;
for(var i=0;i<100000;i ){
a = i;
}
console.timeEnd("array");

澳门新浦京娱乐场网站 11

console.profile和console.profileEnd合营协作利用来查阅CPU使用相关音讯

console.timeLine和console.timeLineEnd同盟合营记录风华正茂段时间轴

打赏支持本人写出越来越多好随笔,多谢!

打赏小编

在网址开辟中,我们难免会遇到各个bug,此时,我们就要求去调解我们的JavaScript脚本寻觅标题,然后去改正代码。那我们什么样去调度呢?

Chrome 控制台console的用法

2015/01/12 · JavaScript · Chrome

原作出处: ctriphire   

世家皆有用过各连串型的浏览器,每一个浏览器皆有温馨的表征,本身拙见,在自己用过的浏览器当中,作者是最欣赏Chrome的,因为它对于调节和测量试验脚本及前端设计调节和测量检验皆有它比任何浏览器纠枉过正的地点。恐怕我们对console.log会有必然的刺探,心里难免会想调节和测量试验的时候用alert不就能够了,干嘛还要用console.log这么一长串的字符串来取代alert输出音信吗,上面笔者就介绍一些调节和测量试验的入门本事,令你爱上console.log

先的简介一下chrome的调控台,张开chrome浏览器,按f12就能够轻巧的打开调节台

澳门新浦京娱乐场网站 12

世家能够看来调控台里面有风姿罗曼蒂克首诗还应该有任何音信,假使想清中央空调节台,能够点击左上角那么些澳门新浦京娱乐场网站 13来清空,当然也能够通过在支配台输入console.clear()来落到实处清空调整台音讯。如下图所示

澳门新浦京娱乐场网站 14

到现在假诺一个情景,如若三个数组里面有数不清的要素,可是你想精通各样成分具体的值,这个时候想一想假若您用alert那将是多惨的大器晚成件业务,因为alert阻断线程运营,你不点击alert框的显明开关下叁个alert就不会现出。

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

澳门新浦京娱乐场网站 15

看了上边那张图,是还是不是意识到log的强盛之处了,上边大家来探视console里面具体提供了哪些措施能够供大家平昔调节和测量试验时利用。

澳门新浦京娱乐场网站 16

时下调控台方法和总体性有:

JavaScript

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

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

上边大家来挨门逐户介绍一下顺序艺术首要的用场。

平时情形下大家用来输入音讯的章程重假如用到如下多少个

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

2、console.info 用来出口提醒性消息

3、console.error澳门新浦京娱乐场网站:开发者工具使用,JavaScript在浏览器上的调试技巧。用于出口错误新闻

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

5、console.debug用来出口调试音信

用图来说话

澳门新浦京娱乐场网站 17

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

澳门新浦京娱乐场网站 18

%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);

澳门新浦京娱乐场网站 19

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>

澳门新浦京娱乐场网站 20

7、console.group出口风流倜傥组消息的起来

8、console.groupEnd截止大器晚成组输出音讯

看你必要选用不相同的输出方法来采纳,假诺上述多个主意再合作group和groupEnd方法来一同行使就足以输入琳琅满指标不等款式的出口音讯。

澳门新浦京娱乐场网站 21

嘿嘿,是还是不是感觉很好看妙啊!

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

澳门新浦京娱乐场网站 22

10、console.count(那么些措施丰盛实用哦卡塔尔当您想总结代码被实践的次数

澳门新浦京娱乐场网站 23

11、console.dir(那几个办法是本人平时利用的 可不知道比for in方便了某些) 直接将该DOM结点以DOM树的结构实行输出,可以详细核对象的秘技发展等等

澳门新浦京娱乐场网站 24

12、console.time 计时启幕

13、console.timeEnd  计时结束(看了上边包车型大巴图你瞬间就体会到它的厉害了卡塔尔国

澳门新浦京娱乐场网站 25

14、console.profileconsole.profileEnd十分协作行使来查阅CPU使用有关新闻

澳门新浦京娱乐场网站 26

在Profiles面板里面查看就能够看看cpu相关应用音讯

澳门新浦京娱乐场网站 27

15、console.timeLineconsole.timeLineEnd万分同盟记录意气风发段时间轴

16、console.trace  货仓追踪相关的调节和测验

上述措施只是本人个人精晓罢了。若是想查看具体API,能够上合法看看,具体地址为:

 

上边介绍一下调整台的一些连忙键

1、方向键盘的上下键,大家意气风发用就清楚。比如用上键就一定于接受上次在调控台的输入符号

2、$_一声令下归来近些日子贰回表明式实践的结果,作用跟按升高的方向键再回车是平等的

澳门新浦京娱乐场网站 28

上面的$_亟待理解其奥义才具动用合适,而$0~$4则象征了近年来5个你选用过的DOM节点。

如何意思?在页面右击选取审查元素澳门新浦京娱乐场网站:开发者工具使用,JavaScript在浏览器上的调试技巧。,然后在弹出来的DOM结点树上边随便点选,那个被点过的节点会被记录下来,而$0会回到近期叁回点选的DOM结点,就那样类推,$1重回的是极品次点选的DOM节点,最多保留了5个,倘若远远不足5个,则赶回undefined

澳门新浦京娱乐场网站 29

3、Chrome 调控台南原生援救类jQuery的选拔器,也正是说你可以用$加上明白的css接收器来抉择DOM节点

澳门新浦京娱乐场网站 30

4、copy通过此命令能够就要调控台获取到的剧情复制到剪贴板

澳门新浦京娱乐场网站 31

(哈哈 刚刚从调整台复制的body里面包车型客车html能够大肆粘贴到哪 比如记事本  是还是不是认为功用很刚劲卡塔 尔(阿拉伯语:قطر‎

5、keys和values 前面四个再次回到传入对象拥有属性名组成的数量,前面一个重回全体属性值组成的数组

澳门新浦京娱乐场网站 32

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

澳门新浦京娱乐场网站 33

 

 

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

黄金时代、console 的对象常用的主意

打赏帮衬笔者写出越多好文章,多谢!

任选大器晚成种支付办法

澳门新浦京娱乐场网站 34 澳门新浦京娱乐场网站 35

2 赞 9 收藏 8 评论

最简易的正是alert()方法,可是,alert 弹出窗口会中断程序, 并且如若要在循环中展现音讯,就能够弹出多个弹窗,你不点击alert框的分明开关下二个alert就不会现身,其余alert 彰显对象永恒呈现为[object ],所以alert()方法只切合小程序。

6、monitor & unmonitor

monitor(function),它选取一个函数名作为参数,比方function a,每次a被施行了,都会在调节台出口一条新闻,里面满含了函数的称号a及进行时所传颂的参数。

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

澳门新浦京娱乐场网站 36

看了那张图,应该精通了,也正是说在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 退换输出文字的样式

澳门新浦京娱乐场网站 37

2、利用调节台出口图片

澳门新浦京娱乐场网站 38

3、钦定输出文字的体裁

澳门新浦京娱乐场网站 39

最终说一下chrome调节台一个简单的操作,怎么样查看页面成分,看下图就知道了

澳门新浦京娱乐场网站 40

你在调控台简单操作二回就知晓了,是或不是以为非常轻松!

赞 6 收藏 评论

澳门新浦京娱乐场网站 41


1、console.log(object[, object, ...])
运用频率最高的一条语句:向调整台出口一条音讯。帮衬 C 语言 printf 式的格式化输出。当然,也得以不应用格式化输出来达到平等的目标

至于小编:TGCode

澳门新浦京娱乐场网站 42

路途虽远,无所畏 个人主页 · 作者的篇章 · 9 ·    

澳门新浦京娱乐场网站 43

第三种是断点调节和测验

先的回顾介绍一下chrome的调整台,展开chrome浏览器,按f12就可以轻巧的张开调控台

 

在源码上行使debugger

澳门新浦京娱乐场网站 44

2、console.debug(object[, object, ...])
向决定台出口一条音讯,它概括二个针对性该行代码地点的超链接。

例如:

世家能够见见调控台里面有生机勃勃首诗还应该有其余新闻,假如想清空气调节器控台,能够点击左上角那些

 

function check(){

澳门新浦京娱乐场网站 45

3、console.info(object[, object, ...])
向决定台出口一条音讯,该信息包括叁个意味“音讯”的Logo,和针对性该行代码地方的超链接。

var i=0;

来清空,当然也足以通过在调整台输入console.clear()来兑现清空气调节器节台音信。如下图所示

 

debugger;

澳门新浦京娱乐场网站 46

4、console.warn(object[, object, ...])

alert(1);

前几天如果三个光景,假如二个数组里面有广大的因素,然则你想清楚各样成分具体的值,当时思考假诺您用alert那将是多惨的大器晚成件专门的学业,因为alert阻断线程运转,你不点击alert框的鲜明按钮下一个alert就不会现身。
上边我们用console.log来替换,体会一下它的诱惑力。

同 info。分裂是Logo与体制差别。

}

澳门新浦京娱乐场网站 47

 

check();

看了上边那张图,是还是不是认识到log的强有力之处了,下边大家来造访console里面具体提供了怎么方法能够供我们一贯调节和测量试验时采取。

5、console.error(object[, object, ...])

能够见见,程序会运营到debugger处就能停住,并不曾进行前边,你能够按F8来继续施行。

澳门新浦京娱乐场网站 48

同 info。差异是图标与体制分歧。error 实际上和 throw new Error() 发生的作用等同,使用该语句时会向浏览器抛出三个 js 非常。

2. 一贯在浏览器上断点,同样是开采调控台的source,找到您要调治的代码,然后点击你要断点的那风姿浪漫行代码的侧面行码处

最近调控台方法和总体性有:
["$$", "$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用来出口调节和测验音信
用图来说话

 

其三种就是自己最心爱的console。


6、console.assert(expression[, object, ...])

最常用的正是console.log(),在调整台南打字与印刷音信,它能够接纳其余字符串、数字和JavaScript对象,也足以承担换行符n以致制表符t。

澳门新浦京娱乐场网站 49

预感,测量试验一条表明式是还是不是为真,不为真时将抛出特别(断言战败卡塔 尔(英语:State of Qatar)。

var i=0;

console对象的方面5种方式,都得以使用printf风格的占位符。可是,占位符的品类相当少,只扶助字符(%s卡塔尔国、整数(%d或%i卡塔 尔(阿拉伯语:قطر‎、浮点数(%f卡塔尔国和对象(%o卡塔尔三种。
console.log("%d年%d月%d日",二〇一一,3,26);console.log("圆周率是%f",3.1415926);

 

var name="我是console";

澳门新浦京娱乐场网站 50

7、console.dir(object)

var json={

%o占位符,能够用来查阅贰个指标内部景色
var dog = {};dog.name = "大毛";dog.color = "黄色";console.log("%o", dog);

出口二个目的的漫个性质(输出结果近似于 DOM 面板中的样式卡塔尔。

"key":"console"

澳门新浦京娱乐场网站 51

 

};

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>

8、console.dirxml(node)
输出贰个 HTML 也许 XML 元素的构造树,点击结构树上边的节点步入到 HTML 面板。

console.log(i);

澳门新浦京娱乐场网站 52

 

console.log(name);

7、console.group输出后生可畏组音讯的开端
8、console.groupEnd终止生机勃勃组输出音讯
看您必要选取差异的输出方法来行使,倘诺上述八个办法再同盟group和groupEnd方法来二只使用就足以输入多姿多彩的例外式样的输出新闻。

9、console.trace()
出口 Javascript 实践时的饭店追踪。

console.log(json);

澳门新浦京娱乐场网站 53

 

你能够按红箭头所指的按键灭绝调控台,也足以直接用console.clear()消逝。

嘿嘿,是否认为超美妙啊!
9、console.assert对输入的表明式实行预见,只有表达式为false时,才输出相应的音讯到调节台

10、console.group(object[, object, ...])
出口音讯的同临时间开拓四个嵌套块,用以缩进输出的剧情。调用 console.groupEnd() 用以了却这么些块的输出。

本来console可不仅仅这二个情势,它还应该有:

澳门新浦京娱乐场网站 54

 

console.info 用于出口提醒性音信

10、console.count(那一个方法十二分实用哦卡塔 尔(阿拉伯语:قطر‎当您想总括代码被试行的次数

11、console.groupCollapsed()
同 console.group(); 差异在于嵌套块暗中同意是收取的。

console.error用于出口错误音信

澳门新浦京娱乐场网站 55

 

console.warn用于出口警告信息

11、console.dir(那些主意是自己不常应用的 可不知道比for in方便了微微)直接将该DOM结点以DOM树的协会实行输出,能够详细查对象的不二秘技发展等等

12、console.time(name)
计时器,当调用 console.timeEnd(name);并传递相像的 name 为参数时,计时结束,并出口奉行两条语句之间代码所费用的时光(阿秒卡塔 尔(阿拉伯语:قطر‎。

console.debug用于出口调节和测量试验新闻

澳门新浦京娱乐场网站 56

 

console.info(“指示”); console.error(“报错了”); console.warn(“警示”); console.debug(“调节和测验音讯”);

12、console.time 计时开首
13、console.timeEnd 计时甘休(看了上边包车型客车图你须臾间就体会到它的狠心了卡塔 尔(阿拉伯语:قطر‎

13、console.profile([title])
与 profileEnd() 结合使用,用来做品质测量试验,与 console 面板上 profile 开关的功能完全相像。

console对象的上边5种办法,都得以行使printf风格的占位符。然而,占位符的档案的次序相当少,只扶助字符(%s卡塔尔国、整数(%d或%i卡塔 尔(阿拉伯语:قطر‎、浮点数(%f卡塔尔和对象(%o卡塔 尔(英语:State of Qatar)二种。


 

console.log("%s年",2016);

澳门新浦京娱乐场网站 57

14、console.count([title])
输出该行代码被实施的次数,参数 title 就要出口时作为出口结果的前缀使用。

console.log("%d年%d月",2016,6);

14、console.profile和console.profileEnd合作协同利用来查看CPU使用有关新闻

 

console.log("%f",3.1415);

澳门新浦京娱乐场网站 58

15、console.clear()
清空气调节器节台

console.log("%o",json);

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

 

比如你感觉上边的输出消息太单调了,我们还足以如此:

澳门新浦京娱乐场网站 59

二、使用console调节和测量试验JS脚本实例

console.log("%c自定义样式","font-size:20px;color:green");

15、console.timeLineconsole.timeLineEnd优越协作记录意气风发段时间轴
16、console.trace 仓库追踪相关的调节和测量试验
上述措施只是本人个人知道罢了。假诺想查看具体API,能够上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api
调节台的生龙活虎对急速键
1、方向键盘的上下键,大家黄金年代用就领会。例如用上键就也正是采纳上次在调整台的输入符号
2、$_指令归来这段日子一回表明式实施的结果,作用跟按提升的方向键再回车是同等的

 

console.log("%c作者是%c自定义样式","font-size:20px;color:green","font-weight:bold;color:red");

澳门新浦京娱乐场网站 60

1、console.log()

console.dirxml用来展现网页的某部节点(node卡塔 尔(英语:State of Qatar)所包含的html/xml代码

上面的$_
亟待理解其奥义能力使用万分,而0
4则表示了前几天5个你筛选过的DOM节点。
如何意思?在页面右击选用核实成分
,然后在弹出来的DOM结点树上边随意点选,这几个被点过的节点会被记录下来,而$0
会回来近期壹遍点选的DOM结点,就那样推算,$1再次来到的是最佳次点选的DOM节点,最多保留了5个,若是远远不够5个,则重临undefined

 

var table=document.querySelector("table");

澳门新浦京娱乐场网站 61

最轻松易行的主意是console.log(),能够用来替代alert()或document.write()。

console.dirxml(table);

3、Chrome 调整台南原生援救类jQuery的选用器,也便是说你可以用$
加上熟识的css接受器来筛选DOM节点

别的,依照音讯的比不上性质,console对象还会有4种突显信息的措施,分别是平日音信console.info()、除错音讯console.debug()、警示提醒console.warn()、错误提醒console.error()。

console.group输出生龙活虎组新闻的初叶

澳门新浦京娱乐场网站 62

例如

console.groupEnd甘休大器晚成组输出新闻

4、copy由此此命令可以就要调整台获取到的剧情复制到剪贴板

 

console.group("start");

澳门新浦京娱乐场网站 63

  console.info("这是info");

console.log("子项");

(哈哈 刚刚从调节台复制的body里面包车型大巴html能够轻便粘贴到哪, 比方记事本, 是或不是感觉功效很刚劲卡塔 尔(英语:State of Qatar)
5、keys和values前面八个重临传入对象具有属性名组成的数量,前者再次回到全数属性值组成的数组

  console.debug("这是debug");

console.groupEnd("end");

澳门新浦京娱乐场网站 64

  console.warn("这是warn");

console.log("aa");

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

  console.error("这是error");

console.assert对输入的表达式进行预感,独有表明式为false时,才输出相应的新闻到调节台

澳门新浦京娱乐场网站 65

 

var isTrue=true;

6、monitor & unmonitor
monitor(function),它接收叁个函数名作为参数,举个例子function a
,每次a
被施行了,都会在调控台出口一条音信,里面包涵了函数的名称a
及施行时所传颂的参数。
而unmonitor(function)正是用来终止这一监听。

加载时,调整台会展现如下内容

console.assert(isTrue,"作者是不对");

澳门新浦京娱乐场网站 66

 

isTrue=false;

看了那张图,应该明了了,也正是说在monitor和unmonitor中间的代码,施行的时候会在调节台出口一条音讯,里面饱含了函数的名称a
及施行时所传诵的参数。当免除监视(约等于实行unmonitor时)就不再在支配台出口音信了。
$ // 老妪能解正是 document.querySelector 而已。
$$ // 老妪能解正是 document.querySelectorAll 而已。
$_ // 是上贰个表达式的值
0−
4 // 是多年来5个Elements面板选中的DOM成分,待会会讲。
dir // 其实就是 console.dir
keys // 取对象的键名, 再次来到键名组成的数组
values // 去对象的值, 再次来到值组成的数组

澳门新浦京娱乐场网站 67

console.assert(isTrue,"作者是大谬否则2");

上边看一下console.log的一些才具
1、重写console.log 改动输出文字的样式

 

console.count  当您想总括代码被实行的次数,这几个艺术很有用

澳门新浦京娱乐场网站 68

 

function play(){

2、利用调节台出口图片

2、占位符

    console.count("执行次数:");

澳门新浦京娱乐场网站 69

console对象的地点5种格局,都能够使用printf风格的占位符。但是,占位符的门类相当少,只援助字符(%s卡塔 尔(英语:State of Qatar)、整数(%d或%i卡塔尔国、浮点数(%f卡塔 尔(英语:State of Qatar)和目的(%o卡塔尔各种。

}

3、钦定输出文字的体裁

例如

play();

澳门新浦京娱乐场网站 70

  console.log("%d年%d月%d日",2011,3,26);

play();

末尾说一下chrome调整台叁个归纳的操作,如何查看页面元素,看下图就知道了

  console.log("圆周率是%f",3.1415926);

play();

澳门新浦京娱乐场网站 71

 

console.dir  间接将该DOM结点以DOM树的构造举行输出,可以详细核对象的措施升高端等

%o占位符,能够用来查阅二个对象内部景色。比方,有那般一个指标

var table=document.querySelector("table");

  var dog = {} ;

console.dir(table);

  dog.name = "大毛" ;

console.time 计时开始

  dog.color = "黄色";

console.timeEnd 计时截至

 

console.time("array");

%o占位符的运用

var a=0;

 

for(var i=0;i<100000;i ){

console.log("%o",dog);

a = i;

 

}

来得如图

console.timeEnd("array");

 

console.profile和console.profileEnd合作同盟利用来查阅CPU使用相关新闻

澳门新浦京娱乐场网站 72

console.timeLine和console.timeLineEnd协作协作记录风姿罗曼蒂克段时间轴

 

 

 

3、console.dir()查看对象的新闻

 

console.dir()能够显示一个目的具有的性质和章程。

 

例如

 

    <script type="text/javascript">
           var info = {
                blog:"ddd",
                tel:25422223,
                message:"欢迎你使用"
            };
           console.dir(info);
    </script>

 

4、console.dirxml() 展现有个别节点的源委

 

console.dirxml()用来展现网页的某些节点(node卡塔尔国所包括的html/xml代码。

例如

var table = document.getElementById("table1");

console.dirxml(table);

 

5、console.assert()推断变量是还是不是是真

 

console.assert()用来决断四个表明式或变量是或不是为真。要是结果为否,则在调控台出口一条相应信息,并且抛出贰个格外。

例如

  var result = 1;

  console.assert( result );

  var year = 2000;

  console.assert(year == 2011 );

 

 

6、console.trace()

 

console.trace()用来追踪函数的调用轨迹。

 

 

7、console.time()和console.timeEnd()

 

用来浮现代码的运作时刻。

例如

  console.time("电磁照望计时器豆蔻年华");

  for(var i=0;i<1000;i ){

    for(var j=0;j<1000;j ){}

  }

  console.timeEnd("电磁打点计时器生龙活虎");

效果

澳门新浦京娱乐场网站 73

 

 

8、console.profile()

质量剖判(Profiler卡塔 尔(阿拉伯语:قطر‎便是解析程序种种部分的周转时刻,搜索瓶颈所在,使用的方式是console.profile()。

 

例如

  console.profile('品质深入分析器意气风发');

  Foo();

  console.profileEnd();

 

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站:开发者工具使用,Java