前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >你了解Console对象嘛 ? ? 快来瞅瞅吧

你了解Console对象嘛 ? ? 快来瞅瞅吧

作者头像
用户9914333
发布2022-07-21 19:37:58
2430
发布2022-07-21 19:37:58
举报
文章被收录于专栏:bug收集bug收集

你还只是知道Console.log方法嘛,Console对象其实还有很多方法。下面带大家一起来深入了解下Console对象的各个方法。

1. assert()描述: ssert方法接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会输出第二个参数,否则不会有任何结果。 实例:

代码语言:javascript
复制
// 实例
console.assert(true === false, "判断条件不成立")
// Assertion failed: 判断条件不成立

运行结果,如下图:

2. clear() 描述: 清除当前控制台的所有输出,将光标回置到第一行。 实例:

代码语言:javascript
复制
console.clear()

3. count() 描述: 用于计数,输出它被调用了多少次。 实例:

代码语言:javascript
复制
(function() {
  for (var i = 0; i < 5; i++) {
    console.count('count');
  }
})();

运行结果,如下图:

4. error()

描述: 输出信息时,在最前面加一个红色的叉,表示出错,同时会显示错误发生的堆栈。 实例:

代码语言:javascript
复制
console.error("Error: %s (%i)", "Server is not responding",500)

运行结果,如下图:

5. group() 描述: 用于将显示的信息分组,可以把信息进行折叠和展开。 实例:

代码语言:javascript
复制
console.group('第一层');
  console.group('第二层');
    console.log('error');
    console.error('error');
    console.warn('error');
  console.groupEnd();
console.groupEnd();

运行结果,如下图:

6. groupCollapsed()

描述: 与console.group方法很类似,唯一的区别是该组的内容,在第一次显示时是收起的(collapsed),而不是展开的。 实例:

代码语言:javascript
复制
console.groupCollapsed('第一层');
  console.groupCollapsed('第二层');
    console.log('error');
    console.error('error');
    console.warn('error');
  console.groupEnd();
console.groupEnd();

运行结果,如下图:

7. groupEnd()

描述:结束内联分组 实例:

代码语言:javascript
复制
console.group('Group One');
console.group('Group Two');
// some code
console.groupEnd(); // Group Two 结束
console.groupEnd(); // Group One 结束

8.info()

描述: console.log 别名,输出信息 实例:

代码语言:javascript
复制
console.info("runoob")

9.log()描述: 输出信息

实例:

代码语言:javascript
复制
console.log("runoob")

10. table() 描述:将复合类型的数据转为表格显示。 实例:

代码语言:javascript
复制
var arr= [
         { num: "1"},
         { num: "2"},
         { num: "3" }
    ];
console.table(arr);
var obj= {
     a:{ num: "1"},
     b:{ num: "2"},
     c:{ num: "3" }
};
console.table(obj);

运行结果,如下图:

11. time()

描述:计时开始 实例:

代码语言:javascript
复制
console.time('计时器1');
for (var i = 0; i < 100; i++) {
  for (var j = 0; j < 100; j++) {}
}
console.timeEnd('计时器1');
console.time('计时器2');
for (var i = 0; i < 1000; i++) {
  for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器2');

运行结果,如下图:

12. timeEnd() 描述:计时结束 实例 :

代码语言:javascript
复制
console.time('计时器1');
for (var i = 0; i < 100; i++) {
  for (var j = 0; j < 100; j++) {}
}
console.timeEnd('计时器1');
console.time('计时器2');
for (var i = 0; i < 1000; i++) {
  for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器2');

13.trace()

描述:追踪函数的调用过程

实例:

代码语言:javascript
复制
function d(a) {
  console.trace();
  return a;
}
function b(a) {
  return c(a);
}
function c(a) {
  return d(a);
}
var a = b('123');

运行结果,如下图:

14. warn() 描述:输出警告信息 实例:

代码语言:javascript
复制
console.warn("警告")

运行结果,如下图:

console上述方法支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o):

占位符

作用

%s

字符串

%d or %i

整数

%f

浮点数

%o

可展开的DOM

%O

列出DOM的属性

%c

根据提供的css样式格式化字符串

实例:

代码语言:javascript
复制
console.log("%d年%d月%d日",2011,3,26);

%o、%O 都是用来输出 Object 对象的,对普通的 Object 对象,两者没区别,但是打印dom节点时就不一样了:

代码语言:javascript
复制
// 格式成可展开的的DOM,像在开发者工具Element面板那样可展开 
console.log('%o',document.body.firstElementChild); 
// 像JS对象那样访问DOM元素,可查看DOM元素的属性 
// 等同于console.dir(document.body.firstElementChild) 
console.log('%O',document.body.firstElementChild);

参考:https://www.runoob.com/w3cnote/javascript-console-object.html

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-06-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 bug收集 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档