这篇指南总共分为五大部分:
·第一部分:firebug概览:简要介绍firebug的一些基本特征,如何安装以及一些注意点。
·第二部分:logging,trace和commandline(这里译为命令行,以后提到的命令行即为commandline):这些都是和控制台有关的。在这部分我们将对命令行窗口进行详细的介绍(命令行窗口类似于Visual Studio的立即窗口(Immediate windows)和监视窗口(Watch window))。
·第三部分:HTML,dom的查看和HTML的CRUD操作:这部分将告诉我们什么叫HTML视察,怎么样去HTML视察,HTML视察为什么很有用。我还将向您展示如果在HTML标签中进行HTML,dom的CRUD操作。
·第四部分:用firebug对javascript进行调试:这部分将会覆盖所有关利用firebug对javascript进行调试的知识。这也是firebug对引人关注的地方,同时我还会告诉你们如果结合控制台标签进行javascript的调试。
·第五部分:CSS,DOM和网络标签:详细讲述一些CSS,DOM和网络标签方面的内容。
正如上面所说,我会尝试尽可能的覆盖所有有关firebug方面的东西,如果我有什么遗漏,请积极留言告诉我,万分感谢.
Firebug概览
注意:我将会讲述一些有关firebug的基本常识,包括它的基本功能,如何安装等。如果您已经对firebug有一定的了解,可以跳过本部分的内容。
Firebug是什么?
firebug是现在非常流行的一个在Mozilla Firefox浏览器中的扩展插件,这个插件能使我们的web开发变得更加轻松和简单。它包括了许多非常有用的功能,比如调试,HTML视察等等。
Firebug的功能列表:
·javascript调式
·javascript命令行
·监视javascript的工作情况和xmlhttprequest。
·Logging
·Tracing
·HTML视察和编辑HTML
·编辑CSS
如何得到Firebug?
·首先进入下载网址(请用firefox浏览器打开):https://addons.mozilla.org/zh-CN/firefox/search?q=firebug&cat=all (请确保之前已经安装了最新版的firefox浏览器)
·在官方网站的右边有一张和下图一样的图片,点击便可进行安装。
·点击图标后将会弹出下图所示的对话框,点击“立即安装”按钮。
·安装完成后,我们还需要重新启动一下firefox浏览器。
主菜单(在工具菜单栏下)
在firefox浏览器的“工具”菜单栏下将会出现“firebug”和“错误控制台”菜单项。
·Firebug:这是firebug所有子菜单的父菜单。
·错误控制台:如果你点击这个菜单项,将会弹出一个控制台窗口,该窗口中纪录了所有在运行过程的错误,警告,消息等信息.
firebug菜单:
如果你继续点击firebug菜单项,将会弹出他的子菜单,如下图:
打开Firebug:在浏览器中打开firebug,你也可以按“F12”打开它。
在新窗口中打开Firebug:在新窗口中打开Firebug。
打开编辑器:添加各种编辑器。
查看元素:可以查看网页中的各种html元素,并定位到该元素在html代码中的位置。此功能是firebug的亮点之一,具体将在第三部分介绍。
javascript概况:此功能非常有用,它可以总结出打开一个网页的过程中,所有该网页中包含的javascript函数的执行时间,调用次数等许多有用的信息,具体使用方法将在以后章节中讲述。
清除控制台:清除控制台中的所有信息。
命令行:将焦点定位到命令行输入框中。
搜索:将焦点定位到firebug的搜索输入框中。
Firebug控制台
firebug控制台如下图所示:
firebug包含了六个标签:控制台,html,css,脚本,dom,网络。
·控制台标签:用来显示各种日志信息,同时可以结合firebug给定的API进行各种测试和跟踪。
·html标签:可以用来视察,编辑网页中的各种html元素。
·css标签:可以用来检查网页中和CSS有关的内容。
·脚本标签:可以设置断点调试javascript代码,也可以用来监控javascript代码。
·dom标签:展示dom树。(我觉得html标签可以代替此标签的功能)、
·网络标签:可以观查从服务器端下载下来的js文件,图片,flash等资源的大小,下载所花费的时间等,这也是一个非常有用的功能。
状态栏
如果有错误,你将会在状态栏中红色的叉叉,并提示错误的个数。
问题?
如果您还有什么问题不是很明白,可以在我的博客上留言,我们可以一起讨论研究