首页 » 前端 » 正文

console用法笔记

| 前端 | | 暂无评论 | 1763 views

平时大家都用console.log()进行bug查找，后来查看到，有好多console的用法

console.assert(expression, object[, object…])

接收至少两个参数，第一个参数的值或返回值为false的时候，将会在控制台上输出后续参数的值。例如：

1
2
console.assert(1 == 1, object); // 无输出，返回 undefined
console.assert(1 == 2, object); // 输出 object

 

console.count([label])

输出执行到该行的次数，可选参数 label 可以输出在次数之前，例如：

1
2
3
4
5
6
7
8
9
10
(function() {
  for (var i = 0; i<5; i++) {
    console.count('count');
  }
})();
// count: 1
// count: 2
// count: 3
// count: 4
// count: 5

 

console.dir(object)

将传入对象的属性，包括子对象的属性以列表形式输出，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
var obj = {
  name: 'classicemi',
  college: 'HUST',
  major: 'ei'
};
console.dir(obj);
/*
Object
  college: "HUST"
  major: "ei"
  name: "classicemi"
  __proto__: Object
*/

 

console.error(object[, object…])

用于输出错误信息，用法和常见的console.log一样，不同点在于输出内容会标记为错误的样式，便于分辨。输出结果：

1
2
3
4
5
6
7
/*
console.error('error')
VM1352:2 error(anonymous function) @ VM1352:2
InjectedScript._evaluateOn @ VM587:883
InjectedScript._evaluateAndWrap @ VM587:816
InjectedScript.evaluate @ VM587:682
*/

 

console.group

这是个有趣的方法，它能够让控制台输出的语句产生不同的层级嵌套关系，每一个console.group()会增加一层嵌套，相反要减少一层嵌套可以使用console.groupEnd()方法。语言表述比较无力，看代码：

1
2
3
4
5
6
7
8
9
10
console.log('这是第一层');
console.group();
console.log('这是第二层');
console.log('依然第二层');
console.group();
console.log('第三层了');
console.groupEnd();
console.log('回到第二层');
console.groupEnd();
console.log('回到第一层');

console.group

和console.group()相似的方法是console.groupCollapsed()作用相同，不同点是嵌套的输出内容是折叠状态，在有大段内容输出的时候使用这个方法可以使输出版面不至于太长。。。吧

 

console.info(object[, object…])

此方法与之前说到的console.error一样，用于输出信息，没有什么特别之处。

1
console.info('info'); // 输出 info

 

console.table()

可将传入的对象，或数组以表格形式输出，相比传统树形输出，这种输出方案更适合内部元素排列整齐的对象或数组，不然可能会出现很多的 undefined。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var obj = {
  foo: {
    name: 'foo',
    age: '33'
  },
  bar: {
    name: 'bar',
    age: '45'
  }
};
 
var arr = [
  ['foo', '33'],
  ['bar', '45']
];
 
console.table(obj);
console.table(arr);

console.table

 

console.profile([profileLabel])

这是个挺高大上的东西，可用于性能分析。在 JS 开发中，我们常常要评估段代码或是某个函数的性能。在函数中手动打印时间固然可以，但显得不够灵活而且有误差。借助控制台以及console.profile()方法我们可以很方便地监控运行性能。

然后我们可以在 Profiles 面板下看到上述代码运行过程中的消耗时间。

页面加载过程的性能优化是前端开发的一个重要部分，使用控制台的 profiles 面板可以监控所有 JS 的运行情况使用方法就像录像机一样，控制台会把运行过程录制下来。如图，工具栏上有录制和停止按钮。

console.profile

 

console.time(name)

计时器，可以将成对的console.time()和console.timeEnd()之间代码的运行时间输出到控制台上，name参数可作为标签名。

1
2
3
4
5
6
console.time('计时器');
for (var i = 0; i < 100; i++) {
  for (var j = 0; j < 100; j++) {}
}
console.timeEnd('计时器');
//计时器: 8.534ms

 

console.trace()

console.trace()用来追踪函数的调用过程。在大型项目尤其是框架开发中，函数的调用轨迹可以十分复杂，console.trace()方法可以将函数的被调用过程清楚地输出到控制台上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function tracer(a) {
  console.trace();
  return a;
}
 
function foo(a) {
  return bar(a);
}
 
function bar(a) {
  return tracer(a);
}
 
var a = foo('tracer');
 
/*
console.trace()
tracer @ VM1604:3
bar @ VM1604:12foo @ VM1604:8
(anonymous function) @ VM1604:15
InjectedScript._evaluateOn @ VM587:883
InjectedScript._evaluateAndWrap @ VM587:816
InjectedScript.evaluate @ VM587:682
*/

 

console.warn(object[, object…])

输出参数的内容，作为警告提示。

1
console.warn('warn'); // 输出 warn

 

占位符

console对象上的五个直接输出方法，console.log(),console.warn(),console.error(),console.exception()(等同于console.error())和console.info()，都可以使用占位符。支持的占位符有四种，分别是字符(%s)、整数(%d 或 %i)、浮点数(%f)和对象(%o)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
console.log('%s是%d年%d月%d日', '今天', 2017, 2, 12);
console.log('圆周率是%f', 3.14159);
 
var obj = {
  name: 'classicemi'
}
console.log('%o', obj);
 
/*
今天是2017年2月12日
圆周率是3.14159
Object
   name: "classicemi"
   __proto__:
*/

还有一种特殊的标示符%c，对输出的文字可以附加特殊的样式，当进行大型项目开发的时候，代码中可能有很多其他开发者添加的控制台语句。开发者对自己的输出定制特别的样式就可以方便自己在眼花缭乱的输出结果中一眼看到自己需要的内容。想象力丰富的童鞋也可以做出有创意的输出信息，比如常见的招聘信息和个人介绍啥的。

1
2
console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;');
//输出带有样式的文案

%c标示符可以用各种 CSS 语句来为输出添加样式，再随便举个栗子，background属性的url()中添加图片路径就可以实现图片的输出了，各位前端童鞋快施展你们的 CSS 神技来把控制台玩坏吧~~

 

其他

1.console.debug() 用于输出输出debug的信息。

2.console.timeStamp() 用于标记运行时的timeline信息。

3.console.memory 用于显示此刻使用的内存信息（这是一个属性而不是方法）。

4.console.clear() 清空控制台的内容（当然你可以用快捷键ctrl+L）。

5.$0 可以在控制台输出在Elements面板选中的页面元素。

6.$_ 表示上一次在控制台键入的命令，你也可以用快捷键“上方向键”来达到同样的效果。

7.$x 可以用xPath的语法来获取页面上的元素。

 

参考：

https://segmentfault.com/a/1190000000481884

http://www.toutiao.com/a6335169872419373314/?tt_from=mobile_qq&utm_campaign=client_share&app=news_article&utm_source=mobile_qq&iid=3053592333&utm_medium=toutiao_android

 

发表评论