火狐的调试利器Firebug

摘要:
今天例行分享会的主题是Firebug的使用。也许对很多同事来说,这些都不是新知识,但对我来说,我必须好好总结我今天学到的东西。

每次分享例会同事的分享都会让我学习到很多知识,因为我的基础比较差。所以对很多东西都不熟悉。

    今天的分享例会主题是关于Firebug的运用,或许对很多同事来说,这些都不是新知识,但是对我来说我必须得好好总结一下今天所学的知识。
    1.什么是Firebug:
    Firebug 是网页浏览器 Mozilla Firefox 下的一款开发类插件;它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、 CSS、HTML和Ajax的得力助手。Firebug是一个插件,它必须和Firefox(chrome)浏览器结合使用;可以方便地启用/关闭这个插 件,安装插件之后,打开需要测试的页面,使用快捷键F12唤出Firebug插件,它会将当前页面分成上下两个框架。   

火狐的调试利器Firebug第1张      

    2.关于控制台:

    控制台能够显示当前页面中的javascript错误以及警告,并提示出错的文件和行号,方便调试;同时还能够在控制台中查看变量内容,直接运行javascript语句;控制台还有个重要的作用就是查看脚本的log。

火狐的调试利器Firebug第2张

    关于控制台的一些命令:

   (1)console.log(object[,object,...])  类似C语言的printf

火狐的调试利器Firebug第3张

     举例:console.log("The %s jumped over %d tall buildings",animal,count);

          console.log("The",animal,"jumped over",count,"tall buildings");

          console.log("I am %s and I have:"myName, thing1, thing2, thing3);

          console.log("%cThis is red text on a green backgroun","color:red; background-color:green");

  (2)console.debug(object[,object,...])  类似console.log, 会额外的输出被调用行的超链接    

火狐的调试利器Firebug第4张

  (3)console.info(object[,object,...])  类似console.debug, 会显示"info"的颜色和图标   

火狐的调试利器Firebug第5张

  (4)console.warn(object[,object,...])  & console.error(object[,object,...])     

火狐的调试利器Firebug第6张

  (5)console.assert(expression[,object,...]) 判断一个表达式或变量是否为真, 如果不为真, 则在控制台输出相应的信息并抛出异常      

火狐的调试利器Firebug第7张  (6)console.dir(object) 以表格方式显示对象所有属性, 类似DOM标签   

火狐的调试利器Firebug第8张

  (7)console.trace() 输出函数被调用的轨迹, 写在要跟踪到的函数里, 列出调用堆栈     

火狐的调试利器Firebug第9张

  (8)console.time(name)/console.endTime(name) 创建一个计时器,返回直到调用console.endTime(name)时指定相同计时器名所持续的时间      

火狐的调试利器Firebug第10张

    3.关于HTML查看器:

    查看器查看的代码已经经过格式化的,它有清晰的层次,能方便地分辨出每一个标签之间的从属并行关系,标签的折叠功能能够帮助你集中精力分析代码;同时HTML查看器会将页面上改变的内容也抓下来,并以黄色高亮标记,让网页的暗箱操作彻底成为历史。      

火狐的调试利器Firebug第11张

    4.关于CSS查看器:

    CSS查看器不仅自下向上列出每一个CSS样式表的从属继承关系,还列出了每一个样式在哪个样式文件中定义;你可以在这个查看器中直接添加、修改、删除一些CSS样式表属性,并在当前页面中直接看到修改后的结果。

火狐的调试利器Firebug第12张

    CSS查看器还可以以标尺的形式展现当前选择区块占用的面积,精确到象素,并且能够在这个可视化的界面中直接修改各象素的值,页面上区块的位置就会随改动 而变化;在页面中某些元素出现错位或者面积超出预料值时,该功能能够提供有效的帮助,可借此分析offset、margin、padding、size之 间的关系
    5.关于脚本调试器:

    脚本调试器提供了规范的调试环境,单步调试、设置断点和变量查看等,极大的节约了开发者的时间。     

火狐的调试利器Firebug第13张

火狐的调试利器Firebug第14张

    6.关于DOM查看器:

    DOM(Document Object Model)里头包含了大量的Object以及函数、事件,DOM查看器能方便地浏览DOM的内部结构,帮助你快速定位DOM对象;双击一个DOM对象,即可编辑它的值,非常方便。       

火狐的调试利器Firebug第15张

    7.关于网络状况监视器:

    网络监视器可用来监视加载 Web 页面所花费的时间,它能将页面中的请求数据载入所消耗的时间以矩状图呈现出来,进而对网页进行调优,还能预览图片,查看每一个外部文件甚至是xmlHttpRequests请求的http头等,方便诊断分析。        

火狐的调试利器Firebug第16张

   8.关于推荐的文章:

   Firebug 必须掌握的技巧:http://www.blueidea.com/tech/web/2009/7284.asp 

   FireBug调试技巧:http://www.378q.com.cn/html-js-css/178.html

   Firebug 动态调试和优化应用程序:http://www.ibm.com/developerworks/cn/web/wa-aj-firebug/ 

   FireBug网络监视详解:http://magustest.com/blog/softwaretesting/introduction-to-firebug-network-monitoring/

   FireBug net面板详解:http://www.qianduan.net/detailed-firebug-net-panel.html

免责声明:文章转载自《火狐的调试利器Firebug》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇spring+springmvc+mybatis xml配置文件IDEA在线和离线安装lombok下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

RedisTemplate访问Redis数据结构(二)——List

RedisTemplate使用ListOperations专门操作list列表。首先初始化spring工厂获得redisTemplate和opsForList private RedisTemplate<String,Object> redisTemplate; private ListOperations<String,...

ubuntu中minicom安装和使用

想要对嵌入式开发板进行开发和操作,都需要进行文件传输或者是控制,这时基本都是需要通过串口线或者是网线进行连接的,在Windows下是使用超级终端通过串口对开发板进行操作的,而在Linux下,最后最常见的串口调试工具就是minicom。minicom的安装过程还是比较简单的,对于操作过程也就是一个熟悉的过程,在其中的操作都是字符界面下的,只要知道熟悉,就能熟...

【C#写日志两个简单方法】

方法一:以日期为日志文件名. public void WriteLog(stringmsg) { string filePath = AppDomain.CurrentDomain.BaseDirectory + "Log"; if (!Directory.Exists(filePath)) {...

C#装箱和拆箱简介

装箱和拆箱发生在数据类型转换。 先看下装箱和拆箱的概念: 装箱:值类型向引用类型或者值类型转化成它实现的某个接口 拆箱:引用类型向值类型或者接口类型转化成值类型 比如说: int x=5; object o=x; //装箱 y=(int)o; //拆箱 object为引用类型,其他的数据类型int,string,bool等继承于objec...

android 系统log文件路径

http://87426628.blog.163.com/blog/static/60693618201310187938621/ 手机的默认的日志目录:  /data/local/tmp/* /data/tmp/* /data/system/usagestats/* /data/system/appusagestates/* /dat...

Linux系统学习 九、日志、命令、身份鉴别、目录、文件查看、控制台终端、文件属性

一、配置静态IP地址 输入ifconfig后没有配置IP地址,接下来进行手动配置。 输入以下命令进入IP配置文件进行配置 原始内容 进入vi后,输入i进入编辑状态,编辑完成后,按esc键退出编辑状态,输入:wq进行保存退出。 编辑后的内容 重新启动一下 遇到的问题: IP配置完成,重启后,可以和本机ping通,但是无法ping通百度。 原因...