有趣的web-console

有趣的web-console

Web 控制台是一种工具，主要用于记录与网页相关的信息，例如：网络请求、JavaScript、安全错误、警告、CSS 等。它使我们能够通过在页面内容中执行 JavaScript 表达式来与网页交互。

• log()
• error()
• warn()
• clear()
• time() and timeEnd()
• table()
• count()
• group() and groupEnd()
• custom console logs

以上的四个方法都是大家再熟悉不过了；因此我们今天只介绍一些大家不熟悉的，方便大家在以后的学习和工作中使用。

console.time() and console.timeEnd()

每当我们想知道块或函数花费的时间量时，我们可以使用 JavaScript 控制台对象提供的 time() 和 timeEnd() 方法。它们带有一个必须相同的标签，里面的代码可以是任何东西（函数、对象、简单的控制台）。

console.time('abc');
let fun =  function(){
    console.log('fun is running');
}
let fun2 = function(){
    console.log('fun2 is running..');
}
fun(); // calling fun();
fun2(); // calling fun2();
console.timeEnd('abc');

在上面的代码片段中，我们可以看到标签是“abc”，这对于 time() 和 timeEnd() 方法都是相同的。如果我们增加这些方法定义的块内的代码量，那么时间会增加。还值得记住的是，返回到控制台的时间将以毫秒为单位，并且每次刷新页面时可能会有所不同。

输出如下：

console.table()

这个方法允许我们在控制台中生成一个表。输入必须是数组或将显示为表格的对象。

console.table({'a':1, 'b':2});

输出如下：

console.count()

此方法用于统计此计数方法中函数命中的次数。

for(let i=0;i<5;i++){
    console.count(i);
}

输出如下：

console.group() and console.groupEnd()

控制台对象的 group() 和 groupEnd() 方法允许我们将内容分组到一个单独的块中，该块将被缩进。就像 time() 和 timeEnd() 一样，它们也接受相同值的标签。

// console.group() and console.groupEnd() method
console.group('simple');
console.warn('warning!');
console.error('error here');
console.log('vivi vini vici');
console.groupEnd('simple');
console.log('new section');

输出如下

Custom Console Logs

用户可以将样式添加到控制台日志以使日志自定义。它的语法是将 CSS 样式作为参数添加到日志中，这将替换日志中的 %c，如下例所示。

console.log("%c"+50,"font-size:30px;color:green;");
console.log("%c"+300,"font-size:30px;color:green;");

测试结果大家可以在控制台试试。

//这是一个可以使用大部分npm包的例子哈，可以运行一些js代码
const Refs = require('object-refs');
var refs = new Refs({ name: 'foo' }, { name: 'bar' });
var b = { prop: 6 };
var a = { foo: b };
console.log('refs:',refs);
// when
refs.bind(a, 'foo');
// then
console.log('a.foo:',a.foo);

以上的一些内容都是我们平时比较少用到，但是确实比较有意思的一个，欢迎大家一起讨论。