[计算机]如何使用firebug进行调试.doc
《[计算机]如何使用firebug进行调试.doc》由会员分享,可在线阅读,更多相关《[计算机]如何使用firebug进行调试.doc(3页珍藏版)》请在三一文库上搜索。
1、如何使用firebug进行调试 2009-06-05 18:34 不了解的同学先“点这里”看看什么是Firebug。简单来说,Firebug是Firefox上用来监视、编辑和调试站点的CSS、HTML、DOM和JavaScript的扩展工具。 我们先到Firebug的主页上下载最新的版本装上,下面开始调试: 1、查看、编辑HTML元素及其CSS 安装好Firebug之后,你可以通过点击浏览器右下方的小虫子打开Firebug,如图: 打开Firebug 或者直接按F12,如果要以窗口形式打开的话,就按下CTRL+F12 打开Firebug之后,点击“查看”,然后选择页面上任何需要编辑的地方,Fi
2、rebug会将其选中,并且在HTML结构中将其高亮,如图: Firebug的查看按钮 之后你可以对该元素的HTML结构、属性进行任意的编辑,修改后的效果都会实时的展现在页面当中。 同时在Firebug的右侧是该元素对应的CSS样式,如下图: Firebug中元素的样式查看 图中的样式,显示了该元素被重新定义的样式继承关系,比如“继承自body.CurHome”的“text-align”属性被“继承自 div.shell”的“text-align”覆盖,原先的属性就会以中横线的形式表示出来。如果要查看所有的属性,请勾选图中标“1”的选项。 单击“2”可以禁用/打开某条CSS属性;单击任意一个属性
3、或者属性值可以进行CSS的编辑,如“3”;双击“4”则可以新建一条CSS属性。现在我们点击下“5”来看看CSS布局面板: Firebug中的CSS布局面板 上面这幅图展现的是一个HTML结构的标准盒模型,通过点击相应的数值可以修改该值,同时在浏览器窗口中显示出对应的效果来。 2、查看动态生成的HTML代码的方法 通过“查看源代码”的方法,无法看到由JS动态生成的HTML结构,这里我们可以通过Firebug来查看,如下图,选中“body”节点,按下“编辑”,即可输出页面上源文件的代码以及动态生成的代码。 查看所有动态生成源代码 还有另外一种简单的方法,选中你要查看的页面元素,然后在右键菜单中选择
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 计算机 如何 使用 firebug 进行 调试
链接地址:https://www.31doc.com/p-1990925.html