美高梅网投网站-美高梅手机网投-美高梅官方网站
做最好的网站

您的位置:美高梅网投网址 > Web前端 > 只是使用简单的console.log(),未经作者许可

只是使用简单的console.log(),未经作者许可

发布时间:2019-09-24 05:27编辑:Web前端浏览(56)

    Chrome 调节台不完全指南

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

    正文小编: 伯乐在线 - 刘哇勇 。未经小编许可,禁止转载!
    迎接参与伯乐在线 专栏撰稿人。

    Chrome的开拓者工具已经壮大到没对象的境界了,特别是其功效充裕分界面友好的console,使用方便能够就如下功效:

    • 更加高「逼格」更加快「开采调节和测量试验」越来越强「升级级的Frontender」
    • Bug无处遁形「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('楼上关你毛事?');

    图片 1

    举个例子再合营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();

    图片 2

    而关于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;');

    图片 3

    如若你以为缺乏过瘾,那就把您能写出来的最华丽的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;');

    图片 4

    各样招大招的节拍啊~

    望着地点密集的代码不用惊慌,上边console.log()第二个参数全部都是纯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;");

    图片 5

    看着地点摇荡的豆比兔是否有种抽它一脸的开心。

    除此,console.table 更是平素以表格的款型将数据输出,无法赞得太多!
    借用以前写过的一篇博文里的例子:

    JavaScript

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

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

    图片 6

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

    JavaScript

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

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

    图片 7

    Chrome浏览器作者想是每一个前端er必用工具之一吧,一部分缘故是它速度快,体量十分小,扶助的新特征也比其他浏览器多,还会有一对自己想就是因为它的调整台作用庞大了吧,说它是神器一点也然则分,很有益于。但事实上过多开荒者并未用出调节台的经典,只是利用简易的console.log();其实调整台功效远远不仅仅这么轻易哦。

    console.assert

    当您想代码知足有个别原则时才输出消息到调控台,那么你完全没须求写if要么伊利表达式来达成指标,cosole.assert就是如此场景下一种很好的工具,它会先对传播的表达式进行预知,独有表明式为假时才输出相应消息到调节台。

    JavaScript

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

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

    图片 8

    console.clear

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

    图片 9

    console.clear();清中央空调控台,这一个应该和console.log人气同样高啊。

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

    图片 10

    console.log家族

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

    图片 11

    本来,大家也得以选拔自个儿写代码来计时:

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

    图片 12

    相信你也看到了,用内置的console.time是何等地点便,省去了和谐写代码来测算的专门的学问量。别的值得说的是,通过调用内置的console.time收获的结果要比自身手动总计的时日差更标准可信赖。

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

    console.profile & console.timeLime

    当想要查看CPU使用相关的音信时,能够采纳console.profile配合 console.profileEnd来成功那个必要。
    这一作用能够由此UI分界面来产生,Chrome 开辟者工具里面有个tab正是Profile

    与此类似的法力还应该有console.timeLine配合 console.timeLineEnd,它的作用是先河记录一段时间轴,一样能够透过Chrome开辟者工具里的Timeline 标签来开展对应操作。

    据此以小编之见那八个章程有些鸡肋,因为都能够经过操作界面来完结。但最少她提供了一种命令行形式的竞相,还是多了种姿势供采纳吧。

    图片 13

    console.trace

    酒馆跟踪相关的调节和测验能够动用console.trace。那些同样能够经过UI分界面完结。今世码被打断点后,能够在Call Stack面板中查阅相关货仓音信。

    上边介绍的都以挂在window.console其一目的下边包车型客车法子,统称为Console API,接下去的那个办法得本地说应该叫命令,是Chrome内置提供,在调控台北动用的,他们统称为Command Line API。

    如若您是一个人开采者,笔者想console.log肯定是常事利用的了,大家第一看看console.log的多少个汉子:

    $

    就如美刀总是被程序猿及各种编制程序语言商量所重申「你看看PHP代码就驾驭PHPer有多爱钱了」,在Chrome的调整台里,$用处还真是蛮多且方便的。
    $_指令归来近年来贰遍表达式实践的结果,成效跟按升高的方向键再回车是均等的,但它可以做为一个变量使用在你接下去的表达式中:

    JavaScript

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

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

    图片 14

    上面的$_内需明白其奥义才具运用合适,而$0~$4则象征了近些日子5个你选取过的DOM节点。
    怎么意思?在页面右击采用审查元素,然后在弹出来的DOM结点树下边随便点选,这几个被点过的节点会被记录下来,而$0会回来近来二遍点选的DOM结点,由此及彼,$1再次来到的是最佳次点选的DOM节点,最多保留了5个,假设非常不够5个,则赶回undefined
    图片 15

    另外值得一赞的是,Chrome 调节新竹原生帮衬类jQuery的选拔器,也正是说你能够用$丰盛熟谙的css选用器来摘取DOM节点,多么滴熟谙。

    JavaScript

    $('body')

    1
    $('body')

    图片 16

    $(selector)重临的是满意选拔条件的第几个DOM成分。
    剥去他伪善的假相,其实$(selector)是原生JavaScript document.querySelector() 的封装。
    並且另二个下令$$(selector)回来的是负有知足选取条件的成分的多少个成团,是对document.querySelectorAll() 的封装。

    JavaScript

    $$('div')

    1
    $$('div')

    图片 17

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

    copy

    因而此命令能够将要调节台获取到的从头到尾的经过复制到剪贴板。

    JavaScript

    copy(document.body)

    1
    copy(document.body)

    接下来你就能够随地粘了:

    图片 18

    看完此条命令行,机智的您是否跟脑洞全开的自个儿同样,冒出了那样三个主张:这就是通过这一个命令能够在JavaScript里张开复制操作进而不用注重Flash插件了。
    But现实是残忍的,如以前所述的,这里的操纵台命令只可以在调控台北蒙受中实践,因为她反对附于任何全局变量例如window,所以其实在JS代码里是走访不了这么些copy方法的,所以从代码层面来调用复制功能也就无从谈到。但愿有天浏览器会提供相应的JS达成啊~

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

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

    图片 19

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

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

    图片 20

    4.console.warn ('警示新闻')

    debug & undebug

    debug同样也是接到多少个函数名作为参数。当该函数推行时自动断下来以供调节和测验,类似于在该函数的入口处打了个断点,能够由此debugger来做到,相同的时候也得以通过在Chrome开拓者工具里找到相应源码然后手动打断点。
    undebug 则是革除该断点。

    而任何还会有为数非常多命令则令人未有说的欲望,因为多数都得以经过Chrome开采者工具的UI分界面来操作并且比用在调控台输入要有助于。

    图片 21

    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 等将出口到调控台的新闻进行分类整理。他们效用界别相当小,意义在于将出口到调控台的音讯实行分拣,或然说让它们更语义化。

    至于笔者:刘哇勇

    图片 22

    放浪不急爱自由 个人主页 · 作者的篇章 · 17 ·   

    图片 23

    若果再同盟console.group 与console.groupEnd,能够将这种分类管理的思考发挥到极致。那符合于在支付三个范围不小模块比较多很复杂的Web APP时,将各自的log消息分组到以各自命名空间为名称的组里面。

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

    图片 24

    与上述同类的调整台消息看上去就胸有定见了,就不要再为了找这是属于那一行代码输出的再翻三回源码了。

    其他,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;');

    图片 25

    理所当然,图片也是能够的,读者能够活动尝试,修改上述代码即可。

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

    图片 26

    console.table

    望着这种“黑法力”是还是不是有种坑分的认为到吧,其实还不仅仅哦!console.table能够让大家输出表格,示例:

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

    图片 27

    部分时候后端传回到一大串数据,是或不是以为直接console.log或是通过抓包工具查看都会令人晕头转向呢,这一年正事console.table发挥功能的时候了,以表格的款式表现数据,自然一清二楚。

    console.assert

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

    当您想代码知足某个原则时才输出音信到调整台,那么你无需写if或然莫斯利安表明式来实现目标,cosole.assert正是如此景况下一种很好的工具,它会先对传播的表明式实行预见,唯有表明式为假时才输出相应消息到调控台。

    图片 28

    console.count

    除了规范输出的场馆,还会有广阔的场景是计数。

    当你想总括某段代码实施了有一点次时也不供给本身去写相关逻辑,内置的console.count能够很地胜任那样的职务.

    图片 29

    console.dir

    将DOM结点以JavaScript对象的花样出口到调整台,而console.log是直接将该DOM结点以DOM树的构造举办输出,与在要素调查时观察标组织是同等的。差异的显现方式,同样的优雅,各个体位任君选取反正正是实惠与关心。

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

    图片 30

    console.time & console.timeEnd

    输出一些调节和测量试验音讯是调整台最常用的功效,当然,它的效应远不仅仅于此。当做一些品质测量检验时,同样能够在这里十分低价地开展。举例须要考虑衡量一段代码推行的耗时意况时,能够用console.time与 console.timeEnd来做那一件事。

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

    图片 31

    当想要查看CPU使用有关的音信时,能够选用console.profile合作console.profileEnd来达成这些须要。
    这一成效能够经过UI分界面来实现,Chrome 开垦者工具里面有个tab正是Profile。使用办法和console.time基本雷同,其实time开荒者工具里也是有个tab正是timeline。关于console.prefile博主就不做多余的牵线了。想要做越来越多询问的读者能够看这里。

    $

    讲真,米利坚技术员们真正很喜欢money啊(什么人又不是吧),看看PHP就清楚了,满屏的$。而在Chrome的支配台里,$用处同样是蛮多且方便的。

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

    上面的$_内需明白其奥义技艺运用合适,而$0~$4则象征了这段日子5个你选用过的DOM节点。

    怎么样意思呢?在页面右击选拔核查成分,然后在弹出来的DOM结点树上边随意点选,那个被点过的节点会被记录下来,而$0会回来近年来一遍点选的DOM结点,就那样推算,$1重临的是最好次点选的DOM节点,最多保留了5个,借使远远不足5个,则重临undefined。

    图片 32

    其余值得一赞的是,Chrome 调控新北原生补助类jQuery的选拔器,也正是说你能够用$加上熟谙的css选拔器来抉择DOM节点,多么滴熟练。

    $('body');
    $$('div');

    [图形上传中。。。(12)]

    $(selector)重回的是知足选择标准的第两个DOM成分。

    剥去他伪善的糖衣,其实$(selector)是原生JavaScript document.querySelector() 的包装。
    并且另贰个发令$$(selector)重返的是有着满意选拔标准的因素的三个汇聚,是对document.querySelectorAll() 的包装。

    $x(path)

    将所相称的节点放在一个数组里重临

    $x("//p");
    $x("//p[a]");

    [图形上传中。。。(13)]

    $x("//p")相称全体的p节点,$x("//p[a]");相称全部子节点包蕴a的p节点

    copy

    copy(document.body)

    接下来你就足以Ctrl+v了。

    专心:他不感到然附于任何全局变量举个例子window,所以其实在JS代码里是访谈不了那个copy方法的,所以从代码层面来调用复制功用也就无从提及。但愿有天浏览器会提供相应的JS达成吗~这样我们就能够透过js代码进行复制操作而不用再信赖Flash插件了。

    keys & values

    那是一对亲密的朋友。前者再次回到传入对象具备属性名组成的数目,前面一个再次回到全数属性值组成的数组。具体请看下边包车型地铁例证:

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

    [图表上传中。。。(14)]

    monitor & unmonitor

    monitor(function),它接受三个函数名作为参数,比方function a,每一趟a被实践了,都会在调整台出口一条音信,里面富含了函数的名称a及进行时所传诵的参数。而unmonitor(function)就是用来终止这一监听。

    function sayHello(name){
    alert('hello,'+name);
    }
    monitor(sayHello);
    sayHello('damonare');
    sayHello('tjz');
    unmonitor(sayHello);

    [图表上传中。。。(15)]

    debug & undebug

    debug同样也是接受二个函数名作为参数。当该函数推行时自动断下来以供调节和测量试验,类似于在该函数的入口处打了个断点,能够通过debugger来做到,同不日常候也足以经过在Chrome开拓者工具里找到呼应源码然后手动打断点。而undebug 则是解除该断点。而任何还应该有好些个命令则令人尚未说的私欲,因为相当的多都足以经过Chrome开荒者工具的UI分界面来操作並且比用在决定台输入要实惠。

    [图表上传中。。。(16)]

    参考

    Console API文档;

    Commond API;

    Chrome 调整台不完全指南 – 刘哇勇

    本文由美高梅网投网址发布于Web前端,转载请注明出处:只是使用简单的console.log(),未经作者许可

    关键词: