澳门新萄京:用法图文详解_javascript技巧_脚本之
分类:服务器

我们都有用过各种类型的浏览器,每一种浏览器都有温馨的性状,自身拙见,在本身用过的浏览器在那之中,小编是最赏识Chrome的,因为它对于调节和测验脚本及前端设计调节和测验皆有它比其余浏览器太急解决不了难题的地点。可能大家对console.log会有必然的垂询,心里难免会想调节和测量检验的时候用alert不就能够了,干嘛还要用console.log这么一长串的字符串来替代alert输出音讯呢,上面小编就介绍部分调节和测量检验的入门本事,让您爱上console.log

先前不晓得console这么强盛,还是能够计算时间,深入分析品质瓶颈。很有意思

先的简要介绍一下chrome的调控台,张开chrome浏览器,按f12就足以轻巧的开发调节台

先的简单介绍一下chrome的调控台,展开chrome浏览器,按f12就能够轻便的张开调控台

原稿链接:

澳门新萄京 1

世家能够观望调节台里面有生机勃勃首诗还大概有任何音信,若是想清中央空调整台,能够点击左上角这一个来清空,当然也得以透过在决定台输入console.clear(卡塔尔来兑现清中央空调节台音信。如下图所示

 

世家能够观望调控台里面有风流倜傥首诗还应该有其它新闻,假如想清空气调节器整台,能够点击左上角那些澳门新萄京 2来清空,当然也得以由此在调节台输入console.clear(卡塔尔(英语:State of Qatar)来落到实处清空气调节器整台音讯。如下图所示

现今借使三个情景,假设三个数组里面有为数不菲的因素,但是你想知道各种成分具体的值,那时候出主意假若你用alert那将是多惨的风华正茂件业务,因为alert阻断线程运营,你不点击alert框的分明按键下叁个alert就不会产出。

世家皆有用过各连串型的浏览器,各种浏览器皆有谈得来的性状,本人拙见,在自己用过的浏览器个中,小编是最欢愉Chrome的,因为它对于调节和测量试验脚本及前端设计调节和测量试验都有它比别的浏览器太急解决不了难点的地点。也许我们对console.log会有早晚的垂询,心里难免会想调节和测量试验的时候用alert不就可以了,干嘛还要用console.log这么一长串的字符串来代替alert输出消息吗,下边小编就介绍一些调治的入门才具,令你喜欢上console.log

澳门新萄京 3

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

先的大致介绍一下chrome的调控台,张开chrome浏览器,按f12就能够轻便的展开调控台

现行反革命若是三个场景,假若二个数组里面有相当多的因素,可是你想理解各种元素具体的值,当时思考要是你用alert那将是多惨的大器晚成件业务,因为alert阻断线程运行,你不点击alert框的分明开关下二个alert就不会现身。

看了地点那张图,是否意识到log的强盛之处了,上面大家来探视console里面具体提供了什么样措施能够供大家平常调节和测量检验时采取。

澳门新萄京 4

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

时下调节台方法和性质有:

世家能够看来调节台里面有风流罗曼蒂克首诗还也许有任何新闻,假若想清空气调节器节台,能够点击左上角那些澳门新萄京 5来清空,当然也得以通过在决定台输入console.clear(卡塔尔国来兑现清中央空调节台音讯。如下图所示

澳门新萄京 6

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

澳门新萄京 7

看了地方这张图,是或不是意识到log的有力之处了,上面我们来看看console里面具体提供了哪些措施能够供大家日常调节和测量试验时选拔。

上面大家来挨门逐户介绍一下逐项艺术首要的用项。

几眼下大器晚成经二个场所,借使一个数组里面有广大的成分,可是你想明白各样元素具体的值,那个时候思考假如你用alert那将是多惨的风流浪漫件工作,因为alert阻断线程运维,你不点击alert框的鲜明开关下二个alert就不会并发。

澳门新萄京 8

诚如景况下大家用来输入信息的点子首假若用到如下三个

上边大家用console.log来替换,体会一下它的吸重力。

近日调控台方法和属性有:

["$$", "$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用以出口调节和测量试验消息

用图来说话

澳门新萄京 9

console对象的地点5种方式,都能够使用printf风格的占位符。可是,占位符的连串少之又少,只帮忙字符(%s)、整数(%d或%i)、浮点数(%f)和目的(%o)五种

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

澳门新萄京 10

%o占位符,能够用来查阅二个指标内部景观

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

澳门新萄京 11

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>

澳门新萄京 12

7、console.group澳门新萄京:用法图文详解_javascript技巧_脚本之家。出口意气风发组新闻的始发

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

看您供给选拔分裂的出口方法来利用,借使上述四个办法再协作group和groupEnd方法来二只使用就能够输入多姿多彩的例外式样的出口新闻。

澳门新萄京 13

嘿嘿,是还是不是感觉很神奇啊!

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

澳门新萄京 14

10、console.count(那一个点子丰裕实用哦)当你想计算代码被实践的次数

澳门新萄京 15

11、console.dir(这一个点子是本身时常使用的 可不知道比for in方便了有个别卡塔尔(英语:State of Qatar)直接将该DOM结点以DOM树的组织举行输出,能够详细核查象的艺术发展等等

澳门新萄京 16

12、console.time 计时起先

13、console.timeEnd 计时甘休(看了上面包车型地铁图你须臾间就体会到它的厉害了)

澳门新萄京 17

14、console.profileconsole.profileEnd相称合作利用来查阅CPU使用有关消息

澳门新萄京 18

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

澳门新萄京 19

15、console.timeLineconsole.timeLineEnd合营同盟记录大器晚成段时间轴

16、console.trace 酒馆跟踪相关的调试

上述办法只是自己个人知道罢了。即便想查看具体API,能够上合法看看,具体地址为:

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

澳门新萄京 20

调节台的部分火速键

1、方向键盘的上下键,大家风流倜傥用就掌握。比方用上键就相当于接受上次在调控台的输入符号

2、$_命令归来如今贰遍表明式施行的结果,作用跟按提升的方向键再回车是同等的

澳门新萄京 21

上面的$_急需精通其奥义才具选拔极度,而0 4则意味着了方今5个你筛选过的DOM节点。

什么样看头?在页面右击选用审查元素,然后在弹出来的DOM结点树上面随意点选,这几个被点过的节点会被记录下来,而$0会再次来到前段时间一遍点选的DOM结点,就那样推算,$1再次来到的是最棒次点选的DOM节点,最多保留了5个,假如远远不足5个,则赶回undefined

澳门新萄京 22

3、Chrome 调整台中原生援救类jQuery的接收器,也等于说你能够用$增长熟练的css选用器来抉择DOM节点

澳门新萄京 23

4、copy透过此命令能够将在调控台获取到的剧情复制到剪贴板

澳门新萄京 24

(哈哈 刚刚从调整台复制的body里面包车型大巴html能够轻巧粘贴到哪, 譬喻记事本, 是或不是以为作用很刚劲)

5、keys和values前面二个重临传入对象拥有属性名组成的数据,后面一个再次来到全体属性值组成的数组

澳门新萄京 25

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

澳门新萄京 26

6、monitor & unmonitor

monitor(function卡塔尔国,它接收二个函数名作为参数,比方function a,每次a被施行了,都会在支配台出口一条消息,里面含有了函数的称谓a及进行时所传颂的参数。

而unmonitor(function卡塔尔国正是用来终止这一监听。

澳门新萄京 27

看了那张图,应该清楚了,也便是说在monitor和unmonitor中间的代码,执行的时候会在调控台出口一条音信,里面富含了函数的名目a及实行时所盛传的参数。当裁撤监视(也正是试行unmonitor时)就不再在决定台出口信息了。

  • $ // 老妪能解便是 document.querySelector 而已。
  • $$ // 老妪能解正是 document.querySelectorAll 而已。
  • $_ // 是上贰个表明式的值
  • 0−4 // 是近些年5个Elements面板选中的DOM成分,待会会讲。
  • dir // 其实正是 console.dir
  • keys // 取对象的键名, 再次回到键名组成的数组
  • values // 去对象的值, 重回值组成的数组

上面看一下console.log的大器晚成对技能

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

澳门新萄京 28

2、利用调控台出口图片

澳门新萄京 29

3、钦赐输出文字的体裁

澳门新萄京 30

最后说一下chrome调节台多个轻易易行的操作,怎么样查看页面成分,看下图就精通了

澳门新萄京 31

你在支配台轻易操作一次就精通了,是或不是感觉异常粗略!

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

看了上边这张图,是或不是意识到log的刚劲之处了,下边大家来看看console里面具体提供了哪些方法能够供大家一直调试时接受。

3、console.error用来出口错误信息

澳门新萄京 32

4、console.warn用来出口警报新闻

现阶段调控台方法和性质有:

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

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

console对象之处5种艺术,都能够选拔printf风格的占位符。可是,占位符的品类少之又少,只支持字符和对象三种

上边我们来挨门逐户介绍一下生机勃勃一艺术重要的用项。

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

肖似景色下大家用来输入信息的形式首借使用到如下几个

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

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

var dog = {};dog.name = "大毛";dog.color = "黄色";console.log;

2、console.info 用于出口提示性新闻

6、console.dirxml用来体现网页的某部节点所包含的html/xml代码

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

A A A
bbb aaa ccc
111 333 222

4、console.warn用于出口警告新闻

7、console.group出口生龙活虎组消息的上马

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

8、console.groupEnd利落风流罗曼蒂克组输出音信

用图来说话

看您需求选取分化的出口方法来利用,固然上述多少个方式再合作group和groupEnd方法来一齐利用就能够输入各式各样的例外款型的出口音信。

澳门新萄京 33

嘿嘿,是否以为很奇妙啊!

console对象的上边5种情势,都足以使用printf风格的占位符。可是,占位符的连串相当少,只辅助字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)各个。

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

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

10、console.count当你想总括代码被实践的次数

澳门新萄京 34

11、console.dir(那一个法子是本人屡屡利用的 可不知道比for in方便了不怎么卡塔尔(英语:State of Qatar)间接将该DOM结点以DOM树的布局举行输出,能够详细核对象的方法升高档等

%o占位符,能够用来查阅二个指标内部景观

12、console.time计时上马

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

13、console.timeEnd计时甘休

澳门新萄京 35

14、console.profileconsole.profileEnd相配协同利用来查看CPU使用有关音讯

6、console.dirxml用来突显网页的某部节点(node)所蕴藏的html/xml代码

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

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

15、console.timeLineconsole.timeLineEnd十一分合作记录风姿浪漫段时间轴

澳门新萄京 36

16、console.trace酒馆追踪相关的调解

7、console.group输出生机勃勃组音讯的启幕

上述办法只是本身个人知道罢了。假设想查看具体API,能够上合法看看,具体地址为:

8、console.groupEnd甘休意气风发组输出音讯

1、方向键盘的上下键,大家后生可畏用就领悟。比方用上键就一定于选择上次在调控台的输入符号

看您须求选拔不相同的出口方法来利用,纵然上述多个措施再合营group和groupEnd方法来一齐利用就可以输入五颜六色的不如款式的出口消息。

2、$_命令归来近日三回表明式实行的结果,功用跟按进步的方向键再回车是同等的

澳门新萄京 37

上面的$_亟需精通其奥义技巧利用方便,而$0~$4则象征了目前5个你选用过的DOM节点。

哈哈,是或不是以为很奇妙啊!

怎么着意思?在页面右击选取审查元素,然后在弹出来的DOM结点树下边随意点选,这几个被点过的节点会被记录下来,而$0会回到近期三回点选的DOM结点,由此及彼,$1再次回到的是精品次点选的DOM节点,最多保留了5个,若是非常不够5个,则赶回undefined

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

3、Chrome 调控新北原生支持类jQuery的采用器,也便是说你能够用$拉长精晓的css选拔器来选拔DOM节点

澳门新萄京 38

4、copy经过此命令能够就要调节台获取到的开始和结果复制到剪贴板

10、console.count(那些主意十分实用哦)当您想计算代码被实行的次数

(哈哈 刚刚从调整台复制的body里面包车型客车html能够随心所欲粘贴到哪, 比如记事本, 是还是不是认为效用很强大)

澳门新萄京 39

5、keys和values前面二个再次回到传入对象具有属性名组成的数目,前面一个再次来到全部属性值组成的数组

11、console.dir(那几个艺术是作者时常接收的 可不知道比for in方便了有一点点卡塔尔(英语:State of Qatar)间接将该DOM结点以DOM树的布局举行输出,可以详细核对象的办法发展等等

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

澳门新萄京 40

6、monitor & unmonitor

12、console.time 计时早前

monitor,它选拔一个函数名作为参数,比如function a,每次a被实践了,都会在决定台出口一条新闻,里面蕴含了函数的称号a及试行时所传诵的参数。

13、console.timeEnd 计时截至(看了上面的图你弹指间就体会到它的决定了)

而unmonitor就是用来终止那第一监狱听。

澳门新萄京 41

看了那张图,应该了然了,相当于说在monitor和unmonitor中间的代码,推行的时候会在决定台出口一条消息,里面包涵了函数的名称a及实践时所盛传的参数。当撤废监视就不再在决定台出口信息了。

14、console.profile和console.profileEnd合营协作利用来查看CPU使用相关讯息

$ // 老妪能解正是 document.querySelector 而已。$$ // 轻巧领会正是document.querySelectorAll 而已。$_ // 是上贰个表明式的值$0-$4 // 是多年来5个Elements面板选中的DOM成分,待会会讲。dir // 其实就是console.dirkeys // 取对象的键名, 重返键名组成的数组values // 去对象的值, 重临值组成的数组

澳门新萄京 42

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

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

1、重写console.log 校勘输出文字的样式

澳门新萄京 43

2、利用调节台出口图片

15、console.timeLine和console.timeLineEnd合营合营记录生机勃勃段时间轴

3、钦定输出文字的体制

16、console.trace 货仓追踪相关的调护治疗

最终说一下chrome调整台多个简便的操作,怎样查看页面成分,看下图就清楚了

上述情势只是本身个人理解罢了。如若想查看具体API,能够上合法看看,具体地址为:

您在支配台轻便操作三遍就精晓了,是否感觉超粗略!

 

上面介绍一下调节台的有的神速键

1、方向键盘的上下键,我们意气风发用就掌握。比方用上键就一定于选用上次在调整台的输入符号

2、$_命令归来方今壹回表明式实行的结果,作用跟按升高的方向键再回车是相近的

澳门新萄京 44

上面的$_急需通晓其奥义本事运用方便,而$0~$4则代表了近年5个你筛选过的DOM节点。

哪些意思?在页面右击接受调查元素,然后在弹出来的DOM结点树下面随意点选,那一个被点过的节点会被记录下来,而$0会回去近期一回点选的DOM结点,由此及彼,$1重返的是一级次点选的DOM节点,最多保留了5个,即使相当不够5个,则重回undefined。

澳门新萄京 45

3、Chrome 调控高雄原生援助类jQuery的接受器,也正是说你可以用$加上熟谙的css接受器来筛选DOM节点

澳门新萄京 46

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

澳门新萄京 47

(哈哈 刚刚从调节台复制的body里面的html能够无约束粘贴到哪 举例记事本 是还是不是以为效能很强大)

5、keys和values 前边多少个重返传入对象具有属性名组成的多寡,后面一个再次回到全数属性值组成的数组

澳门新萄京 48

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

澳门新萄京 49

 

 

6、monitor & unmonitor

monitor(function卡塔尔(英语:State of Qatar),它选取叁个函数名作为参数,举例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

你在调整台简单操作叁遍就通晓了,是否认为异常粗略!

 

本文由澳门新萄京发布于服务器,转载请注明出处:澳门新萄京:用法图文详解_javascript技巧_脚本之

上一篇:澳门新萄京:写一个简单的发布和订阅,ROS主题 下一篇:没有了
猜你喜欢
热门排行
精彩图文