使用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。

var people = ...{
        flora: ...{
            name: 'floraLam',
            age: '12'
        },
        john: ...{
            name: 'johnMa',
            age: '45'
        },
        ray:...{
            name:'rayGuo',
            age:'22'
        }
    };

    console.table(people);