大家都众所周知的firefox的网页调试器fireBug非常好用，这里是根据官方的使用文档来写的一篇使用说明书；
一：
1：首先我们要下载安装 火狐（firefox浏览器），再在浏览器的侧边栏处，找到附加组件，在里面搜索 firebug进行安装。
2：然后在这个界面我们能看到，更新的地方有跟多，我们点开就是firebug 的官方文档了 这里是链接：点击打开链接
二：
1：然后是详细的使用说明：
#HTML部分#
Firefox有一个“查看源代码”窗口,但它不给你们真正的HTML源代码是什么样子一旦由JavaScript改变了样式。Firebug的HTML选项卡显示你现在的HTML是什么样子。
此外,从JavaScript和DOM属性,您可以访问，右侧选项卡让你发现私有属性元素,包括CSS样式规则,定义它的位置和像素大小等；
2：看到实时变化的高亮
在任何javascript驱动的网站,HTML元素不断地创建、删除和修改。你能很好的看到这些元素发生变化的时间和这些变化发生在哪里吗? Firebug突出变化发生时立即用黄色的高亮的标签。如果你想探寻或者更近的查看,你也可以选择每个变成滚动视图,这样你就不会错过任何事情。
3：即时HTML编辑
Firebug会给你一个很有趣的方式来实验HTML变化和看到他们立即生效。您可以创建、删除或编辑HTML属性和文本只需单击移动从一个到另一个。这些变化将立即应用类型。
如果你想要做的不仅仅是做些小的改变,Firebug允许您编辑整个HTML源代码的任何元素。只是右键单击并选择“编辑HTML元素……从菜单中”。
4：用鼠标找到元素
在你的页面看起来不太正确的,你想知道为什么。没有更快的方法得到的答案比Firebug工具栏上点击“检查”按钮,然后能马上找到你的元素的位置。当你移动页面,任何的改变会立即显示在Firebug,展示其背后的HTML和CSS。
5：检查、编辑、重新加载:
当你检查一个元素在HTML选项卡上,您可以重新加载页面和Firebug将继续表明,相同的元素(如果它仍然存在)后重新加载。这使得测试更加容易,当你做出改变在外部编辑器并返回到Firefox看看怎么样。
右键单击任何元素,你会有几个选项复制到剪贴板方面的元素,包括它的HTML片段,其“innerHTML属性的值,或XPath表达式来标识元素独特的。
#Firebug and Logging（日志）#
有一个奇特的JavaScript调试器,但有时发现bug的最快方法就是把尽可能多的信息到控制台。 Firebug提供了一组强大的日志记录函数,你可以调用您自己的web页面。不过啦我们要先学好正则表达式的使用哦； 写信给Firebug控制台最简单的方法是这样的:console.log("hello world")你可以通过尽可能多的对象（argument）,他们将连续连接在一起, console.log(2,4,6,8,"foo",bar).
2：日志对象超链接
console.log及其相关函数可以做更多的不仅仅是写文本控制台。你可以传递任何类型的对象console.log它将显示为一个超链接。元素、函数、数组、普通的对象,你的名字。点击这些链接将检查对象的任何选项卡是不是最合适的。
3：字符串格式化
console.log可以很好的替代字符串printf。例如,您可以编写 console.log("%s is %d years old.", "Bob", 42).
4：颜色编码
除了 console.log,还有几个其他函数可以调用打印消息丰富多彩的视觉和分析语句的区别。这些包括console.debug, console.info, console.warn,console.error.
5：时间和分析
Firebug给你两个简单的方法来测量JavaScript性能。简单的方法是调用 console.time("timing foo")之前您想要测量的代码,然后console.timeEnd("timing foo")之后。Firebug将日志的时间是花在之间。
high-fi方法是使用JavaScript分析器。就叫console.profile()之前您想要测量的代码,然后console.profileEnd()之后。Firebug将日志详细报告大约花多少时间在每个函数调用。
6：堆栈的跟踪
你只用调用 console.trace()Firebug会写出非常翔实的堆栈跟踪到控制台。它不仅会告诉你哪些函数在堆栈上,但它将包括每个参数的值传递给每个函数。您可以单击函数或对象进一步检查。
7：嵌套组
有时一个平面列表的消息很难读,所以Firebug控制台缩进给你一个解决方案。就叫 console.group("a title")开始一个新的块缩进,然后console.groupEnd()关闭。您可以创建尽可能多的水平缩进。
8：检查对象
有多少次你手写的代码将所有对象的属性,或者所有的元素在一个HTML片段?使用Firebug,您再也不写代码了。
调用 console.dir(object)将日志交互式清单的一个对象的属性,就像一个迷你版本的DOM选项卡。调用 console.dirxml(element)在任何HTML或XML元素将打印一个可爱的XML大纲,像一个小型版本的HTML标签。
9：断点
断点是一个美妙的方式,以确保您的代码保持可靠的变化。Firebug提供了一组方便的断点函数,当你断点失败将非常有用的错误提示信息写入控制台。
#JavaScript调试器和分析器#
1：更容易的找到脚本
许多web应用程序都包含相当多的文件,要找到一个您想要调试可以一件苦差事。Firebug的脚本文件选择器类型和组织文件到非常干净的名单将在提前帮你找到任何文件。你也可以过滤列表类型。
2：暂停执行任何行
Firebug允许您设置断点,告诉调试器暂停执行当它达到一个特定的行。而执行暂停中,您可以看到任何变量的冻结的值和检查对象。设置断点,只要点击任何行号,会出现一个红点,表示断点设置。再次单击红点删除断点。
3：暂停执行
如果你发现他们经常被设置，断点会变得麻烦。有时候你只是想暂停在非常特殊的条件下。Firebug允许你设置条件断点,检查一个表达式,必须对断点暂停。
设置条件断点,右键单击行号。会出现一个泡沫,提示您输入一个JavaScript表达式。你可以在任何时候改变再次右键单击表达式,或者干脆左击删除断点。
4：一个步骤一个步骤来
一旦暂停调试器,您可以继续一次执行一行。这允许您看到变量和对象是如何影响到一个特定的行执行的时候。你也可以选择单步执行超过一行。从上下文菜单中,选择“运行”这条线继续执行,直到它通过你点击的行。
5：错误的主动提示
你不总是选择使用调试器。有时调试器选择了你。Firebug给你选择进入调试器时自动出现错误,这样你就可以检查搞砸了条件使你陷入麻烦的问题了。
6：堆栈跟踪:
当调试器停顿了一下,Firebug显示调用堆栈,这是当前正在运行的嵌套的函数调用集,等着回来。
调用堆栈是表示成一个紧凑的工具栏中的按钮,每一个函数的名称在堆栈上。你可以点击任何按钮跳转到函数的地方停顿了一下,看看这个函数内的局部变量。
7：看表情
在调试时,您通常希望看到复杂的表达式的值或埋在DOM对象。Firebug允许你输入任意JavaScript表达式的值将被更新每次你一步调试器。
当你输入这些表达式,不要忘记,您可以使用tab键自动完成对象的属性。
8： 变量工具提示
调试器时停顿了一下,你可以移动鼠标在任何变量在当前函数看到工具提示显示变量的值。这是一个很好的方法来保持你的眼睛当你阅读代码和找到答案。
9： 概要JavaScript性能
您的web应用程序几乎是完美的。你已经得到了所有的bug,艺术品一直在下降,用户喜欢它。只有一个问题——你的一些特性是有点迟缓,你不知道为什么。
Firebug,你永远不会再想知道为什么你的代码是缓慢的。使用Firebug分析器,可以区分乌龟和野兔在秒。
使用分析器,去Console选项卡并单击“配置”按钮。然后使用你的应用程序或重新加载页面,然后单击“配置”按钮。然后,您将看到一个详细的报告,显示了函数被称为和每一个花了多少时间。
日志记录函数调用
有时有问题的函数被调用很多次,你不能每次都进入调试器。你只是想知道它叫什么参数传入。
跟踪所有调用一个函数,在脚本中右键点击选项卡并选择“日志调用函数名”。然后跳转到控制台看调用流。
10：直接转到108行,不通过
通常你想直接跳转到一个特定的脚本。这样做不容易,只要输入行号进入快速搜索框,之前英镑符号,见右边的屏幕截图。
11：浏览器和 eval()生成的代码
各种事件的Firefox生成Javascript函数。这些出现在Firebug页面的URL,他们来自紧随其后 event和一个名字来源于他们的源代码。你可以像其他任何断点这些函数。
类似Javascript创建的 eval()电话下的文件出现在列表中页面的URL eval()源代码,总结这个名字。
12：可执行行标记
Firebug脚本面板使用绿色的行号,如果相关线是可执行的。这样你可以知道在哪里创建一个断点。
13：打破通知
调试器可以停止JavaScript执行原因有很多。例如,调试器可以达到一个标准的脚本断点,HTML断点,XHR或错误brakpoints等。确保用户理解正确的理由通知显示细节。
14：外部编辑器中打开
个人的Firebug可以打开脚本文件显示外部编辑器或ide。Firebug还允许正确配置参数如行号,网址等。
#Firebug and Errors#
当事情出错,Firebug立即让你知道,给你详细的和有用的错误信息在JavaScript中,CSS和XML。
Firebug开始按钮
右侧的Firefox浏览器的工具栏,你会看到一个小Firebug图标。这是Firebug的入口点(即启动按钮)。它可以用来打开Firebug UI,访问基本命令或是查询是否有任何页面上的JavaScript错误。
错误页面的小型化
大多数浏览器报告错误通过将它们放在一个大窗口的问题,包括每一个网页你曾经来过。Firebug是仁慈;它仅给出了错误的页面,你看。
JavaScript错误信息
JavaScript错误包括丰富的关于错误的信息,包括一个描述、文件和行号,导致错误的源代码。更重要的是,如果你单击箭头来展开描述,您将看到一个完整的堆栈跟踪包括所有函数参数的值。
跳转到调试器
每一个错误报告在其右侧有一个链接,指向错误发生的文件和行号。单击该链接将带你到Firebug JavaScript调试器或CSS检查员,这样您就可以开始解决这个问题。
还包括一些错误的实际代码片段包含误差来源,也是原始文件的链接。
快速搜索
使用快速搜索框,您可以过滤Firebug控制台只显示错误和匹配您搜索的文本消息。新行添加到控制台,他们只会出现如果他们匹配快速搜索框中的文本。
过滤错误
Firebug的错误报告在JavaScript中,CSS和XML文件。如果你只关心其中的一些语言,不选那些你不想看到在控制台的选项菜单。
错误的位置
如果JavaScript错误控制台面板显示一个箭头线内的确切位置发生错误的地方。
#Firebug and CSS Layout#
当你的CSS盒不排队正确很难理解为什么。让Firebug是你的眼睛,它将测量和说明所有的补偿,利润率,填充,和尺寸给你。
盒模型阴影
使用CSS,每个元素由嵌套盒称为保证金,边境,填充,和内容。当你移动你的鼠标在Firebug的任何HTML元素标签,你会看到里面的元素用不同的颜色框阴影对页面。没有更快的方法来可视化的区别利润率和填充,例如。
测量每条边
Firebug的布局选项卡上给你一个直观地分析每个箱子的箱模型和每个每条边的宽度。此外,它显示了你的箱子的宽度和高度,和元素的x和y抵消相对于母公司。
统治者和导游
不要害羞,移动你的鼠标框的布局选项卡。像你,统治者和指南将出现在页面。
统治者围绕当前元素的抵消母公司的元素,其左,顶部,底部,和正确的CSS属性是相对的。元素的指南是切的边缘,是一个伟大的方式来显示pixel-perfectionists他们是多么接近使多个盒子的边缘对齐。
移动它,怎么了?
就像所有其他选项卡在Firebug,布局选项卡可以编辑。点击任意数量的视图和编辑器就会出现。就像在CSS编辑器中,您可以使用向上和向下箭头键来改变数量,或页面上下键来改变它的10。
#Firebug和网络监控#
一些web页面长时间加载,但是为什么呢?写太多JavaScript让你疯掉，你忘了压缩你的图片了吗?你的广告合作伙伴的服务器还在午睡吗?Firebug打破这一切，给你逐个文件检查。
看时间轴的展开
每个文件在网络选项卡中有一个进度条,向您展示文件开始和停止加载时相对于其他所有文件。这个会教你你不知道的事情。这将帮助你调整的顺序文件页面,以便用户花更少的时间等待的事情出现。垂直线在进度条代表一个事件(比如蓝线= = DOM加载内容)
可以分解的类型
有时候你特别关心某种类型的文件,如JavaScript或图片。单击工具栏按钮在净过滤列表的类型。这也是一个好办法找到的总大小和下载时间一个特定类型的文件。
缓存不缓存
并不是所有的网络请求是相等的——其中一些是从浏览器缓存中加载,而不是网络。Firebug提供每个请求的状态代码,这样您可以快速扫描和看到有效的站点是如何使用缓存来优化页面加载时间。
检查HTTP标头
HTTP报头包含各种各样的有趣的信息,如文件的mime类型,类型的web服务器缓存指令,饼干,和许多更多。HTTP头信息,点击左边的箭头每个请求来扩展它。
XMLHttpRequest监控
Ajax围绕的现象称为XMLHttpRequest的小东西。它不是那么有趣发送这些请求,没有视觉反馈对他们的旅行。Firebug显示每一个XMLHttpRequest,净选项卡和控制台选项卡,以及发布的文本和文本的反应。
时间戳
这个特性是有用的情况下,开发人员需要知道什么时候一块特定的JavaScript代码执行相对于HTTP请求的web页面。使用 console.timeStamp()创建视觉时间戳在图形化的时间线。
4288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
