console调试JS总结

平时在开发过程中经常需要调试js代码,console给我们提供了很大的便利,其实除了熟知的console.log(),console.dir()等,console还有很多方法十分好用。下面简单总结一下。
首先分别在谷歌,火狐,nodejs下试了一下,目前的支持情况如下:

火狐浏览器

谷歌浏览器

nodejs控制台

相对来说,nodejs控制台对console的支持不是很多。

  1. 提示信息
    console.log() 一般输出
    console.info() 消息
    console.warn() 警告
    console.error() 错误
  2. 打印对象
    console.dir() 打印对象属性
    console.table() 打印对象属性以表格的形式展示(只有火狐中有效,nodejs中无该方法)

  3. 分组打印
    console.group() … console.groupEnd() 分组显示

/*console.group 分组显示*/   //nodejs中不能用
console.group();   
console.log('1');
console.log('2');
console.groupEnd();
  1. 查看函数调用
    console.trace() 显示函数的调用层次。
/*console.trace*/
var car;

var func1 = function() {
func2();
}

var func2 = function() {
func4();
}

var func3 = function() {

}

var func4 = function() {
car = new Car();
car.funcX();
}

var Car = function() {
this.brand = 'volvo';
this.color = 'red';

this.funcX = function() {
this.funcY();
}

this.funcY = function() {
this.funcZ();
}

this.funcZ = function() {
console.trace('trace car')
}
}

func1();

这里写图片描述

  1. console.assert(bool) 传入一个bool值,判断某个条件是否为真。如果为真不打印结果,为假则会报错并阻塞
/*console.assert 判断是否为真*/
var result = false;
console.assert(result);   //会阻塞后面的运行
  1. console.time() … console.timeEnd() 查看程序运行时间,将要查看的代码放在两者之间。console.timeStamp() 打时间戳。谷歌浏览器中的console.markTimeline(),console.timeline(),console.timelineEnd()已经弃用,用以上三个代替,
    这里写图片描述
/*console.time 查看程序运行时间*/
console.time();
for (var i = 0; i < 100000; i++) {

}
console.timeEnd();
  1. console.clear() 清楚控制台
  2. console.count() 统计函数执行的次数
for(var i = 0; i < 10; i++ ) {
    funcA();
}
function funcA () { ... }
console.count(funcA);  //打印函数funcA()执行次数
  1. console.profile() 性能调试,可以查看当前代码段的性能,每个函数调用的次数,比例等。其实在审查元素的profile里也可以查看,但console.profile()可以包含要查看的特定代码段,十分方便。
/*console.profiler 性能分析  nodejs 和火狐中看不到效果 在谷歌中需要打开profile查看 看到每个函数的调用比例和时间*/
function foo () {
    for (var i = 0; i < 10; i++) funcA();
    funcB();
}

function funcA () {
    for (var i = 0; i < 1000; i++) {}
}

function funcB () {
    for (var  i = 0; i < 100; i++) {}
}
console.profile();
foo();
console.profileEnd();

以上是对console的简单总结。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值