firebug使用说明合集.docVIP

firebug使用 (1) 1 firebug使用 (2) 7 Javascript的调试利器：Firebug使用详解 13 FireBug使用指南 46 什么是Firebug 47 应用 48 Console 控制台 49 查看和修改HTML 51 CSS调试 53 可视化的CSS尺标 55 网络状况监视器 56 Javascript调试器 58 DOM查看器 59 小结 60 附 61 在浏览器中调试web页面（一）：调试工具介绍 61 firebug使用 (1) 2011-07-12 15:44 作者：Estelle Weyl 　　原文网址：/blog/2007/06/introduction-to-firebug/ 　　译者：阮一峰 　　本文是Firebug的一个概览，并不对它的所有特性进行详尽解释。不过，本文的内容对一个新手来说，应该是足够了。 　　目录 　　一、安装Firebug 　　二、打开和关闭Firebug 　　三、Firebug窗口概览 　　四、随时编辑页面 　　五、用Firebug处理CSS 　　六、盒状模型 　　七、评估下载速度 　　八、DOM 　　九、Javascript调试 　　十、AJAX 　　十一、附注 　　一、安装Firebug 　　Firebug在Firefox浏览器中运行。另外有一个Firebug lite版本，可以通过javascript调用，包含在页面中，从而在其他非Firefox浏览器中使用。本文不涉及这个版本。 　　安装Firebug，请访问Firebug下载页面。点击该页面右边栏中部巨大的橙黄色按钮即可。你也可以在Mozilla的FireFox Add-ons站点下载它。安装后只要重新启动FireFox，就可以使用了。 　　如果你已经安装过了，那么请检查是否更新到了最新版本。打开Firefox的“Tools”菜单，选择“Add-ons”命令，然后在弹出窗口中点击左下角的“Find Updates”按钮。 　　二、打开和关闭Firebug 　　在Firebug网站上，可以找到它的快捷键设置。我最常使用以下三种方法： 　　* 打开Firebug：按F12，或者点击浏览器状态栏右边的绿色标志。 * 关闭Firebug：按F12，或者点击浏览器状态栏右边的绿色标志，或者点击Firebug窗口右上角的红色关闭标志。 　　* 在单独窗口中打开Firebug：点击firebug窗口右上角的红色箭头标识，或者使用Ctrl+F12/?+F12按钮。 　　Firebug的相关设置： 　　* 固定Firebug在新窗口打开：先打开firebug，点击左上角的bug标志，选择options菜单中的“Always Open in New Window”设置。 　　* 增加/缩小字体大小：先打开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”命令，然后再选择页面中的文本节点，你可以对其进行修改，修改结果会