库房跟踪相关的调剂可以运用console.trace。这几个同样可以透过UI界面完结。当代码被打断点后,可以在Call Stack面板中查阅相关堆栈音信。

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

console.log

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

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

console.assert

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

看着上边摇摆的豆比兔是否有种抽它一脸的冲动。

将DOM结点以JavaScript对象的款式出口到控制台
console.log是一直将该DOM结点以DOM树的布局举行输出,与在要素审查时观望的结构是同样的。不一样的变现方式,同样的幽雅,各个体位任君选用反正就是有益与关怀。

console.profile & console.timeLime

jQuery 1

jQuery 2

输出一些调试音讯是控制台最常用的机能,当然,它的机能远不止于此。当做一些性质测试时,同样可以在这边很方便地开展。
譬如说需要考量一段代码执行的耗时情状时,可以用console.time与 console.timeEnd来做此事。

$

犹如美刀总是被程序员及种种编程语言所强调「你看看PHP代码就了解PHPer有多爱钱了」,在Chrome的决定台里,$用处还真是蛮多且便于的。
$_指令归来近年来两回表明式执行的结果,功效跟按升高的方向键再回车是相同的,但它可以做为一个变量使用在您接下去的表明式中:

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

jQuery 3

上面的$_亟需了然其奥义才能选择方便,而$0~$4则意味着了近期5个你选用过的DOM节点。
怎么看头?在页面右击选取审查元素,然后在弹出来的DOM结点树下边随便点选,这几个被点过的节点会被记录下来,而$0会回来近年来一遍点选的DOM结点,以此类推,$1重回的是一级次点选的DOM节点,最多保留了5个,如若不够5个,则赶回undefined

jQuery 4

其它值得一赞的是,Chrome
控制斯科普里原生协助类jQuery的选拔器,也就是说你可以用$加上熟习的css选拔器来选用DOM节点,多么滴熟知。

$('body')

jQuery 5

$(selector)重临的是满足选用标准的首个DOM元素。
剥去他伪善的门面,其实$(selector)是原生JavaScript document.querySelector() 的封装。
还要另一个命令 $ $(selector)归来的是具有满意选用原则的因素的一个聚众,是对document.querySelectorAll() 的封装。

$$('div')

jQuery 6

copy

通过此命令可以将在控制台获取到的情节复制到剪贴板。

copy(document.body)

下一场您就足以随地粘了:

jQuery 7

看完此条命令行,机智的您是还是不是跟脑洞全开的我一样,冒出了那般一个设法:这就是通过那一个命令可以在JavaScript里展开复制操作从而不用重视Flash插件了。
But现实是粗暴的,如此前所述的,那里的主宰台命令只好在控制布里斯托环境中施行,因为她置之度外附于任何全局变量比如window,所以其实在JS代码里是访问不了这么些copy措施的,所以从代码层面来调用复制功效也就无从谈起。但愿有天浏览器会提供对应的JS达成吗~

keys & values

那是一对基友。前者再次来到传入对象具备属性名组成的数据,后者重回所有属性值组成的数组。具体请看上边的例证:

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

jQuery 8

monitor & unmonitor

monitor(function),它接受一个函数名作为参数,比如function a,每次a被实践了,都会在控制台出口一条音信,里面含有了函数的称呼a及进行时所传颂的参数。

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

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

jQuery 9

debug & undebug

debug同样也是吸收一个函数名作为参数。当该函数执行时自动断下来以供调试,类似于在该函数的入口处打了个断点,可以通过debugger来做到,同时也足以经过在Chrome开发者工具里找到呼应源码然后手动打断点。
undebug 则是祛除该断点。

而其余还有好多命令则令人尚未说的私欲,因为许多都可以由此Chrome开发者工具的UI界面来操作并且比用在决定台输入要有益于。

当您想代码满足某些规则时才输出音讯到控制台,那么您大可不必写if抑或三元表明式来达到目标,cosole.assert便是如此情况下一种很好的工具,它会先对传播的表明式进行预见,唯有表明式为假时才输出相应音讯到控制台。

console.log('%chello world','font-size:25px;color:red;');
console.log('一颗红心向太阳','吼吼~');
console.info('楼上药不能停!');
console.warn('楼上嘴太贱!');
console.error('楼上关你毛事?');
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;");
  • console.log:普通消息
  • console.info:提醒类信息
  • console.error:错误新闻
  • console.warn:警示新闻

假诺再协作console.group 与console.groupEnd,可以将那种分类管理的探究发挥到极致。那符合于在付出一个范畴很大模块很多很复杂的Web
APP时,将各自的log新闻分组到以独家命名空间为名称的组里面。

jQuery 10

jQuery 11

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

各样招大招的点子啊~

console.dir

当想要查看CPU使用相关的新闻时,可以采取console.profile配合 console.profileEnd来成功那么些须要。
这一效应可以通过UI界面来形成,Chrome
开发者工具里面有个tab便是Profile

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

自然,大家也得以选择自己写代码来计时:

地点介绍的都是挂在window.console本条指标上边的不二法门,统称为Console
API
,接下去的这个艺术得当地说应该叫命令,是Chrome内置提供,在控制马赛应用的,他们统称为Command
Line API

jQuery 12

jQuery 13

jQuery 14

console.trace

Chrome的开发者工具已经强大到没对象的程度了,更加是其意义丰硕界面友好的console,使用优异可以就好像下功用:

var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];
console.table(data);
  • 更高「逼格」更快「开发调试」更强「进阶级的Frontender」
  • Bug无处遁形「Console大法好」

而关于console.log,早已被调侃坏了。一切都源于Chrome提供了如此一个API:第三个参数可以包括部分格式化的吩咐比如%c

console.count

与此类似的作用还有console.timeLine配合 console.timeLineEnd,它的效劳是起首记录一段时间轴,同样可以透过Chrome开发者工具里的Timeline 标签来进展相应操作。

当合理拔取上述log方法后,可以很便宜地在控制台采取查看特定项目标新闻。

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

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

只要还不够过瘾,这大家来log一些图片吧,甚至。。。动图?
对,你得先有图,大家拿这张图为例。

console.time & console.timeEnd

jQuery 15

假诺你觉得不够过瘾,那就把你能写出来的最高尚的CSS样式都使用上吗,比如渐变。于是你能够收获如下华丽丽的作用:

转自:http://blog.jobbole.com/76985/

望着方面密集的代码不用恐慌,上边console.log()第三个参数全是纯CSS用来控制样式的,你不会陌生。而首先个参数里可以带用百分号伊始的转义指令,如上边输出带样式的文字时行使的%c命令。更详尽的通令参见官方API文档的这么些表格

故而在我看来那多个措施有些鸡肋,因为都得以通过操作界面来成功。但起码他提供了一种命令行格局的互动,仍旧多了种姿势供接纳吧。

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

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);
function foo(){
    //其他函数逻辑blah blah。。。
    console.count('foo 被执行的次数:');
}
foo();
foo();
foo();

深信不疑你也观察了,用内置的console.time是多么地惠及,省去了自己写代码来计量的工作量。其余值得一提的是,通过调用内置的console.time得到的结果要比自己手动计算的年华差更规范可靠。

jQuery 16

jQuery 17

除了标准输出的风貌,还有广阔的场所是计数。
当您想计算某段代码执行了多少次时也大可不必自己去写相关逻辑,内置的console.count可以很地胜任那样的职责。

世家都会用log,但鲜有人很好地行使console.error , console.warn 等将出口到控制台的音信进行分类整理。
她们作用分别不大,意义在于将出口到控制台的音信举行分类,或者说让它们更语义化。
逐一所表示的语义如下:

jQuery 18

jQuery 19

相关文章

网站地图xml地图