当前位置:Web前端 > javascript> 正文

使用Console调试js脚本

时间:2015-4-4类别:Web前端

使用Console调试js脚本

使用Console调试js脚本

一、浏览器对Console的支持

基本上所有最新的浏览器都支持, 其中 Chrome 和 FireFox 用起来最方便。

 

二、为什么不直接使用 alert 或自己写的 log

使用 alert 不是一样可以显示信息,调试程序吗?alert 弹出窗口会中断程序, 如果要在循环中显示信息,手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。 自己写的 log 虽然可以显示一些 object 信息,但很多功能支持都没有 console 好

 

三、Console常用的方法

 

1、Console.log(object[, object, ...])

Console.log 是最简单输出信息到 console 窗口的方法,支持多个参数,该方法会把 这些参数组合在一起显示

log 方法第一个参数支持下面几种替换模式:

(1)、%s  代替字符串

(2)、%d  代替整数

(3)、%f  代替浮点值

(4)、%o  代替 Object

 

2、console.debug,info,warn,error

这 4 种方法与 log 方法使用一模一样,只是显示的图标和文字颜色不一样.

 

3、 console.assert(expression[, object, ...])

assert 方法类似于单元测试中的断言,当 expression 表达式为 false 的时候,输出后面的信息

 

4、console.clear()

该方法清空 console 中的所有信息

 

5、console.dirxml(node)

把 html 元素的html 代码打印出来,等同于log.

 

6、console.trace()

trace 方法可以查看当前函数的调用堆栈信息,即当前函数是如何调用的。

在大型项目尤其是框架开发中,函数的调用轨迹可以十分复杂,console.trace()方法可以将函数的被调用过程清楚地输出到控制台上。

 

7、console.group(object[, object, ...]), groupCollapsed, groupEnd

这 3 个函数用于把 log 等输出的信息进行分组,方便阅读查看。

groupCollapsed 方法与 group 方法一样,只是显示的分组默认是折叠的.

 

8、console.time(name)/console.timeEnd(name)

我们经常需要测试 js 函数的执行时间,可能我们自己写代码在第1 条语句和 最后 1 条语句取当前时间相减。这组函数其实就实现了这样的功能,time(name)根据 name 创建 1 个新 的计时器。timeEnd(name)停止给定name 的计时器,并显示时间。

  • 
    console.time('计时器');
    for (var i = 0; i < 1000; i++) {
          for (var j = 0; j < 1000; j++) {}
    }
    console.timeEnd('计时器');
    
    		
  • 以上代码计算console.time('计时器');和console.timeEnd('计时器');之间的代码块所需要的事件。

     

    9、console.profile(name)/console.profileEnd()

    这组方法用于打开浏览器的分析器,用于分析这组函数之间的 js 执行情况

    开发中,我们常常要评估段代码或是某个函数的性能。在函数中手动打印时间固然可以,但显得不够灵活而且有误差。借助控制台以及console.profile()方法我们可以很方便地监控运行性能。

  • 
    function parent() {
          for (var i = 0; i < 10000; i++) {
                childA()
          }
    }
    
    function childA(j) {
          for (var i = 0; i < j; i++) {}
    }
    
    console.profile('性能分析');
    parent();
    console.profileEnd();
    
    		
  • 上述代码计算console.profile('性能分析');和console.profileEnd();之间,代码块中涉及的函数的运行效率。

     

    10、console.count([title])

    count 方法用于统计当前代码被执行过多少次,title 参数可以在次数前面输出额外的标题以帮助阅读

     

    11、console.table(data)

    table 方法把data 对象用表格的方式显示出来,这在显示数组或者格式一样的JSON 对象的时候非常有用。

    可将传入的对象,或数组以表格形式输出,相比传统树形输出,这种输出方案更适合内部元素排列整齐的对象或数组,不然可能会出现很多的 undefined。

  •  
  • JScript 代码   复制
  • 
    var people = {
            flora: {
                name: 'floraLam',
                age: '12'
            },
            john: {
                name: 'johnMa',
                age: '45'
            },
            ray:{
                name:'rayGuo',
                age:'22'
            }
        };
    
        console.table(people);
    
    		
  •  

     

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐