前端素材 设计元素 界面设计 网页素材 网站模板 按钮素材 名片素材 字体设计 图标设计 生活百科
官方客服QQ号:3007971137  (一条龙搭建-联系我)
官方客服QQ号:3007947123  (一条龙搭建-联系我)

console对象的方法log、info、warn、error的区别及几个实用的方法

生活百科 技术02-千编万码 5月前  次浏览


console对象的方法log()、info()、warn()、error()区别及几个实用的方法

先说一下console,JavaScript 原生中默认是没有 Console 对象,这是某些浏览器提供的内置对象。
在不同的浏览器里显示可能不同

下面的运行截图中,图中的灰色是运行的这句,灰色下面是此句运行的结果



log()、info()、warn()、error()区别

1、 log()和info()

  • 这两个没区别,看别人有说info()前有个蓝色的图标,不过我使用的版本的谷歌浏览器运行时没有


因为没有运行出来,下面这张图是在网上偷的,地址:https://zhuanlan.zhihu.com/p/23080626。
        下面会有堆栈内依次调用运行的方法名及其他等信息,有的浏览器是没有的



2、warn()和error()

  • warn()输出的log前有个黄色的图标
  • error()输出的log前有个红色的图标
  • 这两个展开下面,会有堆栈内依次调用运行的方法名及其他等信息,除了颜色信息都是一样的








几个实用的方法

1、trace()

  • 调试JavaScript程序时,使用console.trace(),不仅会打印函数调用栈信息,同时也会显示函数调用中各参数的值。

2、count()

  • 可以把console.count()放在一个方法内,每次调用都会加1,更好显示方法被调用了多少次。

3、time()和timeEnd()

  • 以ms为单位的时间,这两个要同时用,可以不写参数,输出的是,default:** ms
  • 如果加了参数,参数要一致console.time(“count”);否则会报错,输出的是,count:** ms



4、assert()

  • 一般两个参数,前面的是表达式,后面是要输出的内容,如果表达式为false,则输出



5、clear()

  • 清空console的输出信息。

6、dir()

  • 使输出内容格式化更易读,而且也会输出一个对象的全部属性和方法。

7、table()

  • 数组格式
//var table = [
//     {"name": "小猪佩奇", "sex": "F"},
//     {"name": "小狗丹尼", "sex": "M"},
//     {"name": "小猫坎迪", "sex": "F"},
//     {"name": "小羊苏西", "sex": "F"},
//];
//这个键不一定是字符串类型的
var table = [
      {name: "小猪佩奇", sex: "F"},
      {name: "小狗丹尼", sex: "M"},
      {name: "小猫坎迪", sex: "F"},
      {name: "小羊苏西", sex: "F"}
];
console.table(table);
下面的图输出的是没有引号的,我只是表现上加了console.table("table");


对象格式


var table = {
     "一": {"name": "小猪佩奇", "sex": "F"},
     "二": {"name": "小狗丹尼", "sex": "M"},
     "三": {"name": "小猫坎迪", "sex": "F"},
     "四": {"name": "小羊苏西", "sex": "F"}
};
console.table(table);


相关链接

发表评论