Javascript 之 console

Javascript 之 console

1 打开浏览器，地址栏输入 about:blank 新建空白页面

about:blank 

2 按 F12 并切换到控制台选项卡

3. 在光标出输入 并按回车

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

效果

注意： 控制台换行 按组合键 shift + Enter(回车)

4 数据类型辨别

console.log(9527);
console.log('string');
console.log(true);
console.log([1,2,'3',true,{id:'obj',num:123}]);
console.log({id:1,name:'hujiajia',isD:true});

效果

4.1 数字类型 和 布尔类型 统一为蓝色 在 object 中也一样
4.2 字符串类型单独打印为黑色，在对象中则为红色，并带有双引号

5 console 其他方法名
5.1 assert()
ssert 方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。

// 成立
console.assert(1==2, "第一个参数为false， 所以我将会被打印输出");
// 不成立
console.assert(1==1, "第一个参数为true， 所以我不会被打印输出");

5.2 clear()
清除当前控制台的所有输出，将光标回置到第一行。

console.clear()

按回车 看效果

有点类似 dos命令的 cls

5.3 count()
用于计数，输出它被调用了多少次。

(function() {
  for (var i = 0; i < 5; i++) { 
    console.count('count'); 
  }
})();

注意 计数永远是从1开始 索引从0开始

5.4 group()
用于将显示的信息分组，可以把信息进行折叠和展开。

console.group('第一层');
  console.group('第二层');

    console.log('error');
    console.error('error');
    console.warn('error');
  console.groupEnd(); // 结束第二层分租
console.groupEnd();// 结束第一层分租

效果

注意 可以没有 console.groupEnd() 分组结束命令

5.5 groupCollapsed()
与console.group方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。

5.6 groupEnd()
结束内联分组

5.7 table()
将复合类型的数据转为表格显示

var arr = 
[ 
   { test: "1"},
   { test: "2"}, 
   { test: "3"},
   9527
];
console.table(arr);

效果

5.8 time() 与 timeEnd()
分别为计时开始和计时结束

console.time('计时器1');
for (var i = 0; i < 999; i++) {
  for (var j = 0; j < 999; j++) {}
}
console.timeEnd('计时器1');
console.time('计时器2');
for (var i = 0; i < 9999; i++) {
  for (var j = 0; j < 9999; j++) {}
}
console.timeEnd('计时器2');

效果

5.9 trace()
追踪函数的调用过程。对调试有很大帮助。

function d(a) { 
  console.trace();
  return a;
}
function b(a) { 
  return c(a);
}
function c(a) { 
  return d(a);
}
var a = b('123');

效果

6 输出有颜色的字体

console.log('%c我是红色','color:red;font-weight:600')

效果

占位符 %c 后面带 css 样式 这样就可以输出很突出的文本了 便于调试