一、显示信息
Firebug内置一个console对象,提供5种方法,用来显示信息。
1、console.log()
console.log()方法,用来向浏览器的开发者工具界面的控制台窗口输出信息。可以使用它代替JavaScript脚本的alert()或document.write()方法。好处有:如果需要了解循环内部的数据或者帧动画数据的变化情况,使用alert()会使得浏览器页面频繁地弹出窗口,甚至陷入死循环(如帧动画),此时只有强制杀死浏览器进程才能结束程序运行;使用document.write()方法会反复在页面显示数据,影响页面显示效果。为了避免陷入弹出窗口死循环,同时不影响页面显示效果,使用console.log()调试脚本程序是一个非常完美的选择。因为你想要了解查看的数据都会单独显示在控制台。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
运行结果:
2、其余显示方法
根据信息的不同性质,console对象还有4种显示信息的方法,分别是:一般信息console.info();除错信息console.debug();警告提示console.warn();错误提示console.error()。
- 1
- 2
- 3
- 4
- 5
- 6
控制台显示:
3、占位符
console对象提供的以上5种方法,都可以使用printf风格的占位符。但是,占位符种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
控制台显示:
4、分组显示
如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
控制台显示:
5、console.dir()
console.dir()方法可以显示一个对象所有的属性和方法。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
控制台显示:
6、console.dirxml()
console.dirxml()方法用来显示网页的某个节点(node)所包含的html/xml代码。如下:获取一个无序列表节点。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
控制台显示:
7、console.assert()
console.assert()方法表示断言,用来判断一个表达式或变量是否为真。如果结果为真,则控制台无显示;如果结果为假,则在控制台输出一条相应信息,并且抛出一个异常。
- 1
- 2
- 3
- 4
- 5
- 6
控制台显示:
8、console.trace()
console.trace()方法用来追踪函数的调用轨迹。将它添加到你想追踪的函数的内部,就可以在控制台看到该函数的调用顺序。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
控制台显示:其中test.html是对应的调用该函数的页面文件。
9、计时器
console.time()和console.timeEnd()方法,用来计算并显示代码的运行时间,它俩成对出现。成对的两个方法的参数值相同,标明计时的开始位置和结束位置。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
控制台显示:(显示了标识符“计时器”)
10、console.profile()
console.profile()和console.profileEnd()方法,成对出现,用于分析程序各个部分的运行时间,以便分析性能,找出问题,从而进行优化。
例如:函数method()调用另一个函数sub_method()100次。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
控制台显示:左上角显示了标识符“性能分析”。从显示结果可以看出:函数调用共101次,共耗时2.795毫秒。其中调用sub_method()
函数100次,耗时1.655毫秒,占总耗时的59.21%,最短运行时间0.01毫秒,最长0.175毫秒,平均0.017毫秒。调用method()函数1次,占用时间1.14毫秒(总耗时减去sub_method()
的耗时),method()函数总耗时 = 该段程序总耗时。