您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 1010cc时时彩经典版:调整台怎样行使,调整台不

1010cc时时彩经典版:调整台怎样行使,调整台不

发布时间:2019-11-10 19:10编辑:1010cc时时彩客户端浏览(175)

    Chrome 调节台不完全指南

    2015/01/10 · JavaScript · 1 评论 · Chrome

    正文作者: 伯乐在线 - 刘哇勇 。未经我许可,禁绝转载!
    迎接参加伯乐在线 专栏审核人。

    Chrome的开辟者工具已经强盛到没朋友的境地了,特别是其效果丰盛分界面友好的console,使用特出能够宛如下成效:

    • 更加高「逼格」更加快「开采调节和测量试验」更强「进级级的Frontender」
    • Bug无处遁形「Console大法好」

    前言

    Chrome 控制台console的用法

    2015/01/12 · JavaScript · Chrome

    原稿出处: ctriphire   

    世家皆有用过各连串型的浏览器,每个浏览器都有友好的特点,自身拙见,在本身用过的浏览器此中,小编是最开心Chrome的,因为它对于调节和测量试验脚本及前端设计调试都有它比其它浏览器有过之而无不如的地点。或者大家对console.log会有鲜明的垂询,心里难免会想调节和测验的时候用alert不就能够了,干嘛还要用console.log这么一长串的字符串来代替alert输出音讯吗,下边笔者就介绍部分调治的入门本事,让您爱上console.log

    先的回顾介绍一下chrome的调控台,打开chrome浏览器,按f12就能够轻易的开发调控台

    1010cc时时彩经典版 1

    世家能够见见调控台里面有黄金时代首诗还恐怕有任何新闻,假使想清中央空调控台,能够点击左上角那多少个1010cc时时彩经典版 2来清空,当然也能够通过在支配台输入console.clear()来促成清空气调节器控台音信。如下图所示

    1010cc时时彩经典版 3

    现今假若七个意况,假诺叁个数组里面有过多的要素,不过你想知道各类成分具体的值,那时动脑假诺您用alert那将是多惨的风流洒脱件业务,因为alert阻断线程运维,你不点击alert框的明确开关下一个alert就不会冒出。

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

    1010cc时时彩经典版 4

    看了下边那张图,是否意识到log的强盛之处了,上边大家来拜望console里面具体提供了什么样方法能够供大家一直调试时接纳。

    1010cc时时彩经典版 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用以出口调节和测量检验信息

    用图来说话

    1010cc时时彩经典版 6

    console对象的下面5种方法,都得以行使printf风格的占位符。但是,占位符的品种比较少,只援助字符(%s卡塔尔国、整数(%d或%i卡塔 尔(阿拉伯语:قطر‎、浮点数(%f卡塔尔国和对象(%o卡塔 尔(英语:State of Qatar)二种

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

    1010cc时时彩经典版 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);

    1010cc时时彩经典版 8

    6、console.dirxml用来显示网页的某部节点(node卡塔 尔(英语:State of Qatar)所包蕴的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>

    1010cc时时彩经典版 9

    7、console.group输出生机勃勃组音讯的初阶

    8、console.groupEnd告竣风姿洒脱组输出音信

    看你要求接纳分歧的出口方法来接收,倘使上述多少个主意再合营group和groupEnd方法来二头行使就足以输入形形色色的例外款型的出口消息。

    1010cc时时彩经典版 10

    哈哈,是还是不是感到绝对美丽妙啊!

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

    1010cc时时彩经典版 11

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

    1010cc时时彩经典版 12

    11、console.dir(这几个法子是自家时常应用的 可不知道比for in方便了有一点点) 直接将该DOM结点以DOM树的布局进行输出,能够详细核对象的不二等秘书技升高等等

    1010cc时时彩经典版 13

    12、console.time 计时早先

    13、console.timeEnd  计时截至(看了上面包车型客车图你弹指间就心得到它的狠心了卡塔 尔(阿拉伯语:قطر‎

    1010cc时时彩经典版 14

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

    1010cc时时彩经典版 15

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

    1010cc时时彩经典版 16

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

    16、console.trace  仓库追踪相关的调解

    上述方法只是自家个人了然罢了。假使想查看具体API,能够上合法看看,具体地址为:

     

    上边介绍一下调节台的生龙活虎对赶快键

    1、方向键盘的上下键,大家风流浪漫用就知道。举例用上键就一定于接纳上次在调整台的输入符号

    2、$_命令归来近来贰遍表明式实践的结果,功用跟按升高的方向键再回车是生机勃勃致的

    1010cc时时彩经典版 17

    上面的$_亟待明白其奥义手艺动用方便,而$0~$4则表示了方今5个你挑选过的DOM节点。

    怎样意思?在页面右击采纳审查元素,然后在弹出来的DOM结点树上边随意点选,这几个被点过的节点会被记录下来,而$0会回去方今壹次点选的DOM结点,由此及彼,$1重回的是拔尖次点选的DOM节点,最多保留了5个,假若缺乏5个,则赶回undefined

    1010cc时时彩经典版 18

    3、Chrome 调节台北原生支持类jQuery的接纳器,也正是说你能够用$加上纯熟的css选用器来选用DOM节点

    1010cc时时彩经典版 19

    4、copy因而此命令能够将要调节台获取到的内容复制到剪贴板

    1010cc时时彩经典版 20

    (哈哈 刚刚从调整台复制的body里面包车型地铁html可以Infiniti定粘贴到哪 举个例子记事本  是还是不是以为作用很强盛卡塔 尔(阿拉伯语:قطر‎

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

    1010cc时时彩经典版 21

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

    1010cc时时彩经典版 22

     

     

    Chrome的开拓者工具已经强大到没朋友的境地了,极其是其成效丰盛分界面友好的console,使用分外能够有如下功能:

    console.log

    世家都会用log,但鲜有人很好地接受console.error , console.warn 等将出口到调控台的音信举办分类收拾。
    他们功效界别非常小,意义在于将出口到调节台的新闻进行分类,也许说让它们更语义化。
    各样所代表的语义如下:

    • console.log:普通音讯
    • console.info:提醒类新闻
    • console.error:错误消息
    • console.warn:警报信息

    当合理采用上述log方法后,能够很便利地在调控台选拔查看特定项目标消息。

    JavaScript

    console.log('风度翩翩颗红心向太阳','吼吼~'); console.info('楼上药不能够停!'); console.warn('楼上嘴太贱!'); console.error('楼上关你毛事?');

    1
    2
    3
    4
    console.log('一颗红心向太阳','吼吼~');
    console.info('楼上药不能停!');
    console.warn('楼上嘴太贱!');
    console.error('楼上关你毛事?');

    1010cc时时彩经典版 23

    要是再合营console.group 与console.groupEnd,能够将这种分类管理的讨论发挥到十二万分。那适合于在支付八个范围十分大模块超多很复杂的Web 应用软件时,将分别的log音信分组到以各自命名空间为名称的组里面。

    JavaScript

    console.group("app.foo"); console.log("来自foo模块的音信 blah blah blah..."); console.groupEnd(); console.group("app.bar"); console.log("来自bar模块的音信 blah blah blah..."); console.groupEnd();

    1
    2
    3
    4
    5
    6
    console.group("app.foo");
    console.log("来自foo模块的信息 blah blah blah...");
    console.groupEnd();
    console.group("app.bar");
    console.log("来自bar模块的信息 blah blah blah...");
    console.groupEnd();

    1010cc时时彩经典版 24

    而关于console.log,早就被愚弄坏了。一切都源于Chrome提供了如此四个API:第一个参数能够包罗部分格式化的通令举个例子%c

    比如给hello world 做件美丽的嫁衣再拉出去见人:

    JavaScript

    console.log('%chello world','font-size:25px;color:red;');

    1
    console.log('%chello world','font-size:25px;color:red;');

    1010cc时时彩经典版 25

    万生机勃勃您感到远远不足过瘾,这就把您能写出来的最华侈的CSS样式都使用上呢,比方渐变。于是你能够收获如下华丽丽的法力:

    JavaScript

    console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

    1
    console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

    1010cc时时彩经典版 26

    各类招大招的韵律啊~

    瞅着上边密集的代码不用焦灼,下面console.log()第4个参数全都以纯CSS用来决定样式的,你不会素不相识。而首先个参数里能够带用百分号先河的转义指令,如上边输出带样式的文字时使用的%c命令。更详尽的通令参见官方API文书档案的其一表格。

    设若还远远不足过瘾,那大家来log一些图片吧,以至。。。动图?
    对,你得先有图,大家拿这张图为例。

    JavaScript

    console.log("%c", "padding:50px 300px;line-height:120px;backgroundnull:url('') no-repeat;");

    1
    console.log("%c", "padding:50px 300px;line-height:120px;backgroundnull:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");

    1010cc时时彩经典版 27

    望着方面摇动的豆比兔是还是不是有种抽它一脸的扼腕。

    除此,console.table 更是间接以表格的款型将数据输出,不可能赞得太多!
    借用早先写过的生龙活虎篇博文里的例证:

    JavaScript

    var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}]; console.table(data);

    1
    2
    var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];
    console.table(data);

    1010cc时时彩经典版 28

    另外,console.log() 选用不定参数,参数间用逗号分隔,最终会输出会将它们以空白字符连接。

    JavaScript

    console.log('%c你好','color:red;','小明','你驾驭小红被老母打了么');

    1
    console.log('%c你好','color:red;','小明','你知道小红被妈妈打了么');

    1010cc时时彩经典版 29

    Chrome浏览器笔者想是每七个前端er必用工具之风度翩翩吧,后生可畏部分缘由是它速度快,体量超级小,支持的新特点也比此外浏览器多,还会有大器晚成对本人想就是因为它的调整台效用强盛了啊,说它是神器一点也可是分,很有利。但其实过多开采者并不曾用出调控台的精华,只是选择简便的console.log();其实调节台成效远远不唯有如此简单哦。

    6、monitor & unmonitor

    monitor(function),它接收三个函数名作为参数,举例function a,每次a被试行了,都会在支配台出口一条音讯,里面含有了函数的名号a及施行时所传诵的参数。

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

    1010cc时时彩经典版 30

    看了那张图,应该领会了,也等于说在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 退换输出文字的体制

    1010cc时时彩经典版 31

    2、利用控制台出口图片

    1010cc时时彩经典版 32

    3、内定输出文字的体裁

    1010cc时时彩经典版 33

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

    1010cc时时彩经典版 34

    你在调整台轻便操作三遍就知晓了,是否认为十分轻松!

    赞 6 收藏 评论

    1010cc时时彩经典版 35

    • 更加高「逼格」越来越快「开辟调节和测验」越来越强「进级级的Frontender」
    • Bug无处遁形「Console大法好」

    console.assert

    当您想代码满意某个准则时才输出音讯到调控台,那么你没有必要写if只怕伊利表明式来达成指标,cosole.assert就是那样场景下生龙活虎种很好的工具,它会先对传播的表达式进行预见,独有表达式为假时才输出相应音讯到调控台。

    JavaScript

    var isDebug=false; console.assert(isDebug,'开荒中的log消息。。。');

    1
    2
    var isDebug=false;
    console.assert(isDebug,'开发中的log信息。。。');

    1010cc时时彩经典版 36

    console.clear

    console.log

    世家都会用log,但鲜有人很好地选拔console.error , console.warn 等将出口到调控台的消息进行分类收拾。他们效率分别非常小,意义在于将出口到调控台的音信举行分拣,也许说让它们更语义化。各样所表示的语义如下:

    • console.log:普通音信
    • console.info:提醒类音讯
    • console.error:错误消息
    • console.warn:警告音信

    当合理选择上述log方法后,能够很有益地在控制台选用查看特定类型的音讯。

    console.log('一颗红心向太阳','吼吼~');
    console.info('楼上药不能停!');
    console.warn('楼上嘴太贱!');
    console.error('楼上关你毛事?');
    

    1010cc时时彩经典版 37

    假使再合作console.groupconsole.groupEnd,能够将这种分类管理的思量发挥到十二万分。那符合于在付出一个局面相当的大模块比较多很复杂的Web APP时,将独家的log新闻分组到以分别命名空间为名称的组里面。

     console.group("app.foo");
     console.log("来自foo模块的信息 blah blah blah...");
     console.groupEnd();
     console.group("app.bar");
     console.log("来自bar模块的信息 blah blah blah...");
     console.groupEnd();
    

    1010cc时时彩经典版 38

    而关于console.log,早就被愚弄坏了。一切都来自Chrome提供了这么一个API:第四个参数可以包蕴部分格式化的指令例如%c
    比如给hello world做件美貌的嫁衣再拉出去见人:

      console.log('%chello world','font-size:25px;color:red;');
    

    1010cc时时彩经典版 39

    设若您以为远远不足过瘾,那就把你能写出来的最尊贵的CSS样式都采取上啊,比方渐变。于是你能够获得如下华丽丽的功能:

    console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
    

    1010cc时时彩经典版 40

    各样招大招的点子啊~

    望着上边密集的代码不用惊惧,上边console.log()第四个参数全部都以纯CSS用来支配样式的,你不会面生。而首先个参数里能够带用百分号开首的转义指令,如上边输出带样式的文字时选拔的%c
    一声令下。更详细的命令参见官方API文书档案的本条表格。

    比如还非常不够过瘾,那大家来log一些图片吧,以至。。。动图?对,你得先有图,大家拿[这张图]
    (http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif)为例。

    console.log("%c", "padding:50px 300px;line-height:120px;background:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");
    

    1010cc时时彩经典版 41

    望着上面摇动的豆比兔是还是不是有种抽它一脸的激动。
    除此,console.table
    进而向来以表格的花样将数据输出,不可能赞得太多!借用在此以前写过的意气风发篇博文里的例证:

    var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];
    console.table(data);
    

    1010cc时时彩经典版 42

    另外,console.log()选用不定参数,参数间用逗号分隔,最后会输出会将它们以空白字符连接。

    console.log('%c你好','color:red;','小明','你知道小红被妈妈打了么');
    

    1010cc时时彩经典版 43

    console.count

    而外标准输出的气象,还会有大规模的气象是计数。
    当你想计算某段代码实行了有个别次时也大可不必自个儿去写相关逻辑,内置的console.count能够很地胜任那样的天职。

    JavaScript

    function foo(){ //其余函数逻辑blah blah。。。 console.count('foo 被推行的次数:'); } foo(); foo(); foo();

    1
    2
    3
    4
    5
    6
    7
    function foo(){
    //其他函数逻辑blah blah。。。
    console.count('foo 被执行的次数:');
    }
    foo();
    foo();
    foo();

    1010cc时时彩经典版 44

    console.clear();清空控制台,那一个应该和console.log名气相同高吗。

    console.assert

    当您想代码满意有个别原则时才输出信息到调节台,那么你未有要求写if或许长富表明式来完结指标,cosole.assert
    就是这么场景下一种很好的工具,它会先对传播的表明式实行预知,唯有表明式为假时才输出相应新闻到调节台。
    var isDebug=false;console.assert(isDebug,'开辟中的log音信。。。');

    1010cc时时彩经典版 45

    console.dir

    将DOM结点以JavaScript对象的款型出口到调整台
    console.log是间接将该DOM结点以DOM树的布局举办输出,与在要素考察时见到的结构是意气风发律的。不一样的显现情势,同样的古雅,各类体位任君选用反正正是便利与关注。

    JavaScript

    console.dir(document.body); console.log(document.body);

    1
    2
    console.dir(document.body);
    console.log(document.body);

    1010cc时时彩经典版 46

    console.log家族

    console.count

    除却标准输出的光景,还会有大规模的光景是计数。当你想总计某段代码实行了稍微次时也完全没须要自身去写相关逻辑,内置的console.count能够很地胜任那样的职务。

    function foo(){ 
        //其他函数逻辑blah blah。。。 
        console.count('foo 被执行的次数:');
    }
    foo();
    foo();
    foo();
    

    1010cc时时彩经典版 47

    console.time & console.timeEnd

    输出一些调节和测量检验音讯是控制台最常用的功效,当然,它的成效远不唯有于此。当作一些属性测验时,同样能够在此处很有益于地拓宽。
    诸如须求考虑衡量朝气蓬勃段代码施行的耗费时间情形时,能够用console.time与 console.timeEnd来做那件事。

    此间借用官方文书档案的例证:

    JavaScript

    console.time("Array initialize"); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.timeEnd("Array initialize");

    1
    2
    3
    4
    5
    6
    console.time("Array initialize");
    var array= new Array(1000000);
    for (var i = array.length - 1; i >= 0; i--) {
        array[i] = new Object();
    };
    console.timeEnd("Array initialize");

    1010cc时时彩经典版 48

    理之当然,大家也足以选拔自身写代码来计时:

    JavaScript

    var start=new Date().getTime(); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.log(new Date().getTime()-start);

    1
    2
    3
    4
    5
    6
    var start=new Date().getTime();
    var array= new Array(1000000);
    for (var i = array.length - 1; i >= 0; i--) {
        array[i] = new Object();
    };
    console.log(new Date().getTime()-start);

    1010cc时时彩经典版 49

    言听事行你也来看了,用内置的console.time是何其地惠及,省去了和睦写代码来计量的专业量。此外值得风流洒脱提的是,通过调用内置的console.time获取的结果要比本身手动总括的时间差改正确可信。

    先简介一下chrome的调整台,展开chrome浏览器,按f12就能够轻巧的开垦调节台

    console.dir

    将DOM结点以JavaScript对象的方式出口到调整台而console.log是直接将该DOM结点以DOM树的构造进行输出,与在要素检查核对时看见的组织是同风姿浪漫的。分裂的变现方式,同样的崇高,各类体位任君接收反正正是造福与爱抚。

      console.dir(document.body);
      console.log(document.body);
    

    1010cc时时彩经典版 50

    console.profile & console.timeLime

    当想要查看CPU使用相关的新闻时,能够行使console.profile配合 console.profileEnd来造成那些须求。
    那大器晚成功能能够透过UI分界面来形成,Chrome 开拓者工具里面有个tab正是Profile

    与此相似的意义还会有console.timeLine配合 console.timeLineEnd,它的效能是发端记录意气风发段时间轴,相像能够经过Chrome开采者工具里的Timeline 标签来实行相应操作。

    之所以以笔者之见那三个法子有个别鸡肋,因为都足以经过操作分界面来产生。但起码他提供了风流倜傥种命令涨势势的互相,仍旧多了种姿势供选择吧。

    1010cc时时彩经典版 51

    console.time & console.timeEnd

    出口一些调节和测量试验消息是调节台最常用的功用,当然,它的成效远不仅于此。充作一些个性测量检验时,相像可以在那处很便利地拓宽。举个例子供给考虑衡量黄金时代段代码推行的耗费时间境况时,能够用console.timeconsole.timeEnd来做那一件事。
    那边借用官方文书档案的例子:

    console.time("Array initialize");
    var array= new Array(1000000);
    for (var i = array.length - 1; i >= 0; i--) {
         array[i] = new Object();
    };
    console.timeEnd("Array initialize");
    

    1010cc时时彩经典版 52

    当然,大家也能够筛选自身写代码来计时:

    var start=new Date().getTime();
    var array= new Array(1000000);
    for (var i = array.length - 1; i >= 0; i--) {
         array[i] = new Object();
    };
    console.log(new Date().getTime()-start);
    

    1010cc时时彩经典版 53

    深信您也看出了,用内置的console.time
    是多么地点便,省去了协和写代码来计量的专门的学问量。其它值得生龙活虎提的是,通过调用内置的console.time
    收获的结果要比本身手动计算的小运差更标准可信赖。

    console.trace

    库房追踪相关的调治将养可以运用console.trace。那些相似能够透过UI分界面完毕。现代码被打断点后,能够在Call Stack面板中查阅相关货仓消息。

    上边介绍的都以挂在window.console以此目的下边包车型大巴方法,统称为Console API,接下去的那么些方式得本地说应该叫命令,是Chrome内置提供,在调节台中运用的,他们统称为Command Line API。

    尽管你是壹位开采者,小编想console.log肯定是时常应用的了,大家任重(Ren Zhong卡塔尔国而道远看看console.log的多少个小伙子:

    console.profile & console.timeLime

    当想要查看CPU使用有关的新闻时,能够行使console.profile配合 console.profileEnd来变成那几个必要。这一成效能够经过UI分界面来成功,Chrome 开辟者工具里面有个tab就是Profile。与此相同的意义还或许有console.timeLine配合 console.timeLineEnd,它的作用是始于记录生机勃勃段时间轴,相近能够经过Chrome开垦者工具里的Timeline 标签来进展对应操作。所以在小编眼里那三个艺术有个别鸡肋,因为都足以由此操作分界面来产生。但起码他提供了风姿洒脱种命令市价势的相互,依旧多了种姿势供选用吧。

    $

    犹如美刀总是被技术员及各样编制程序语言探讨所注重「你看看PHP代码就知晓PHPer有多爱钱了」,在Chrome的决定台里,$用途还真是蛮多且有助于的。
    $_命令归来方今一回表明式施行的结果,功效跟按进步的方向键再回车是同意气风发的,但它能够做为一个变量使用在您接下去的表达式中:

    JavaScript

    2 2//回车,再 $_ 1//回车得5

    1
    2
    2 2//回车,再
    $_ 1//回车得5

    1010cc时时彩经典版 54

    上面的$_亟待精通其奥义手艺选拔方便,而$0~$4则表示了近年5个你选取过的DOM节点。
    怎么看头?在页面右击选取审查元素,然后在弹出来的DOM结点树上边随意点选,这一个被点过的节点会被记录下来,而$0会回来这段时间叁次点选的DOM结点,以此类推,$1再次回到的是最棒次点选的DOM节点,最多保留了5个,假设缺乏5个,则赶回undefined
    1010cc时时彩经典版 55

    其它值得黄金时代赞的是,Chrome 调控新北原生扶助类jQuery的选取器,也便是说你能够用$加上熟谙的css选择器来筛选DOM节点,多么滴熟谙。

    JavaScript

    $('body')

    1
    $('body')

    1010cc时时彩经典版 56

    $(selector)重临的是知足选取原则的第多少个DOM成分。
    剥去她伪善的糖衣,其实$(selector)是原生JavaScript document.querySelector() 的封装。
    与此同有的时候候另三个指令$$(selector)回到的是兼具满足选取标准的成分的二个集合,是对document.querySelectorAll() 的封装。

    JavaScript

    $$('div')

    1
    $$('div')

    1010cc时时彩经典版 57

    1.console.log ('普通信息')

    console.trace

    库房追踪相关的调度能够行使console.trace。那个相通能够通过UI分界面完成。现代码被打断点后,能够在Call Stack面板中查阅相关货仓新闻。上面介绍的都以挂在window.console
    本条指标下边包车型地铁章程,统称为Console API,接下去的那个格局得本地说应该叫命令,是Chrome内置提供,在调节台北央银行使的,他们统称为Command Line API。

    copy

    通过此命令能够将要调节台获取到的内容复制到剪贴板。

    JavaScript

    copy(document.body)

    1
    copy(document.body)

    然后您就能够随地粘了:

    1010cc时时彩经典版 58

    看完此条命令行,机智的你是还是不是跟脑洞全开的笔者相通,冒出了这么叁个殚精竭虑:这就是透过这一个命令可以在JavaScript里开展复制操作进而不用重视Flash插件了。
    But现实是暴虐的,如早先所述的,这里的决定台命令只好在调控新竹景况中进行,因为她反驳附于任何全局变量比方window,所以实际上在JS代码里是探问不了那个copy措施的,所以从代码层面来调用复制效能也就无从聊起。但愿有天浏览器会提供相应的JS达成啊~

    2.console.info ('提醒性消息')

    $

    好似美刀总是被程序员及各个编制程序语言钻探所正视「你看看PHP代码就明白PHPer有多爱钱了」,在Chrome的操纵台里,$用途还真是蛮多且便于的。$_
    命令归来近期一遍表明式奉行的结果,效用跟按升高的方向键再回车是同大器晚成的,但它能够做为三个变量使用在您接下去的表明式中:

    2 2//回车,再
    $_ 1//回车得5
    

    1010cc时时彩经典版 59

    上面的$_须要通晓其奥义才具利用合适,而$0~$4则意味着了多年来5个你筛选过的DOM节点。
    哪些意思?在页面右击选拔考察成分,然后在弹出来的DOM结点树下面随意点选,这个被点过的节点会被记录下来,而$0会回到近些日子三遍点选的DOM结点,以此类推,$1归来的是顶级次点选的DOM节点,最多保留了5个,假诺非常不足5个,则赶回undefined

    1010cc时时彩经典版 60

    此外值得后生可畏赞的是,Chrome 调控新竹原生扶植类jQuery的接纳器,相当于说你能够用$
    增加熟稔的css接纳器来筛选DOM节点,多么滴熟习。

    $('body')
    

    1010cc时时彩经典版 61

    $(selector)回到的是满意选择标准的第四个DOM元素。剥去他伪善的伪装,其实$(selector)是原生JavaScript document.querySelector()的包装。同时另八个限令$$(selector)归来的是有所满意选择原则的要素的多少个聚众,是对document.querySelectorAll()
    的封装。

    $$('div')
    

    1010cc时时彩经典版 62

    keys & values

    那是黄金时代对亲密的朋友。前者再次来到传入对象具备属性名组成的数目,前者再次来到全体属性值组成的数组。具体请看上面包车型大巴例证:

    JavaScript

    var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'}; keys(tboy); values(tboy);

    1
    2
    3
    var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};
    keys(tboy);
    values(tboy);

    1010cc时时彩经典版 63

    3.console.error ('错误消息')

    copy

    因而此命令能够就要调控台获取到的原委复制到剪贴板。

    copy(document.body)
    

    接下来你就可以四处粘了:

    1010cc时时彩经典版 64

    看完此条命令行,机智的你是或不是跟脑洞全开的自己同样,冒出了这么多个用尽心机:那正是透过这几个命令能够在JavaScript里开展复制操作进而不用信赖Flash插件了。But现实是阴毒的,如从前所述的,这里的调控台命令只可以在调节台南蒙受中实施,因为她反驳附于任何全局变量比方window,所以其实在JS代码里是会见不了那几个copy方法的,所以从代码层面来调用复制功能也就一言难尽。但愿有天浏览器会提供相应的JS完毕吗~

    monitor & unmonitor

    monitor(function),它接受三个函数名作为参数,比方function a,每次a被实行了,都会在支配台出口一条音讯,里面饱含了函数的名号a及实行时所传诵的参数。

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

    JavaScript

    function sayHello(name){ alert('hello,' name); } monitor(sayHello); sayHello('wayou'); unmonitor(sayHello); sayHello('wayou');

    1
    2
    3
    4
    5
    6
    7
    function sayHello(name){
    alert('hello,' name);
    }
    monitor(sayHello);
    sayHello('wayou');
    unmonitor(sayHello);
    sayHello('wayou');

    1010cc时时彩经典版 65

    4.console.warn ('警报音信')

    keys & values

    那是豆蔻年华对老铁。前面三个返回传入对象具有属性名组成的多寡,前面一个再次回到全体属性值组成的数组。具体请看上边包车型地铁例证:

    var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};
    keys(tboy)
    ;values(tboy);
    

    1010cc时时彩经典版 66

    debug & undebug

    debug相通也是收到三个函数名作为参数。当该函数实践时自动断下来以供调节和测量检验,相同于在该函数的入口处打了个断点,能够经过debugger来做到,同期也得以透过在Chrome开辟者工具里找到相应源码然后手动打断点。
    undebug 则是杀绝该断点。

    而其它还应该有大多命令则令人从未说的欲念,因为不菲都足以通过Chrome开辟者工具的UI界面来操作并且比用在支配台输入要有扶助。

    1010cc时时彩经典版 67

    monitor & unmonitor

    monitor(function),它选择一个函数名作为参数,比方function a,每次a被实施了,都会在调整台出口一条音讯,里面富含了函数的名称a及试行时所传诵的参数。而unmonitor(function)正是用来终止这一监听。

    function sayHello(name){    
        alert('hello,' name);
    }
    monitor(sayHello);
    sayHello('wayou');
    unmonitor(sayHello);
    sayHello('wayou');
    

    1010cc时时彩经典版 68

    REFERENCE

    • Styled console logging in the Chrome DevTools (Canary)
    • Chrome Console API
    • Chrome Console Command Line API

      1 赞 9 收藏 1 评论

    世家都会用log,但比超少有人能够很好地运用console.error,console.warn 等将出口到调节台的新闻进行分类收拾。他们成效界别比较小,意义在于将出口到调整台的音讯实行分类,只怕说让它们更语义化。

    debug & undebug

    debug相通也是吸收接纳三个函数名作为参数。当该函数实施时自动断下来以供调节和测量检验,相通于在该函数的入口处打了个断点,能够透过debugger来变成,同期也能够透过在Chrome开辟者工具里找到呼应源码然后手动打断点。而undebug
    则是消除该断点。
    而其他还会有许多命令则令人从未说的私欲,因为不菲都足以透过Chrome开拓者工具的UI分界面来操作并且比用在支配台输入要有益于。

    关于小编:刘哇勇

    1010cc时时彩经典版 69

    放浪不急爱自由 个人主页 · 我的文章 · 17 ·   

    1010cc时时彩经典版 70

    意气风发经再协作console.group 与console.groupEnd,能够将这种分类管理的思量发挥到十二万分。那切合于在支付七个范围非常的大模块相当多很复杂的Web APP时,将独家的log音信分组到以分别命名空间为名称的组里面。

    REFERENCE

    Styled console logging in the Chrome DevTools (Canary)
    Chrome Console API
    Chrome Console Command Line API

    转发自:刘哇勇的部落格

    console.group("app.bundle");
    console.warn("来自bundle模块的警报消息1");console.warn("来自bundle模块的警示消息2");
    console.groupEnd();

    console.group("app.bundle");
    console.log("来自bundle模块的音信1");console.log("来自bundle模块的音讯2");
    console.groupEnd();

    1010cc时时彩经典版 71

    那样的调节台音讯看上去就简来说之了,就不用再为了找这是归于那豆蔻年华行代码输出的再翻一次源码了。

    其它,console.log宗族还给大家提供了三个的API:第一个参数能够带一些格式化指令,比如%c,n;看上面这几个炫丽的功用:

    console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:1010cc时时彩经典版:调整台怎样行使,调整台不

    关键词: