首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

在浏览器中调试web页面(1):调试工具介绍

2012-09-02 
在浏览器中调试web页面(一):调试工具介绍相信很多人都遇到过以下几个问题:为了调整页面某个元素的宽度或高

在浏览器中调试web页面(一):调试工具介绍

相信很多人都遇到过以下几个问题:

    为了调整页面某个元素的宽度或高度到最适合值,在ide中修改css或者html再刷新浏览器,重复上述修改步骤不下20次;为了修改html,先在ide修改后在刷新浏览器,重复上面步骤不下10次。
    为了得到javascript执行中的某个变量在javascript中调用很多次alert函数;为了监控mouse事件,创建一个div,通过javascript在div中写一些html;更多更多的问题...

如果你遇到过上面的问题,那么本文能帮你解决上述所有的问题,从而使你将更多的精力投入到其他工作中。

本文中分为3部分,第一部分:调试工具介绍,详细介绍了当前流行的各种浏览器的调试工具;第二部分:firebug的使用;第三部分:ie调试工具的使用。

?

如果需要解决上述问题,那么我们不得不介绍我们的主角firebug(主页)。firebug是火狐(firefox)浏览器的最为强大、使用最为广泛的一款开发插件。

firebug安装(firefox浏览器)

在firefox中打开https://addons.mozilla.org/zh-CN/firefox/addon/firebug/,当前最新版本为1.8.1,选择“添加到火狐”,安装完毕后需要重启下火狐浏览器。

?

firebuglite安装(非firefox浏览器)

firebug也可用在其他浏览器中(如:IE6+, Firefox, Opera, Safari and Chrome)。官方网址为:http://getfirebug.com/firebuglite。

使用非常简单,下载Firebug Lite 当前最新版本为1.3。在需要调试的页面的head中加入:

<script type="text/javascript" src="/local/path/to/firebug-lite.js"></script>
?

firebug启用及界面介绍

火狐中在页面任意地方,右键,在弹出的菜单中选择“查看元素”;或者在右下角附加工具栏中也能找到firebug的启动按钮。

在浏览器中调试web页面(1):调试工具介绍

火狐中firebug界面:

在浏览器中调试web页面(1):调试工具介绍

firebuglite在IE下的界面:

在浏览器中调试web页面(1):调试工具介绍

?

其他的调试工具:

Firefox, Opera, Safari 和Chrome 厂家都提供自家的web调试工具,和firebug界面及操作方式大同小异,这里不再做特别的说明。

IE也有自己的调试工具IEWebDeveloper,不过功能相对而言弱了很多,在ie6,7需要独立安装,而在ie8和ie9被整合经来,叫做“开发人员工具”。当页面被刷新后,需要人工手动的点击第4个按钮刷新。

在浏览器中调试web页面(1):调试工具介绍

1 楼 liuxingzhuriXSH 2011-09-08   问下,firebug-lite支持断点调试吗?我怎么用不了? 2 楼 gogo1217 2011-12-18   liuxingzhuriXSH 写道问下,firebug-lite支持断点调试吗?我怎么用不了?
貌似不支持。ie调试使用他自己的调试工具或者使用ie-test吧。

热点排行