如何使用firebug和firebug安装图文并茂流程
是浏览器工具 Mozilla firefox中的开发设计软件， 非常推荐属于Firefox的五星级软件之一。它集HTML查看与编写、Javascript控制台、互联网状况监控器于一体，是开发的 JavaScript、CSS、HTML和Ajax的左右臂。Firebug就像一个精致的瑞士军刺，从不同的角度分析网页内部结构的小细节， 给Web开发人员带来一定的便利。
对于网站开发者来说，Firebug是Firefox计算机浏览器中最好的软件之一，可以说Firebug的CSS程序调试是专门为网站设计师量身定制的！
如何安装firebug？
1、Firefox电脑浏览器首先免费下载 立即下载
2、找“专用工具”（T）在下拉框中选择“附加组件”。
3、“获得附加组件”
4、在搜索中输入“在搜索中输入”firebug"，等一会儿。
5、安装firebug软件后，图标如下图所示：
6、查询页面元素并更改页面。
如何使用？
1.组装Firebug
Firebug在Firefox浏览器中运行。此外，还有一个Firebug lite版本号可以通过javascript启用，包含在页面上，然后应用于等非firefox浏览器。本文不属于当前版本。
组装Firebug，请访问Firebug下载网页。点击页面右侧栏中间非常大的橙色按钮。你也可以在Mozila的FireFox Add-免费下载ons网站。只需重启FireFox即可安装。
如果已经组装好了，请确认是否升级到正式版本。“打开Firefox”Tools“菜单栏，选择”Add-ons在弹出对话框中单击左下角的“指令”Find Updates"按键。
二、打开和关闭Firebug
它的快捷键设置可以在Firebug平台上找到。我非常使用以下三种方法：
* 打开Firebug：按F12，然后点击电脑浏览器通知栏右侧
* 关闭Firebug：按F12，然后点击电脑浏览器通知栏右侧关掉鲜红色的标志。
* 在独立对话框中打开Firebug：点击firebug对话框右上角
Firebug相关设置：
* 在新窗口打开固定不动Firebug：先打开Firebug，点击左上角的bug标记，在options界面中选择“Always Open in New Window"设定。
* 提升/缩小字体尺寸：先打开firebug，点击左上角的bug标记，选择“Text Size"指令。
* 提升/缩小字体尺寸：先打开firebug，点击左上角的bug标记，选择“Text Size“指令。每次字体变化都很小，你可能需要应用几次。
* 仅限于一些网站应用Firebug：首先右键单击计算机浏览器中的green。 check 选择“mark标志”disable Firebug"指令。然后，右键是变灰的象征，选择“Allowed Sites...“指令，提高允许Firebug起效的域名。
三、Firebug对话框概述
* Console标识： javascript命令行主要用于表示javascript错误报告。在底部>>>提示符之后，您还可以自己输入javascript指令。
* HTML标识： 表示HTML源代码，并且像DOM等级结构一样，每排前都有缩近。也可以选择显示或无法显示子节点。
* CSS标识：访问已安装的所有页面布局，并当场更改。在Firebug对话框的上端，”edit在命令的边缘，本页所有页面布局都有一个下拉框，您可以选择页面布局进行访问。
* Script标识： 显示javascript文档及其网页页面。在Firebug对话框的上端，”inspect在命令的边缘，本页上有一个Javascript文件的所有信息下拉框，您可以选择一个进行访问。在javascript指令中，我们可以设置断点（breakpoint）以及发生的前提。
* DOM标识： 显示所有页面主体和window物体的特征。毕竟在javascript中，所有的自变量都是window物体的特征，所以firebug显示所有的变量及其值。
* Net标志：显示本页所涉及的所有免费下载，以及HTTP请求头信息内容和服务器响应的头部信息内容。XHR标识对AJAX调节非常有用。
四、随时随地编辑页面点击对话框上方的HTML标志。inspect“指令，然后选择界面中的文本节点，您可以更改它，更改结论将立即反映在页面上。
Firebug也是源代码计算机浏览器和在线编辑器。所有HTML、点击或双击鼠标编辑CSS和Javascript文件中的目标。如果输入结束，浏览器中的页面会立即发生相应的变化，您可以获得即时反馈。DOM计算机浏览器为您提供了一个完整编写文本文档结构的机会，而不拘泥于文本节点。在HTML标志中，点击对话框上端。inspect“指令边缘”edit“指令，下面的对话框将立即变成黑白文本处理对话框，您可以随意编写HTML源码。Firebug会在CSS标识中自动补充您的输入。在DOM标志中，Firebug在按Tab键时会自动补充属性名。
五、用Firebug解决CSS在DOM标志中，每个HTML元素的style特性都揭示了所有CSS设置。您可以双击鼠标编辑此设置。
Firebug会隐藏一些Firefox不兼容的CSS标准。例如，Firebug将隐藏一些浏览器CSS的特殊设置，以及一些不兼容的CSS3标准。因此，他会隐藏_height:25px;(下横线为IE6设置)和p:first-of-type {color: #ff0000;} (:first-of-type是CSS3规定的伪类，现在只有Safarii 3适用）。然而，这意味着，如果你碰巧有一个错误的计算机打字，导致一些标准没有显示，也许你只需要使用其他在线编辑器显示所有CSS的具体内容，找到你自己的错误。
Firebug给你关闭CSS中一些句子的机会，页面会立即反映相应的变化，你可以立即查询实际效果。“关掉”一个句子的方法是在句子的左侧点击，会出现红色
Firebug给你编写CSS特性和基本属性的机会。你只需要点击这些点就可以写了。浏览器窗口会立即显示出改变的效果。在明确准确定位的padding和margin中，firebug将为您提供使用键盘按钮的机会。
Firebug给你提升新意义和基本属性的机会。改进方法是什么？双击鼠标中现有的selector，然后会出现一个空白属性的著名文本框，填写后会出现一个空白基本属性。
六、盒状实体模型
如果您在HTML标志中点击一个元素，左对话框显示HTML编码，右对话框显示CSS。在CSS对话框上，有一个layout按钮，点击后会显示与此原素相关的格子实体模型，包括padding、margin和border值。只需点击“查看每个元素的三个值”inspect按钮，然后用鼠标悬挂在页面上的原素上方。
七、评估网络速度
在Net标志中，图形界面显示了页面上所有http所需的时间。要应用隐私功能，必须打开Network monitoring，默认情况是打开，但是你可以在“options在下拉列表中关闭此功能。下载javascript压缩文件可以用这个姿态进行评估，占用所有页面显示的时间。
点击每个HTTP请求的左侧，显示要求的头部信息内容。
在1.0.5版后，您可以单独查询HTML文档、CSS文档、位图文件等分别下载的软件长度。
八、DOM
给出页面中所有物体全属性的DOM标识数据。Firebug最时尚的功能之一是，它可以动态地改变页面页面，反映在浏览器窗口中，但如果访问页面查看源代码，你会发现源代码不能改变。
九、Javascript调整JavaScript profiler可以报告您实施Javascript函数公式所需的时间，因此您可以查看不同函数公式对速度的危害。应用此功能的方法是什么？打开console标识，点击上面的Profile按钮(上面的按钮程序是”Inspect |Clear | Profile"）。Firebug列出调用的所有函数及其时间。如果要检测函数公式，可以在前面添加console.profile([title])，后面加console.profileEnd()。
cmd键入console标签底部，从“>>>”开始。如果cmd键入有收获导出，那么它将显示在上面的对话框中。有一个详细的cmd输入API非常值得一看。内嵌console目标的Firebug有很多成功的方法可以使用，包括console.debug、console.info、console.warning、console.error等。如果该方法形成输入参数，Firebug将为您查询相应的代码提供连接。
另一种调整方法是设置断点。Script标志给了你暂停在位意行的机会。单击号码，设置中断点。右键号码可以选择中断点的前提条件。只有当条件真实时，程序才会停止执行。右边还有一个watch对话框，可以看看现阶段的自变量值。
十、AJAX
正如前面提到的，Firebug可以捕获界面的动态内容和其他DOM转换。如果你打开这个例子文档，点击页面中的连接，在浏览器中查看源代码，你会发现没有任何变化，源代码仍然包含那个连接。但如果您在Firebug中查看源码，您会发现DOM已经发生了变化，”Hello World“已经包括在内。这是Firebug的核心功能之一，没有他，AJAX的请求和回复是看不见的。有了这个，你会看到发送和收到的文本已经对应了头部信息内容。在Net标志中，我们还可以监控每个要求/回复的时间。
Net标志中的XHR功能对查询AJAX的实际操作特别有用。如果您在每个服务端回复前点击减号，您可以看到服务端回复的头部信息和具体内容。
当Firebug根据XMLHtprequest目标向服务器发出请求时，Firebug将记录请求POST或GET的具体内容，以及回复的头部信息和具体内容。这部分内容可以通过应用Net标志中的XHR来看到。他将列出所有服务器的回复及其时间。点击前面的 如果是GET要求，则显示三个标志；如果是POST要求，则显示四个标志：
Params: 显示要求URL中涉及的name/value对。
Headers: 显示要求和回复的头部信息内容。
Response: 显示服务器收到的具体信息内容。
Post：显示从POST要求发送到云服务器的信息内容。(不包括GET要求。）
这四个标志对写作和编译程序非常有用。检查POST和Params标识，明确您的请求已准确发出。检查Response标识，查询回格式，并明确如何编写相应的Javascript处理函数公式。