控制台标签概览
这个标签主要用来打印日志之用。它也可以在进行javascript调试的时候当作命令行窗口使用(类似Microsoft Visual Studio中的立即窗口(immediate window))。而且使用它的“概览”这个子服务,还可以纪录javascript代码执行时候的一些有用的信息(如方法调用的次数,执行的时间等)。
本部分内容将涵盖下列内容~
·在firebug中使用日志
·如何将日志或者其他信息分组
·console.dir 和 console.dirxml
·断言(console.assert() )
·跟踪(console.trace())
·Timing()
·Javascript Profiler
#1.在firebug中使用日志
Firebug允许我们在控制台标签中使用日志。因此,从此以后您可以告别alert(’hello world‘)或者document.write(’hello world‘)的时代了。
在firebug中有5中日志类型。
·console.log : 打印信息(不带任何图标)
·console.debug:在控制台上打印信息,而且还包括一个超链接指向该方法被调用的那一行的地址(最新版本似乎已经没有超链接了)。
·console.error():打印信息的形式同console.debug,但是带有 图标。
·console.info():打印信息的形式同console.debug,但是带有 图标。
·console.warn():打印信息的形式同console.debug,但是带有 图标。
例子代码~
·创建一个新的html文件。
·将下列代码粘贴到<body>标签内。
<script language="javascript" type="text/javascript">
console.log('This is log message');
console.debug('This is debug message');
console.error('This is error message');
console.info('This is info message');
console.warn('This is warning message');
</script>
结果如下图所示。
字符串替代法则:
在console.log, console.info, console.debug, console.warn 和 console.error 可以使用字符串替代法则,这个类似与C/C++的字符串替代法则。
%s | 字符串 |
%d, %i | 整数 (暂时不支持numeric formatting) |
%f | 浮点数 (暂时不支持numeric formatting) |
%o | 对象引用 |
例子~
注意:这个例子我只使用console.log(),但是其他几个方法( console.info, console.debug, console.warn and console.error )其实也都是可以的。
·将上个例子中script标签内的内容都删除。
·将下列代码粘贴到body标签内。
<script language="javascript" type="text/javascript"> //This is for normal string substitution " %s, %d, %i, %f". console.log("My Name is %s. My Date of Birth is %dth %s, %i. My height is %f m.", "Nicolas Cage", 7, 'January', 1964, 1.8542); function Foo(){ this.LeftHand = function(){ return "Left Hand"; } this.RightHand = function(){ return "Right Hand"; } } //This is for object "%o". var objFoo = new Foo(); console.log('This is %o of Foo class.', objFoo); </script>
如果你在日志中使用了%s,在控制台上将会显示一个绿色的“object”超链接,点击这个超链接将会跳转到DOM标签。因此你如果点击了上图中第二行的那个“object”超链接,你将会看到所有该对象的属性列表。
#2.分组
firebug允许我们将各种日志信息进行分组。如果你代码中有相当多的日志,你可以考虑使用这个分组功能。
例子~
<script language="javascript" type="text/javascript"> var groupname = 'group1'; console.group("message group : %s " , groupname); console.log("log message 1 from %s", groupname); console.log("log message 2 from %s", groupname); console.log("log message 3 from %s", groupname); console.groupEnd(); groupname = 'group2'; console.group("message group : %s " , groupname); console.log("log message 1 from %s", groupname); var subgroupname = 'subgroup1'; console.group("message group : %s " , subgroupname); console.log("log message 1 from %s", subgroupname); console.log("log message 2 from %s", subgroupname); console.log("log message 3 from %s", subgroupname); console.groupEnd(); console.log("log message 3 from %s", groupname); console.groupEnd(); </script>
#3. console.dir 和 console.dirxml
·console.dir: 得到给定对象的所有方法和属性。下列例子中,我们调用console.dir()得到car对象的Model (属性) 和 getManufactor (方法)。
·console.xmldir(): 打印出html元素的xml树。
<table id="tbl1" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
//Create a class
function Car(){
this.Model = "Old Model";
this.getManufactor = new function(){
return "Toyota";
}
}
//Create a object
var objCar = new Car();
//Firebug
console.dir(objCar);
console.dirxml(document.getElementById('tbl1'));
</script>
输出结果~
#4. 断言 ( console.assert() )
通过console.assert()可以可以判断一个表达式是否正确。如果表达式是错误的,将会在控制台上打印出信息并抛出异常。(似乎在firebug1.2.1中有问题,我已经发信去问firebug开发小组了)
#5. Tracing ( console.trace() )
很遗憾,在firebug1.2.1中似乎支持的也不好,我已发信去问:)
#6. Timing ( Measuring the time of your code)
很遗憾,在firebug1.2.1中似乎支持的也不好,我已发信去问:)
#7. Javascript Profiler
可以通过点击控制台标签中的“概况”按钮启动此功能,通过它我们可以对javascript的性能进行优化。关于这方面的细节将在接下来的章节中详细讲述。
总结:
如有什么问题,请在我博客上留言