几乎所有的javascript开发者最常使用的日志打印调试api都是console.log(),其实还有很多的选项供我们选择,笔者下面就为大家一一介绍.

一、console.table()

console.table()是我非常建议大家去使用的方法,它可以接受JSON或数组并以表格格式打印,在对json对象和数组进行可视化打印的时候简单易用,结果直观。

比如下面的json数据对象使用console.table()打印

    console.table({
"id":"1",
"key":"value",
"count":2
});

控制台的输出结果如下:

又比如对下面代码中的数组进行打印:

 console.table([
{
id: "1",
key: "value",
count: 2,
},
{
id: "2",
key: "value2",
count: 22,
},
{
id: "3",
key: "value3",
count: 5,
},
]);

控制台的输出结果如下:

二、console.error()

console.error()相对于console.log()更有助于在调试时从输出日志中区分错误信息

从上图中可以看到,它的输出打印结果是红色的。

三、Time(time,timeLog,timeEnd)

console.time()、console.timeLog()、console.timeEnd() 这三个方法当我们对程序运行时间进行计时的时候特别有用。

参考下图理解这三个方法

  • console.time()相当于秒表中的开始按钮
  • console.timeLog()相当于秒表中的按圈计时/按点计时
  • console.timeEnd()相当于计时结束
console.time("ForLoop");
// "ForLoop" is label here
for (let i = 0; i < 5; i++) {
console.timeLog('ForLoop');
}
console.timeEnd("ForLoop");

控制台打印输出结果

四、console.warn()

用黄色字体输出日志,更直观的方便的查看警告类日志信息。

五、console.assert()

console.assert(assert_statement,message)用来设定断言,如果为false则显示message消息

if(3!=2){
console.error({ msg1: "msg1", msg2: "msg2" });
}
//上面的日志判断语句,可以简写为下面的断言
console.assert(3 === 2, { msg1: "msg1", msg2: "msg2" });

另一种可以用来格式化输出的断言方式console.assert(assert_statement,message,args)

console.assert(false, "%d nd type for  %s ",2,"console.assert() method");

六、console.count()

console.count()特别适合用来计数,可以传递参数,可以根据根据参数标签统计次数。代码如下:

 for (let i = 0; i < 3; i++) {
console.count("label");
console.count();
console.count(i);
}

控制台打印输出的结果,类似于下面这样

 console.count()  console.count("label")   console.count(i)
default: 1 label: 1 0: 1
default: 2 label: 2 1: 1
default: 3 label: 3 2: 1
  • console.count()如果不传递参数,则使用默认的default标签。
  • console.countReset(标签参数)可以将指定标签的计数重置为0

欢迎关注我的博客,里面有很多精品合集

  • 本文转载注明出处(必须带连接,不能只转文字):字母哥博客

觉得对您有帮助的话,帮我点赞、分享!您的支持是我不竭的创作动力! 。另外,笔者最近一段时间输出了如下的精品内容,期待您的关注。

js日志输出还是只会console.log么,那你就out了的更多相关文章

  1. 控制台:控制台艺术字 & 为控制台输出增加样式(console.log( ))

    控制台/代码文档LOGO 除了知乎的控制台,大部分的代码文档都有这样的字符logo. 下面这个网站可以自动生成符号艺术字: Text to ASCII Art Generator (TAAG) 控制台 ...

  2. 还是只使用console.log()进行调试?好吧,其实还有更多。

    在浏览器控制台中打印消息无疑可以拯救所有开发人员. console.log()消息就像您的大多数疾病的药,同时调试了代码中的一些有线问题. 那里的大多数开发人员都喜欢— 让我们在浏览器中打印消息以了解 ...

  3. 【调试】js调试console.log使用总结图解(重要)

    0.介绍 先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息: 今天要给大家介绍的就是是Web前端调试工具中的Console面板,应该说只要是个浏览器就会 ...

  4. JS之console.log详解以及兄弟姐们邻居方法扩展

    console.log() 基本用法 console.log,前端常用它来调试分析代码,你可以在任何的js代码中调用console.log(),然后你就可以在浏览器控制台看到你刚才打印的常量,变量,数 ...

  5. js调试console.log使用总结图解

    一 实例 打印字符串和对象: 可展开对象查看内部情况: 看一下console对象本身的定义情况: 输出对象情况: utag对象所在文件: 输出对象: 二 Console.log 总结 1   如果你j ...

  6. IE6789浏览器使用console.log类似的方法输出调试内容但又不影响页面正常运行

    问题来源:外网IE下,触发js报错.经检测,未清除console造成.清除console后,解决. 问题原因:console.log 原先是 Firefox 的“专利”,严格说是安装了 Firebug ...

  7. Js调试中不得不知的Console

    在js调试中,大部分的前端人员都是采用console.log()方法来打印出调试的数据,但是很多人都不知道console这个对象有很多很实在的方法,本文就来介绍一下这些方法的使用. 一.console ...

  8. Django 日志输出及打印--logging

    Django使用python自带的logging作为日志打印工具. logging是线程安全的,主要分为4部分: Logger 用户使用的直接接口,将日志传递给Handler Handler 控制日志 ...

  9. console.log()方法中%s的作用

    一.console.log("log信息"); 二.console.log("%s","first","second") ...

随机推荐

  1. Rakefile

    Rakefile https://www.jianshu.com/p/b18a6e42455a RAKE – Ruby Make http://docs.seattlerb.org/rake/ bun ...

  2. Construct a Matrix (矩阵快速幂+构造)

    There is a set of matrixes that are constructed subject to the following constraints: 1. The matrix ...

  3. 解读AngularJS的setupModuleLoader函数

    http://www.cnblogs.com/whitewolf/p/angular-module-declare-and-get.html 看了上面这篇文章,自己读了一下代码,以下是个人理解,如有请 ...

  4. JAVA,.NET项目开发难上手?力软敏捷开发框架解君愁

        力软敏捷开发框架/快速开发平台是一款轻量化多语言可视化开发工具.秉持以“让开发变得简单”为宗旨,深耕软件平台, 拥有近10年的行业开发经验,经典的.NET软件产品已经服务超5000家客户,并得 ...

  5. HKDAS产品技术架构图

  6. 推荐掌握Linux shell中这7种运算命令

    #常见的算术运算符号 .+.-:加减 .*./.%:乘.除.取余 .**:幂运算 .++.--:增加记减少 .!.&&.||:取反,并且,或 .<,<=,>,=> ...

  7. PDF启动增加字段

    ALTER TABLE `cnoa_system_fs` ADD `reviewStatus` INT(1) NOT NULL DEFAULT '0' AFTER `isArchive`;ALTER  ...

  8. HashSet保证元素唯一原理以及HashMap扩容机制

    一.HashSet保证元素唯一原理: 依赖于hashCode()和equals()方法1.唯一原理: 1.1 当HashSet集合要存储元素的时候,会调用该元素的hashCode()方法计算哈希值 1 ...

  9. 设计模式也可以这么简单(7年开发老鸟PS注释总结)

    设计模式是对大家实际工作中写的各种代码进行高层次抽象的总结,其中最出名的当属 Gang of Four (GoF) 的分类了,他们将设计模式分类为 23 种经典的模式,根据用途我们又可以分为三大类,分 ...

  10. IT行业程序开发如何

    学习程序开发怎么样,由于软件开发涉及到的知识结构比较丰富,所以学习软件开发通常需要一个系统的学习过程.如果未来要想专业从事软件开发工作,那么可以按照以下步骤学习软件开发技术: 第一:从计算机操作系统开 ...