firebug指南（三）---在firebug中使用日志(转)

xangqun

浏览: 82604 次
性别:
来自: 江西

最近访客更多访客>>

林祥纤

donchiang709

marklam

wangzff

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

Firebug JavaScript C C++C#

控制台标签概览

这个标签主要用来打印日志之用。它也可以在进行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>标签内。

Html代码

<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>

<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标签内。

Js代码

<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>

<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允许我们将各种日志信息进行分组。如果你代码中有相当多的日志，你可以考虑使用这个分组功能。

例子~

Js代码

<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>

<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树。

Html代码

<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>

<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的性能进行优化。关于这方面的细节将在接下来的章节中详细讲述。

原文连接：http://04101334.iteye.com/blog/339693

分享到：

firebug指南（四）---javascript性能评测 ... | firebug指南（二）---firebug命令行API详 ...

2010-05-06 13:53
浏览 1022
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论