- 浏览: 337921 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
zuoguoyao:
版主,有没有 ext数据互动的。。教程
Ext2.0教程一:Ext介绍以及 ext页面布局 -
NineInchNails:
谢谢分享:D
Ext2.0教程一:Ext介绍以及 ext页面布局 -
风雨故都:
liuming
ext 多文件上传控件 Ext.ux.UploadDialog 使用中的问题 -
yanjiarui:
下必须能下,就是卡了点
oracle11g下载Oracle 10g下载 Oracle 9i 下载 -
coolbaby1984514:
public int findMonkey(int n, in ...
约瑟夫问题 java
<o:p> </o:p>
<!---->1、 <!---->安装
Firebug是与Firefox集成的,所以我们首先要安装的事Firefox浏览器。安装好浏览器后,打开浏览器,选择菜单栏上的“工具”菜单,选择“附加软件”,在弹出窗口中点击右下角的“获取扩展”链接。在打开的页面的search输入框中输入“firebug”。等搜索结果出来后点击Firbug链接(图1-1红色圈住部分)进入Firebug的下载安装页面。
<o:p> </o:p>
<!----><!----><!----> |
图1-1 |
<o:p> </o:p>
在页面中点击Install Now(图1-2)按钮。
<o:p> </o:p>
<!----><!----><!----> |
图1-2 |
<o:p> </o:p>
在弹出窗口(图1-3)中等待3秒后单击“立即安装”按钮。
<o:p> </o:p>
<!----><!----><!----> |
图1-3 |
<o:p> </o:p>
等待安装完成后会单击窗口(图1-4)中的“重启 Firefox”按钮重新启动Firefox。
<o:p> </o:p>
<!----><!----><!----> |
图1-4 |
<o:p> </o:p>
当Firefox重启完后我们可以在状态栏最右边发现一个灰色圆形图标(<!----><!----><!---->),这就表示Firebug已经安装好了。灰色图标表示Firebug未开启对当前网站的编辑、调试和监测功能。而绿色(<!----><!----><!---->)则表示Firebug已开启对当前网站进行编辑、调试和监测的功能。而红色图标(<!----><!----><!---->)表示已开启对当前网站进行编辑、调试和监测的功能,而且检查到当前页面有错误,当前图标表示有5个错误。
<o:p> </o:p>
<!---->2、 <!---->开启或关闭Firebug
单击Firebug的图标或者按F12键你会发现页面窗口被分成了两部分,上半部分是浏览的页面,下半部分则是Firebug的控制窗口(图2-1)。如果你不喜欢这样,可以按CTRL+F12或在前面操作后单击右上角的上箭头按钮,弹出一个新窗口作为Firebug的控制窗口。
<o:p> </o:p>
<!----><!----><!----> |
图2-1 |
<o:p> </o:p>
从图2-1中我们可以看到,因为我们开启Firebug的编辑、调试和监测功能,所以目前只有两个可以选择的链接:“Enable Firebug”与“Enable Firebug for this web site”。如果你想对所有的网站进行编辑、调试和检测,你可以点击“Enable Firebug”开启Firebug,则以后无论浏览任何网站,Firebug都处于活动状态,随时可以进行编辑、调试和检测。不过一般的习惯我们只是对自己开发的网站进行编辑、调试和检测,所以我们只单击“Enable Firebug for this web site”开启Firebug就行了。
开启Firebug窗口(图2-2)后,我们可以看到窗口主要有两个区域,一个是功能区,一个是信息区。选择功能区第二行的不同标签,信息区的显示会有不同,Options的选项也会不同,搜索框的搜索方式也会不同。
<o:p> </o:p>
<!----><!----><!----> |
图2-2 |
<o:p> </o:p>
要关闭Firebug控制窗口单击功能区最右边的关闭图标或按F12键就行了。如果要关闭Firebug的编辑、调试和监测功能,则需要单击功能区最左边的臭虫图标,打开主菜单,选择“Disable Firebug”或“Disable Firebug for xxxxx”。
<o:p> </o:p>
<!---->3、 <!---->Firebug主菜单
<o:p> </o:p>
单击功能区最左边的臭虫图标可打开主菜单(图3-1),其主要功能描述请看表1。
<o:p> </o:p>
<!----><!----><!----> |
图3-1 |
<o:p> </o:p>
菜单选项 |
说明 |
Disable Firebug |
关闭/开启Firebug对所有网页的编辑、调试和检测功能 |
Disable Firebug for xxxxx |
关闭/开启Firebug对xxxxx网站的编辑、调试和检测功能 |
Allowed Sites |
设置允许编辑、调试和检测的网站 |
Text Size:Increase text size |
增大信息区域显示文本的字号 |
Text Size:Decrease text size |
减少信息区域显示文本的字号 |
Text Size:Normal text size |
信息区域以正常字体显示 |
Options:Always Open in New Window |
设置Firebug控制窗口永远在新窗口打开 |
Show Preview tooltips |
设置是否显示预览提示。 |
Shade Box Model |
当前查看状态为HTML,鼠标在HTML element标签上移动时,页面会相应在当前标签显示位置显示一个边框表示该标签范围。这个选项的作用是设置是否用不同颜色背景表示标签范围。 |
Firebug Website.. |
打开Firebug主页。 |
Documentation.. |
打开Firebug文档页。 |
Discussion Group |
打开Firebug讨论组。 |
Contribute |
打开捐助Firebug 页面。 |
表1 |
<o:p> </o:p>
<!---->4、 <!---->控制台(Console)
单击功能区第二栏的“Console”标签可切换到控制台(图4-1)。控制台的作用是显示各种错误信息(可在Options里定义),显示脚本代码中内嵌的控制台调试信息,通过命令行对脚本进行调试,通过单击Profile对脚本进行性能测试。 控制台分两个区域,一个是信息区,一个是命令行,通过Options菜单的“Larger Command Line”可改变命令行位置。
<o:p> </o:p>
<!----><!----><!----> |
图4-1 |
<o:p> </o:p>
Options菜单的选项请看表2。
<o:p> </o:p>
菜单选项 |
说明 |
Show JavaScript Errors | 显示脚本错误。 |
Show JavaScript Warnings |
显示脚本警告。 |
Show CSS Errors |
显示CSS错误。 |
Show XML Errors |
显示XML错误。 |
Show XMLHttpRequests |
显示XMLHttpRequests。 |
Larger Command Line |
将命令行显示从控制窗口底部移动右边,扩大输入区域。 |
表2 |
<o:p> </o:p>
单击“Clear”按钮可清除控制台的控制信息。
<o:p> </o:p>
<!---->5、 <!---->页面源代码查看功能
单击功能区第二栏的“HTML”标签可切换到源代码查看功能(图5-1)。虽然Firefox也提供了查看页面源代码的功能,但它显示的只是页面文件本身的源代码,通过脚本输出的HTML源码是看不到。而Firebug则是所见即所得,是最终的源代码。
<o:p> </o:p>
<!----><!----><!----> |
图5-1 |
<o:p> </o:p>
我们来看一个例子,文件源代码如下:
<o:p> </o:p>
<!DOCTYPE HTML PUBLIC "-//W<st1:chmetcnv tcsc="0" hasspace="False" sourcevalue="3" negative="False" numbertype="1" w:st="on" unitname="C">3C</st1:chmetcnv>//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>简单的例子</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> #div1{background:red;width:100px;height:100px;} #div2{background:blue;width:100px;height:100px;margin:10px;padding:10px;border:5px solid black;color:white;} #div3{background:yellow;width:50px;height:50px;margin-left:25px;} </style> </head> <body scroll="no"> <div id="div1">方块一</div> <div id="div2">方块二</div> <script> document.getElementById('div1').innerHTML+='<div id="div3">方块三</div>'; </script> </body> </html> |
在例子中我们通过JavaScript在“div1”中加入了“div3”,在Firefox中查看源代码你是看不到“div1”中包含有代码“<div id="div3">
方块三</div>
”的,但是Firebug中我们是可以看见的(图5-2选中部分)。
<o:p> </o:p>
<!----><!----><!----> |
图5-2 |
<o:p> </o:p>
从图5-1中我们可以看到,信息区被分成了两个部分,左边是显示源代码,右边是一个功能区,可以从这里查看到HTML Element中的CSS定义、布局情况和DOM结构。
从图5-2中我们可以看到,源代码按DOM结构分层次显示的,通过层次折叠功能,我们就可以很方便分析代码。在功能区的第一行还根据你的选择,清晰的按子、父、根列出了当前源代码的层次(图5-2红色部分),单击各部分,则会即刻转到该部分的源代码。
<o:p> </o:p>
<!----><!----><!----> |
图5-3 |
<o:p> </o:p>
在源代码上移动鼠标,页面就会出现一个半透明的方块,指示当前鼠标所指源代码的显示区域,当选择。在图5-4中,鼠标正指向“div1”,而在页面中“div1”的显示区域上被一个半透明的方块遮盖了。
<!----><!----><!----> |
图5-4 |
如果你把“Inspect”按钮按下,功能正好相反,在页面中移动鼠标,则当前显示区域的源代码会被加亮显示出来。在图5-5中,我们可以看到鼠标指针正指向“方块二”,而在源代码中可以看到,“方块二”的源代码“<div id="div2">
方块二</div>
”已被加亮显示(红色部分)。如果你单击某个显示区域,则该区域的源代码会被选中。
<o:p> </o:p>
<!----><!----><!----> |
图5-5 |
是不是很方便?方便是方便,但是我的源代码很多,而且有些区域在页面中不方便鼠标指定,怎么办?没关系,我们还有一个厉害武器,搜索功能。譬如我们知道某个HTML Element的ID是“div2”,但在层层叠叠的源代码中不好找,在页面中鼠标也很难找到,那我们就在功能区的搜索框中输入“div2”,再看看源代码区域,“div2”被加亮显示出来了(图5-6红色部分)。在这个简单的例子可能看不出很好的效果,大家可以尝试一下把“div1”先折叠起来,然后在搜索框输入“div3”,你可以看到“div1”会自动展开,并将“div3”加亮显示,如果还觉得不够理想,可以找一个源代码比较多的例子测试一下。
<!----><!----><!----> |
图5-6 |
<o:p> </o:p>
除了通过按下“Inspect”按钮,单击显示区域选择源代码,我们还可以通过单击源代码中的HTML标记(开始或结束标记都可以)来选择。我们尝试一下把鼠标移动到HTML标记,会发现鼠标指针变成了手的形状,这说明我们可以通过单击选择该源代码。选择源代码后,我们就可以通过右边的功能区查看、编辑和调试它的CSS定义和盒子模型(CSS盒子模型请参阅相关说明,这里就不再赘述了),还有一个很好的功能就是当外部编辑器修改了源代码(没有删除该源代码,只是修改),我们在浏览器重新加载页面后,选择的源代码不会改变,我们可以很方便的观察源代码的变化与效果。
有没有经常为调试某个页面效果在源代码编辑器和浏览器之间切换,一次又一次的刷新而感到懊恼?有了Firebug你就不用再懊恼了。你可以直接在源代码中进行编辑,然后查看效果。如果只是修改已经存在的属性,例如要修改“div2”的内部文本,则直接将鼠标移动到文本上面,等鼠标指针换成“I”,单击即可进行编辑了。其它已存在的属性和属性值也可以这样直接进行编辑。如果要为某Element添加属性,请将鼠标移动到该Element上,等光标变为“I”的时候,单击鼠标右键,从菜单中选择“New Attribute..”,在显示的编辑框中输入你要添加的属性名称就可以了。
<!----><!----><!----> |
发表评论
-
Ext FormPanel submit 提交与Ext.Ajax.request提交的区别 深究
2008-12-12 12:36 1407前置: 后台成功返回字符串:{success:true, ... -
ext 多文件上传控件 Ext.ux.UploadDialog 使用中的问题
2008-12-17 17:07 5484Ext.ux.UploadDialog 像ext一样展现给用户 ... -
Ext2.0教程一:Ext介绍以及 ext页面布局
2008-08-27 09:18 5863学习ext有一段时间了,也开发了几个项目,抽点时间做个总结 ... -
Ext2.0教程三:Ext2.0从新建窗口开始
2008-08-28 10:45 1783--wayfoon 开发中,通常需要新建窗口,比如登陆 ... -
Ext2.0教程下载_ppt版
2008-09-11 23:35 2931下载地址:http://download.csdn.ne ... -
Ext2.0:Ext登陆窗口代码
2008-07-10 10:04 3790Ext登陆窗口代码,关键 ... -
Ext2.0:Json 介绍以及与xml的区别
2008-07-10 12:36 1316wayfoon: 学习ext 必须要 ... -
Ext中的get、getDom、getCmp、getBody、getDoc的区别
2008-07-11 11:20 3915Ext中包含了几个以get开头的方法,这些方法可以用来得到文档 ... -
Ext.data.Store介绍
2008-07-11 12:06 5533store是一个为Ext器件提供record对象的存储容器,行 ... -
EXT2.0: GridPanel 分页方法绝好例子
2008-07-15 11:17 6531EXT2.0: GridPanel 分页方法绝好例子 将代码保 ... -
Ext.form.ComboBox 属性详解及使用方法介绍和级联使用
2008-07-18 11:22 27068Ext.form.ComboBox 属性详解(见注释)及使用方 ... -
EXT:按条件查询再分页
2008-07-23 15:12 2804问题描述:使用ext 中的分页控件 Ext.grid.Gri ... -
Ext2.0:ext2.0 Alpha 1 版本的bug问题
2008-08-07 10:50 1600ext2.0 Alpha 1 版本 版本 ... -
Ext2.2:ext最新版2.2发布
2008-08-07 14:23 9264Ext2.2正式发布了,刚下载体验了下。 在ext官方网上下 ...
相关推荐
Javascript的调试利器:Firebug使用详解
这篇文档将详细介绍Firebug的使用方法及其在JavaScript调试中的关键功能。 一、Firebug安装与启动 Firebug是一款Firefox浏览器的扩展插件,用户可以通过Firefox的Add-ons Manager(附加组件管理器)进行安装。在...
Firebug 使用详解 Firebug 是一款功能强大的 web 开发工具,由 Joe Hewitt 开发,能够实时编辑、调试和监测任何页面的 CSS、HTML 和 JavaScript。下面将对 Firebug 的使用进行详细介绍。 一、安装 Firebug ...
### Firebug:JavaScript调试详解 #### 一、Firebug简介 Firebug是一款强大的网页调试工具,主要用于Firefox浏览器,虽然现在支持更多浏览器版本,但最初它专门为Firefox设计。它集成了多个功能模块,包括HTML检查...
3. JavaScript调试:Firebug内置了JavaScript控制台,能够设置断点、查看变量值、跟踪调用栈等,帮助开发者定位和修复JavaScript错误。 4. 网络监控:Firebug的Net面板可以监控所有的HTTP/HTTPS请求,包括请求时间...
Javascript的调试利器:Firebug使用详解 分类: JavaScript2007-09-02 13:2086686人阅读评论(75)收藏举报 Javascript的调试,是开发Web应用尤其是AJAX应用很重要的一环,目前对Javascript进行调试的工具很多,我...
1. JavaScript调试:Firebug提供了详细的JavaScript调试功能,包括断点设置、单步执行、查看变量值、调用堆栈跟踪、性能分析等。这使得开发者能够精确地定位和修复JavaScript代码中的错误,优化脚本性能。 2. HTML...
《Firefox火狐浏览器JavaScript调试工具Firebug 2.0.19详解》 在Web开发过程中,调试JavaScript代码是一项至关重要的任务。Firebug,作为Firefox火狐浏览器的原生插件,曾是开发者们最得力的助手之一,特别是在...
Firebug是一款经典的Web开发工具,尤其在JavaScript调试领域有着广泛的应用。它曾是Firefox浏览器的一个扩展,允许开发者实时查看和编辑HTML、CSS、JavaScript,并且能够分析网络请求,监控页面性能,极大地提升了...
**Firebug控制台详解** Firebug是一款非常强大的Web开发和调试工具,尤其在JavaScript的调试方面,它提供了直观且高效的功能。Firebug是Firefox浏览器的一个扩展插件,它允许开发者实时查看、修改和分析HTML、CSS、...
【Firebug使用详解】 Firebug是一款专为JavaScript开发者设计的强大Web开发工具,它与Firefox浏览器无缝集成,提供了实时编辑、调试和监测HTML、CSS以及JavaScript的能力。本文将为初学者介绍Firebug的基本功能和...
在JavaScript开发中,调试是必不可少的一个环节,而Firebug作为一款强大的JavaScript调试工具,提供了丰富的功能来帮助开发者定位和解决问题。本文将详细介绍如何使用Firebug中的`console`对象进行调试,以及一些...
Firebug是一款强大的Web开发工具,尤其对于JavaScript...虽然随着浏览器内置开发者工具的发展,Firebug的地位有所削弱,但其在JavaScript调试和网页分析领域的深度和实用性,依然让它在很多情况下是开发者首选的工具。
3. JavaScript调试:Firebug的JavaScript控制台提供了断点设置、单步执行、变量查看等功能,使得代码调试变得简单易行。开发者可以清晰地追踪代码执行过程,找出逻辑错误或性能瓶颈。 4. 网络监控:Firebug能够记录...
3. 安装与使用: 在Firefox中安装Firebug通常有两种方式:通过Firefox的“附加组件”(Add-ons)市场搜索并安装,或者直接导入“firebug和Firefox.rar”中的扩展文件。安装后,会在浏览器右上角出现Firebug图标,...