Console对象

在开发中使用最多的调试方式是使用console.log()打印，但原生JS里默认是没有Console对象的，它是宿主对象（即浏览器）提供的内置对象，用于访问调试控制台。在不同的浏览器里console对象的表现效果可能不同。

 

常用方法

• console.log('hello');
• console.info('信息');
• console.error('错误');
• console.warn('警告');

其中使用最多的是console.log()。以上方法类似于C语言里的printf，支持占位符格式。支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）:

占位符	作用
%s	字符串
%d or %i	整数
%f	浮点数
%o	可展开的DOM
%O	列出DOM的属性
%c	根据提供的css样式格式化字符串

 

console.log("%d年%d月%d日",2011,3,26); // 2011年3月26日
console.log('%o',document.body.firstElementChild); // 格式成可展开的的DOM，像在开发者工具Element面板那样可展开
console.log('%O',document.body.firstElementChild); // 列出DOM的属性，等同于console.dir(document.body.firstElementChild)

其中最常用的是%c占位符。使用时，对应的后面的参数必须是 CSS 语句，用来对输出内容进行 CSS 渲染。常见的输出方式有两种：文字样式、图片输出。

console.log("%cHello World！","color: red; font-size: 20px"); // 红色字符串
console.log("%c  ", "background:url(https://inews.gtimg.com/newsapp_bt/0/11616110357/641) no-repeat ;line-height:600px;font-size:600px")

console不能定义img，可以用背景图来代替。另外console不支持宽和高。

 

其他方法

这些方法很少用过，但需要时会提高效率。

 

1.表格形式查看数组（对象）复合数据console.table()

let arr = [1, 3, 4, 6]
console.table(arr)

let arrObj= [ { num: "1"}, { num: "2"}, { num: "3" } ]
console.table(arrObj)

let obj= { a:{ num: "1"}, b:{ num: "2"}, c:{ num: "3" } }
console.table(obj)

 三次打印结果分别是

  

 这个方法对一些列表数据非常有用和直观。

 

2.计时打印console.time()

console.time('计时器1');
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {}
}
console.timeEnd('计时器1');

console.time('计时器2');
for (let i = 0; i < 1000; i++) {
  for (let j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器2');

 在用for循环测试时意外发现了let和var在性能上是有差异的。let的性能优于var。

 

3.信息分组 console.group()

console.group("第一组信息");
  console.log("第一组第一条");
  console.log("第一组第二条");
console.groupEnd();
  
console.group("第二组信息");
  console.log("第二组第一条");
  console.log("第二组第二条");
console.groupEnd();

4.真值判断console.assert()

var result = 1;
console.assert(result);
var year = 2014;
console.assert(year == 2018);

如果参数为真值，控制台不会有任何显示信息；否则会抛出异常显示错误信息。

 

5.追踪函数调用轨迹console.trace()

function add(a,b){
  console.trace();
  return a+b;
}
var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}

 

6.查看对象信息console.dir()

var info = {
  site:"www.baidu.com",
  name:"百度"
};
console.dir(info);

但其实和console.log()直接打印对象没什么区别

 

 7.性能分析console.profile()

console.profile('性能分析')
... // 要分析的代码
console.profileEnd()

但是笔者在Chrome、Edge和FireFox上进行测试，仅仅打印了性能分析报告开始和结束的提示，并没有看到性能分析的结果。