Firebug带来的惊喜

Firebug带来的惊喜
惊喜是因人而异的：如果某个事务对甲来说很新奇，那么甲就会觉得新奇，但是对于已经很熟悉该事物的乙来说就未必新奇了。乙可能会觉得甲大惊小怪，甚至觉得甲无知。对于下面谈论的东西，我就是那个甲，可能有很多看客已经是乙了。下面随便说说。
Ajax这个东西现在很火，对于它比较了解的人都会知道要写出好的代码肯定少不了好的开发环境（VS2005，Eclipse）以及好的调试环境（像VS2005）。Firebug就是一款针对FireFox浏览器的网页开发调试工具。我也不是太了解，但是稍微试用就给我很大的惊喜。本文章是我一时兴奋写的，并没有太多参考资料，描述的是个人的试用体会，所以可能存在很多问题。
首先是安装，这个很简单，它可以作为FireFox的一个扩展，所以只要上FireFox的官方网站搜索一下，找到之后就可以在线安装。安装之后，打开一个网页，然后通过快捷键F12来启动/关闭。当然可以在菜单栏“工具”中选择“Firebug->Open Firebug”。

举例说网页的代码如下：




<script>...






function format(formatStr)...{






for(var i = 1; i < arguments.length; i++)...{




formatStr = formatStr.replace("{" + (i-1) + "}", arguments[i]);




}




return formatStr;




}




var str = ' ({"name":"llmlx", "age":24})';




var people = eval(str);




alert(people.name);




</script>




<button>test</button>



浏览器的下半部分就是Firebug。“小虫子”旁边提供的是三个功能按钮。其中Inspect应该是最给人惊喜的吧。下面的快捷栏提供了6种不同的视图。下面大概介绍一下主要的功能：
Console: 命令行控制台。注意在Firefox的状态栏上方有一栏，这一栏有一个”>>>”命令提示符。在这里可以输入各种javascript代码。如调用页面的format函数




format(“value=...{0}”, 1)

这样再Console界面中就红色显示了返回值”value=1”。在输入命令

document.getElementsByTagName("button")

会返回页面的button元素。这里的Console控制台同样可以用向上/向下方向键获取上/下一个已经输入的命令。如果输入一个页面中不存在的函数，则会返回错误。如
log(1)
界面如下所示：



点击“Clear”按钮则会清楚控制台中的输出。
HTML：显示整个页面格式化的HTML代码。



如果有下角选择“Layout”，那么右下角会显示button的布局，页面上则显示网格。这个对于理解盒式布局太有好处了，当然更加利于开发了。选中”DOM”则会显示整个页面的DOM结构。
双击源代码中的button标签，会切换到编辑状态。我们为button增加onclick事件。如下所示：

<button onclick="alert(1)">test</button>

此时点击button按钮会弹出提示对话框。这个功能还是相当诱人吧，像动态的脚本语言了。后面还有更加令人惊喜的功能，继续。点击Edit可以回到源代码的界面，不过不知道为什么看不到button标签的源代码了。不过双击body标签就又可以切换到button的源代码了。
下面在button之前增加样式,代码如下：
正如前面提到的，用户的修改是实时显示在页面上的。所以当你再输入border的各个属性时，button的样式就逐渐变化的。最终的结果如下所示：

<style>

button{

border:1px solid red;

color : red;

font-size:20px;

margin:10px;

padding:10px;

}

</style>

<button onclick="alert(1)">test</button>



在Inspect的模式下，选中test按钮，这个时候Layout会显示按钮的布局结构。这时，点击Edit取消编辑状态，然后返回HTML源代码，从Layout切换到Style。这个时候在页面中选重test按钮，然后Edit按钮后面会显示“button<body<html”，这表示当前选中的是button标签。此时显示如下：



可以发现Style视图显示的是标签的样式。你还会发现在color属性的左边有一个表示禁止的灰色图标，点击它这个属性就会取消，此时button中的文字将会是默认的黑色。Color属性右边填充了红色的大红框则表示color属性的颜色，这是方便用户调整颜色了。双击color的属性值”red”，会显示编辑状态，用向上/向下方向键会调整颜色，至于什么顺序就没有研究了。
在下来我们看看Script选项，这个是提供脚本调试功能。切换到Script视图，单击代码左边的行号标识就可以增加断点，在单击则取消。我们在format的for循环语句加上断点。然后切换到Console界面下输入先前的命令这时就会自动调转到Script的调试界面，如下所示：

format(“value={0}”, 1)



可以看到firebug提供了几个箭头，表示调试中常用的几个命令。在Watch窗口中可以增加要查看的表达式。调试过程就同一般的开发环境类似了。
乱七八糟就讲了这些。还有那个Net界面好像也很强大，据说是用来察看页面中各种元素加载的时间或网络消耗。下面的内容是我从来初识Firebug 全文 — firebug的使用(http://www.ooso.net/index.php/archives/294)借来的。

网络状况监视器

也许有一天，你的老板或者客户找到你，抱怨你制作的网页速度奇慢，你该如何应对？你或许会说这可能是网络问题，或者是电脑配置问题，或者是程序太慢，或者直说是他们的人品问题？不管怎么说，最后你可能被要求去解决这个有多种可能的问题。

网络状况监视器能帮你解决这个棘手问题。Firebug的网络监视器同样是功能强大的，它能将页面中的CSS、javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来，也许在这里你能一把揪出拖慢了你的网页的元凶，进而对网页进行调优，最后老板满意客户欢喜，你的饭碗也因此而牢 固。

网络监视器还有一些其它细节功能，比如预览图片，查看每一个外部文件甚至是xmlHttpRequests请求的http头等等。



参考文章：

1、初识Firebug 全文 — firebug的使用 （http://www.ooso.net/index.php/archives/294）

2、Introduction to Firebug ( http://www.evotech.net/blog/2007/06/introduction-to-firebug/#fb_overview)