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

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

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

相关推荐

MongoDB使用MapReduce获取Collection所有的键

MongoDB作为一个文档数据库,它不像关系型数据那样有固定的schema。有时我们需要获取Collection集合里所用的键。使用MapReduce获取Collection的键keys= db.runCommand({   "mapreduce" : "test",   "ma

使用Node.js实现一个简单的web服务器

这是使用Node.js写的一个简单Web服务器示例,分为三部分:响应http请求路由url读取静态文件响应新建一个app.js文件作为此web服务器的入口。响应http请求首先我们引入http模块,创建一个http服务器。const http = require('http'); const hostname = '127.0.0.1'

Python:有关IntEnum类型的比较

枚举类型的使用请参考:Python3.4 枚举类型的使用。我们在使用Enum定义枚举类型,枚举的成员不是整型,所以在做比较时不能使用如大于号(">"),小于号(“<”)作比较。只用做相等性比较。但直接和整型做相等比较,结果都为False。Python新增了IntEnum,IntEnum是允许和整型做比较,包括大小比较和值得相等比较。创建IntEnum定义I

有用的Kotlin版Rx代码片段1

只是几个随机的,可能有用的Rx片段(kotlin版)。计时器是的,只是一个简单的计时器,运行5秒。Observable.interval(1, TimeUnit.SECONDS, Schedulers.newThread())         .take(5)    &

使用laptop脚本搭建macOS的web和移动开发环境

搭建开发环境往往是很痛苦的事,在github上有一个laptop的开源项目,它实际上是一个脚本,它集成了在macOS上搭建web或移动开发的一些工具。项目地址:https://github.com/thoughtbot/laptopmac版本支持目前它已测试支持的macOS版本包括:macOS Mavericks (10.9)macOS Yosemite (

Linux统计目录下所有文件的行数

这里提供两种方法来统计目录下所有文件的行数:1、结合使用find和wc:find . -name '*.pl' | xargs wc -l 另外,此命令也可以改为:( find ./ -name '*.pl' -print0 | xargs -0&n

Kubernetes拉取DockerHub上私有的image

首先使用kubectrl创建docker registry,命令如下:DOCKER_REGISTRY_SERVER=https://index.docker.io/v1/ DOCKER_USER=登陆docker的用户名 DOCKER_EMAIL=登陆docker的email DOCKER_PASSWORD=登陆docker的秘密 kubectl create se

一些有用的pandas代码片段

# 列出dataframe指定列的唯一值 df['Column Name'].unique() # 把列的数据类型转换为数字。如果有非数字值,则会出错。 pd.to_numeric(df['Column Name']) # 把列的数据类型转换为数字,如果非数字值,则会转换为NaN pd.to_numeric(df['Column Na

curl发送post请求的有用示例(包括json)

curl用法下面这些是使用curl来发送POST或PUT请求的常见选项:1、请求类型-X POST-X PUT2、Content Type头信息-H "Content-Type: application/x-www-form-urlencoded":发送form表单-H "Content-Type: application/json":发送json数据3、数据传递form表单:-d "param1