《Firefox最牛的插件-Firebug使用详解.pdf》由会员分享，可在线阅读，更多相关《Firefox最牛的插件-Firebug使用详解.pdf（36页珍藏版）》请在金锄头文库上搜索。
1、CJTPRASFirefox最牛的插件Firebug使用详解1/36Firefox最牛的插件最牛的插件Firebug使用详解使用详解CJTPRASFirefox最牛的插件Firebug使用详解2/36索引索引1.开始开始.32.安装入门安装入门.33.应用应用.104.页面源代码查看页面源代码查看.115.查看查看/测试页面的函数执行效率测试页面的函数执行效率.116.使用使用Firebug查看查看XMLHttpRequest.137.查看页面上所有的查看页面上所有的CSS与与JS.148.修改页面源代码修改页面源代码.159.CSS调试调试.1610.网络状况监视器网络状况监视器.1911.
2、查看页面上所有的资源列表查看页面上所有的资源列表.2012.DOM查看器查看器.2013.控制台详解控制台详解.2114.控制台记录日志控制台记录日志.2515.使用使用Firecookie调试页面调试页面cookie.2716.调试调试javascript.2817.调试调试ajax.35CJTPRASFirefox最牛的插件Firebug使用详解3/361.开始开始对于网络开发的朋友来说，功能都可以实现，可是调试HTML代码的时候，那叫一个头疼，不过现在不用愁了，Firefox有一款非常牛的插件：Firebug。这还是很早以前一个外国朋友告诉我的，现在估计大多数的网路开发者都已经在用这个插
3、件，不过我想大家用的时候也这是看看会有什么错误，或者使用“Inspect”功能来看出错的代码在什么地方，可是光用这些功能真是太小看Firebug了，它除了查找代码，还可以调试代码，尤其是AJAX用到的就更多了，下面言归正传，首先安装Firebug。2.安装入门安装入门Firebug是与Firefox集成的，所以我们首先要安装的事Firefox浏览器。安装好浏览器后，打开浏览器，选择菜单栏上的“工具”菜单，选择“附加软件”，在弹出窗口中点击右下角的“获取扩展”链接。在打开的页面的search输入框中输入“firebug”。等搜索结果出来后点击Firbug链接（图1-1红色圈住部分）进入Fireb
4、ug的下载安装页面。CJTPRASFirefox最牛的插件Firebug使用详解4/36图1-1在页面中点击InstallNow（图1-2）按钮。图1-2在弹出窗口（图1-3）中等待3秒后单击“立即安装”按钮。图1-3等待安装完成后会单击窗口（图1-4）中的“重启Firefox”按钮重新启动Firefox。CJTPRASFirefox最牛的插件Firebug使用详解5/36图1-4当Firefox重启完后我们可以在状态栏最右边发现一个灰色圆形图标（），这就表示Firebug已经安装好了。灰色图标表示Firebug未开启对当前网站的编辑、调试和监测功能。而绿色（）则表示Firebug已开启对当前
5、网站进行编辑、调试和监测的功能。而红色图标（）表示已开启对当前网站进行编辑、调试和监测的功能，而且检查到当前页面有错误，当前图标表示有5个错误。?开启或关闭Firebug单击Firebug的图标或者按F12键你会发现页面窗口被分成了两部分，上半部分是浏览的页面，下半部分则是Firebug的控制窗口（图2-1）。如果你不喜欢这样，可以按CTRL+F12或在前面操作后单击右上角的上箭头按钮，弹出一个新窗口作为Firebug的控制窗口。CJTPRASFirefox最牛的插件Firebug使用详解6/36图2-1从图2-1中我们可以看到，因为我们开启Firebug的编辑、调试和监测功能，所以目前只有两
6、个可以选择的链接：“EnableFirebug”与“EnableFirebugforthiswebsite”。如果你想对所有的网站进行编辑、调试和检测，你可以点击“EnableFirebug”开启Firebug，则以后无论浏览任何网站，Firebug都处于活动状态，随时可以进行编辑、调试和检测。不过一般的习惯我们只是对自己开发的网站进行编辑、调试和检测，所以我们只单击“EnableFirebugforthiswebsite”开启Firebug就行了。开启Firebug窗口（图2-2）后，我们可以看到窗口主要有两个区域，一个是功能区，一个是信息区。选择功能区第二行的不同标签，信息区的显示会有不同
7、，Options的选项也会不同，搜索框的搜索方式也会不同。图2-2CJTPRASFirefox最牛的插件Firebug使用详解7/36要关闭Firebug控制窗口单击功能区最右边的关闭图标或按F12键就行了。如果要关闭Firebug的编辑、调试和监测功能，则需要单击功能区最左边的臭虫图标，打开主菜单，选择“DisableFirebug”或“DisableFirebugforxxxxx”。?Firebug主菜单单击功能区最左边的臭虫图标可打开主菜单（图3-1），其主要功能描述请看表1。图3-1菜单选项说明DisableFirebug关闭/开启Firebug对所有网页的编辑、调试和检测功能Disa
8、bleFirebugforxxxxx关闭/开启Firebug对xxxxx网站的编辑、调试和检测功能CJTPRASFirefox最牛的插件Firebug使用详解8/36AllowedSites设置允许编辑、调试和检测的网站TextSize：Increasetextsize增大信息区域显示文本的字号TextSize：Decreasetextsize减少信息区域显示文本的字号TextSize：Normaltextsize信息区域以正常字体显示Options：AlwaysOpeninNewWindow设置Firebug控制窗口永远在新窗口打开ShowPreviewtooltips设置是否显示预览提示。
9、ShadeBoxModel当前查看状态为HTML，鼠标在HTMLelement标签上移动时，页面会相应在当前标签显示位置显示一个边框表示该标签范围。这个选项的作用是设置是否用不同颜色背景表示标签范围。FirebugWebsite.打开Firebug主页。Documentation.打开Firebug文档页。DiscussionGroup打开Firebug讨论组。Contribute打开捐助Firebug页面。CJTPRASFirefox最牛的插件Firebug使用详解9/36表1?控制台（Console）单击功能区第二栏的“Console”标签可切换到控制台（图4-1）。控制台的作用是显示各种错误信息（可在Options里定义），显示脚本代码中内嵌的控制台调试信息，通过命令行对脚本进行调试，通过单击Profile对脚本进行性能测试。控制台分两个区域，一个是信息区，一个是命令行，通过Options菜单的“LargerCommandLine”可改变命令行位置。图4-1Options菜单的选项请看表2。菜单选项说明ShowJavaScriptErrors显示脚本错误。S
