Firebug全了解

Firebug 全了解
Firebug 是 firefox 下的一个扩展, 能够调试所有网站语言，如 Html,Css 等，但 FireBug 最吸引人的就是 javascript 调试功能，使用起来非常方便，而且在各种浏览器下都能使用（IE,Firefox,Opera, Safari）。除此之外，其他功能还很强大，比如 html,css,dom 的查看与调试，网站整体分析等等。总之就是一整套完整而强大的 WEB 开发工具。再有就是其为开源的软件。

Firebug 是网页浏览器 Mozilla Firefox 下的一款开发类扩展，现属于 Firefox 的五星级强力推荐扩展之一。它集 HTML 查看和编辑、Javascript 控制台、网络状况监视器于一体，是开发 JavaScript、CSS、HTML 和 Ajax 的得力助手。Firebug 如同一把精巧的瑞士军刀，从各个不同的角度剖析 Web 页面内部的细节层面，给 Web 开发者带来很大的便利。例如 Yahoo! 的网页速度优化建议工具 YSlow。Firebug 也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的 CSS、HTML、DOM 以及 JavaScript 代码。

（Firebug 如同一把精巧的瑞士军刀，从各个不同的角度剖析 Web 页面内部的细节层面，给 Web 开发者带来很大的便利。Firebug 也是一个除错工具。
用户可以利用它除错、编辑、甚至删改任何网站的 CSS、HTML、DOM 以及 JavaScript 代码。）

主要功能：

CSS 调试
每一个样式在哪个样式文件中定义。你可以在这个查看器中直接添加、修改、删除一些 CSS 样式表属性，并在当前页面中直接看到修改后的结果。
一个典型的应用就是页面中的一个区块位置显得有些不太恰当，它需要挪动几个象素。这时候用 CSS 调试工具可以轻易编辑它的位置——你可以根据需要随意挪动象素。
提示：如果你正在学习 CSS 样式表的应用，但是总记不住常用的样式表有哪些值，可以尝试在 CSS 调试器中选中一个样式表属性，然后用上下方向键来改变它的值，它会把可能的值一个个遍历给你看。

CSS 尺标
我们可以利用 Firebug 来查看页面中某一区块的 CSS 样式表，如果进一步展开右侧 Layout tab 的话，它会以标
尺的形式将当前区块占用的面积清楚地标识出来，精确到象素，更让人惊讶的是，你能够在这个可视化的界面中直接修改各象素的值，页面上区块的位置就会随改动而变化。在页面中某些元素出现错位或者面积超出预料值时，该功能能够提供有效的帮助，你可以籍此分析 offset、margin、padding、size 之间的关系，从而找出解决问题的办法。

网络监视器
也许有一天，你的老板或者客户找到你，抱怨你制作的网页速度奇慢，你该如何应对？你或许会说这可能是网络问题，或者是电脑配置问题，或者是程序太慢，或者直说是他们的人品问题？不管怎么说，最后你可能被要求去解决这个有多种可能的问题。
网络状况监视器能帮你解决这个棘手问题。Firebug 的网络监视器同样是功能强大的，它能将页面中的 CSS、javascript 以及网页中引用的图片载入所消耗的时间以矩状图呈现出来，也许在这里你能一把揪出拖慢了你的网页的元凶，进而对网页进行调优，最后老板满意客户欢喜，你的饭碗也因此而牢固。
网络监视器还有一些其它细节功能，比如预览图片，查看每一个外部文件甚至是 xmlHttpRequests 请求的 http 头等等。

JS 调试器
这是一个很不错的 javascript 脚本调试器，占用空间不大，但是单步调试、设置断点、变量查看窗口一个不 少。正所谓麻雀虽小，五脏俱全。
如果你有一个网站已经建成，然而它的 javascript 有性能上的问题或者不是太完美，可以通过面板上的 Profile 来统计每段脚本运行的时间，查看到底是哪些语句执行时间过长，一步步的来排除问题。

Console 控制台
控制台能够显示当前页面中的 javascript 错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试 Ajax 应用的时候也是特别有用，你能够在控制台里看到每一个 XMLHttpRequests 请求 post 出去的参数、URL，http 头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。
像 C shell 或 Python shell 一样，你还能在控制台中查看变量内容，直接运行 javascript 语句，就算是大段的 javascript 程序也能够正确运行并拿到运行期的信息。
控制台还有个重要的作用就是查看脚本的 log, 从前你也许习惯了使用 alert 来打印变量，但是 Firebug 给我们带来了一个新朋友 —— console.log, 最简单的打印日志的语法是这样的：
console.log(“hello world”)如果你有一堆参数需要组合在一起输出，可以写成这样：
console.log(2,4,6,8,”foo”,bar). Firebug 的日志输出有多种可选的格式以及语法，甚至可以定制彩色输出，比起单调的 alert，显然更加方便，限于篇幅，这里不做详细说明，但是有助于提高 debug 效率的读者，可以到 Firebug 的官方站点（见附录）查看更详细的教程。

修改 HTML
第一次看到 Firebug 强大的 HTML 代码查看器，就觉得它与众不同，相比于 Firefox 自带的 HTML 查看器，它的功能强大了许多。
首先你看到的是已经经过格式化的 HTML 代码，它有清晰的层次，你能够方便地分辨出每一个标签之间的从属并行关系，标签的折叠功能能够帮助你集中精力分析代码。源代码上方还标记出了 DOM 的层次。
它清楚地列出了一个 html 元素的 parent、child 以及 root 元素，配合 Firebug 自带的 CSS 查看器使用，会给 div+css 页面分析编写带来很大的好处。你还可以在 HTML 查看器中直接修改 HTML 源代码，并在浏览器中第一时间看到修改后的效果，光凭这一点就会让许多页面设计师死心塌地地成为 Firebug 的粉丝了。
有时候页面中的 javascript 会根据用户的动作如鼠标的 onmouseover 来动态改变一些 HTML 元素的样式表或背景色，HTML 查看器会将页面上改变的内容也抓下来，并以黄色高亮标记，让网页的暗箱操作彻底成为历史。
利用 Inspect 检查功能，我们还可以用鼠标在页面中直接选择一些区块，查看相应的 HTML 源代码和 CSS 样式表，真正的做到所见即所得，如果你使用了外部编辑器修改了当前网页，可以点击 Firebug 的 reload 图片重新载入网页，它会继续跟踪你之前用 Inspect 选中的区块，方便调试。

DOM 查看器
DOM(Document Object Model) 里头包含了大量的 Object 以及函数、事件，在从前，你要想从中查到需要的内容，绝非易事，这好比你去了一个巨大的图书馆，想要找到几本名字不太确切的小书，众多的选择会让你无所适从。而使用 Firebug 的 DOM 查看器却能方便地浏览 DOM 的内部结构，帮助你快速定位 DOM 对象。双击一个 DOM 对象，就能够编辑它的变量或值，编辑的同时，你可能会发现它还有自动完成功能，当你输入 document.get 之后，按下 tab 键就能补齐为 document.getElementById，非常方便。如果你认为补齐得不够理想，按下 shift+tab 又会恢复原状。用了 Firebug 的 DOM 查看器，你的 javascript 从此找到了驱使的对象，Web 开发也许就成了一件乐事。

详细 Firebug 教程：阿里云大学——开发者课堂