博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
火狐的调试利器-----Firebug
阅读量:4478 次
发布时间:2019-06-08

本文共 2160 字,大约阅读时间需要 7 分钟。

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

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

      

    2.关于控制台:

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

    关于控制台的一些命令:

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

     举例: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, 会额外的输出被调用行的超链接    

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

 

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

 

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

  (6)console.dir(object) 以表格方式显示对象所有属性, 类似DOM标签   

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

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

    3.关于HTML查看器:

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

 

    4.关于CSS查看器:

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

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

    5.关于脚本调试器:

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

    6.关于DOM查看器:

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

 

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

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

   8.关于推荐的文章:

   Firebug 必须掌握的技巧: 

   FireBug调试技巧:

   Firebug 动态调试和优化应用程序: 

   FireBug网络监视详解:

   FireBug net面板详解:

转载于:https://www.cnblogs.com/duanduanDio/archive/2012/02/11/2346913.html

你可能感兴趣的文章
查找文件并执行的shell命令
查看>>
7.01-beautiful_soup2
查看>>
在Windows上弄一个redis的docker容器
查看>>
Servlet组件之一——Filter过滤器
查看>>
Java 三大特性——封装、继承、多态
查看>>
软件测试基础 - 配置管理
查看>>
数据仓库创建以及开发人员操作的基本命令
查看>>
【翻译】Ext JS最新技巧——2014-5-12
查看>>
关于float和margin
查看>>
简单的正则解析
查看>>
【原创】StreamInsight查询系列(七)——基本查询操作之基础排序
查看>>
C# 安装包制作
查看>>
【P2564】生日礼物(单调队列)
查看>>
Instuments工具
查看>>
新创建django项目,但网页打不开127.0.0.1:8000
查看>>
Python练习-内置函数的应用
查看>>
洛谷P3905 道路重建
查看>>
数据表格 - DataGrid - 行编辑
查看>>
HQL查询语句
查看>>
jsp听课笔记(四)
查看>>