敲碎时间的人的个人专栏
上一篇

有趣的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);

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

版权声明:著作权归作者所有。

X

欢迎加群学习交流

联系我们