console调试JS总结

我就是我 2022-07-16 08:25 162阅读 0赞

#### 平时在开发过程中经常需要调试js代码，console给我们提供了很大的便利，其实除了熟知的console.log()，console.dir()等，console还有很多方法十分好用。下面简单总结一下。 ####

#### 首先分别在谷歌，火狐，nodejs下试了一下，目前的支持情况如下： ####

![火狐浏览器][20161011142012904]

![谷歌浏览器][20161011142043858]

![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();

![这里写图片描述][20161011143238138]

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()已经弃用，用以上三个代替，  
    ![这里写图片描述][20161011144511627]

/*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的简单总结。

[20161011142012904]: /images/20220716/fdeba591f66d4dba9a2d84fdef69403e.png
[20161011142043858]: /images/20220716/9cfa1bdbbf0441fab5a00283cada4aba.png
[nodejs]: /images/20220716/e96be3752c0a4371911ae07ca92a3b01.png
[20161011143238138]: /images/20220716/be00fc57abdc46bebaaadfbe4c1f73de.png
[20161011144511627]: /images/20220716/a2ce58545eae409b9be65ed74efc585b.png