`
传说の黄花菜
  • 浏览: 202169 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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

阅读更多

控制台标签概览

这个标签主要用来打印日志之用。它也可以在进行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的性能进行优化。关于这方面的细节将在接下来的章节中详细讲述。

 

总结:

如有什么问题,请在我博客上留言

  • 大小: 457 Bytes
  • 大小: 516 Bytes
  • 大小: 524 Bytes
  • 大小: 20.9 KB
  • 大小: 18.6 KB
  • 大小: 27.9 KB
  • 大小: 19.2 KB
分享到:
评论
3 楼 传说の黄花菜 2010-04-13  
lucky16 写道
昨天你叫我来看看这个文章,今天就来了,原来听说过这个,但是其实也没有怎么用,看了这个,哈哈,事半功倍了!激情+努力!


呵呵 非常感谢你对这系列文章的支持,这系列好久没更新了 最后还有一篇 最近会补上的:)

2 楼 lucky16 2010-04-13  
昨天你叫我来看看这个文章,今天就来了,原来听说过这个,但是其实也没有怎么用,看了这个,哈哈,事半功倍了!激情+努力!
1 楼 wanglei8 2009-12-11  
感谢博主,不知可否将原文地址发出来

相关推荐

    firebug-1.10.0a9

    在压缩包内的文件中,"Readme-说明.htm"通常包含有关软件的详细信息,如安装指南、使用方法、更新日志或注意事项等。它是用户了解软件功能和操作的关键文档。而"firebug-1.10.0a9.xpi"是Firefox插件的扩展文件格式,...

    最新版fireBug插件

    在提供的压缩包中,"Readme-说明.htm"文件很可能是关于如何安装和使用最新版FireBug的详细指南,包括可能的系统需求、安装步骤和使用教程等内容。而"firebug-1.6.1.xpi"则是FireBug插件的安装文件,用户可以直接在...

    firebug插件

    `Readme-说明.htm`文件通常包含关于如何安装和使用Firebug的详细指南,包括任何需要注意的事项和更新日志。阅读这个文件可以帮助新用户快速上手,并了解可能遇到的问题及其解决方案。 总的来说,Firebug是Web开发者...

    firebug 1.8

    9. **插件扩展**:Firebug拥有丰富的第三方插件,如WebConsole和Console2,这些插件提供了更多的功能,如增强的日志记录和更强大的控制台。 10. **文档支持**:随同发布的"Readme-说明.htm"文件可能包含了关于如何...

    Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

    - **CSS面板**:显示页面中使用的CSS样式,并允许用户实时调整这些样式。 - **Script面板**:提供JavaScript代码调试工具,包括断点设置、单步执行等功能。 - **Console面板**:显示浏览器运行时的各种日志信息,...

    轻松学习EXTJS

    - **Firefox + Firebug**:鉴于EXT JS开发者的偏好以及Firebug在调试JavaScript方面的强大功能,强烈推荐使用Firefox搭配Firebug进行开发。 - **Firebug特点**: - 显示动态生成的DOM元素; - 允许直接修改DOM并...

    Firefox_Setup_8.0.zip

    至于"新建文本文档.txt",这通常是一个普通的文本文件,可能包含有关Firefox或Firebug的使用说明、安装指南或其他相关信息。在实际使用中,这样的文本文件可能会提供额外的上下文或者帮助文档,便于用户理解和操作。...

    selenium入门教程c#分享.docx

    - **日志区域**: 显示执行过程中产生的日志信息。 - **关键设置**: - 在 Options 中选择正确的格式设置,确保录制的脚本能够正确转换成所需的语言格式。 - **使用示例**: - 启动录制功能。 - 执行所需的操作,...

    Scrapy文档1.4.0 文档

    - **捕获异常**:可以在爬虫中捕获这些异常,进行错误处理或记录日志。 #### 四、内置服务 ##### 4.1 Logging (日志) - **记录日志**:Scrapy提供了丰富的日志记录功能,便于调试和监控爬虫状态。 - **日志级别**:...

    python版网络爬虫

    - **使用Firebug进行抓取**:Firebug是一个流行的浏览器插件,可以辅助调试抓取过程。 - 示例:使用Firebug来调试XPath选择器。 - **调试内存泄露**:长时间运行的爬虫可能会遇到内存泄露的问题。 - 示例:查找...

    Scrapy Documentation Release 1.0.5

    - **处理**: 在 Spider 中可以通过处理 Requests 和 Responses 来控制爬虫的行为。 ##### 3.10 Link Extractors - **定义**: Link Extractors 用于从网页中提取链接。 - **使用**: 可以通过 Link Extractors 自动...

    scrapy1.1参考手册

    - **Ubuntu软件包**:介绍如何在Ubuntu系统中使用软件包管理器安装Scrapy及相关依赖。 - **部署爬虫**:讲解如何将Scrapy爬虫部署到生产环境,包括自动化部署流程、持续集成等。 - **自动限速扩展**:AutoThrottle是...

    python scrapy电子书开发文档

    - **使用Firebug进行爬取**:展示了如何利用Firebug插件来调试爬虫。 - **调试内存泄漏**:提供了诊断和解决内存泄漏问题的方法。 - **下载项目图片**:讲解了如何自动下载网页中的图片。 - **Ubuntu软件包**:提到...

    scrapy1.1 帮助文档

    - **常见问题解答(Frequently Asked Questions)**:解答用户在使用Scrapy过程中遇到的常见问题。 - **调试爬虫(Debugging Spiders)**:介绍如何调试爬虫代码,解决运行过程中出现的问题。 - **爬虫合约(Spiders ...

    scrapy.pdf

    - **信号量**:介绍 Scrapy 中使用的信号机制,可用于触发特定事件。 - **异常处理**:列举 Scrapy 中可能抛出的异常类型,帮助开发者编写健壮的应用程序。 - **Item 导出器**:支持将 Item 数据导出为不同的格式,...

    scrapy教程

    - **使用Firebug进行爬取**:介绍了Firebug插件在爬虫开发中的应用。 - **内存泄漏调试**:提供了调试内存泄漏的方法。 - **文件和图像的下载及处理**:讲解了如何下载文件和图片,并进行后续处理。 - **Ubuntu...

    scrapy0.22 API英文版

    - **Django Item**:如何在Scrapy中使用Django模型。 #### 扩展Scrapy 除了以上基础功能外,Scrapy还提供了许多扩展点,允许开发者根据自己的需求定制和扩展Scrapy的功能: - **架构概览**:解释了Scrapy内部的...

Global site tag (gtag.js) - Google Analytics