php可视化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)。

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

Js代码