Firebug 是每个前端和开发必备的插件，这里就不多说了。这里介绍一下13个插件，另你的firebug更强大。
YSlow（Why slow？-为什么慢呢？）
YSlow是一款用来分析网页，并提出前端性能改进建议的Firefox插件。YSlow依据预定义或用户自定义的规则为网页评级。它同时提供了许多性能分析工具，如：Smush.it™ 、 JSLint。
与YSlow非常相似，Page Speed是google团队推出的一款用于评测网页性能的插件，尤其可以依据“网页性能最佳实践”对网页性能提出改进建议。
Page Speed可以自动优化图片，并提供压缩版本。它也可以侦测到那些实际并未用到的Javascript和css，以便优化它们。
Page Speed可是个1.3M的大插件，它还拥有许多优秀功能等你尝试。
在制作网页时，在页面上添加一个新的设计元素（例如一个图片或图标）之前，我们往往希望提前看到元素添加后页面的整体效果。Pixel Perfect就可以帮你实现这个想法，它允许开发者在网页上覆盖你要添加的设计元素。使用它时你可以调整要添加元素的透明度和位置。
我感觉这款插件也可用来做网页中元素的微调，以保证和最初设计蓝图一致，如它的名字，完美到一个像素都不差。
安装CodeBurner后，可以再firebug面板中看到参考面板用来查询html元素、html属性、css属性，就像一个字典一样。
当在Firebug中选中一个节点时，它也会提供一些相关的代码示例供你参考。
FireUnit提供了一个简单的API用来做简单的测试记录及单元测试。
在FirePHP的帮助下，你可以通过调用一个简单的PHP方法，在Firebug中记录日志。
数据是通过响应包头（Response Header）发送的，不会影响到网页内容。
FireRainbow 可以用来控制、修改Firebug中Script的语法高亮显示。
It adds a change monitor recording every change made, by Firebug and the website itself, to CSS and the DOM.
它能够记录通过Firebug或网站自身的CSS或DOM的每一次改动。
这个我装上后，也没看出firebug上多了什么，也不知该怎么用。希望知道的朋友留言说一声。
安装Jiffy Firefox Extension后会在Firebug中出现一个新面板，用来图形化显示Javascript的运行时间，并可打印出报表。
看主页说明，使用好像还有点麻烦。感兴趣的朋友自己看下。
Hammerhead可以帮助你计算网页的载入时间。（这个好像Firefox本身具备啊）
它支持多页面，并允许你清除磁盘或内存缓存后再进行载入时间测试。
Firecookie, 是一个嵌入在Firebug中的cookie浏览管理插件。
如果在Web开发中用到了cookie，使用它可以轻松的浏览cookie值、过期时间等，有助于快速开发。
使用它时需要在Firebug的网络面板中开启cookie监测。它可同时显示发送和接收的cookies。
通过CSS 或者 Xpath 来查找 elements。
LiveCoder是Firebug的一个扩展，用来查看Firefox Chrome。这对与那些Firefox插件开发者非常有用，它可以帮你检查、修改Firefox插件的Dom。
每个前端或者开发人员，当页面有改动的时候都需要去刷新浏览器来查看页面的改动。
XRefresh 当项目文件夹有更新的时候，会为你自动刷新浏览器。
他包含2部分，一个是作为浏览器的插件形式( Firefox & IE) firefox的话是基于firebug的，另一个是桌面程序 ( Windows & Mac)。
一个显示器显示起来可能不够明显，如果条件好，有2台显示，一个是IDE 一个是浏览器的话那么是很爽的。
首先严重的BS 百毒！我坚决以后不用它了，强烈抵制它！以后用yahoo，用有道，用soso，用什么都不用百毒了。
google真的太冤枉了…. 看见CCAV 和某些国内所谓顶尖大学的学生对你的报道，仿佛就像回到大跃进时期。这是google的悲哀，还是我们的悲哀… 哎~
什么是继承 inherit？
意思就是你在某个elements上添加了以下的css 属性，那么这个 elements 下面的所有子元素都会继承这个css属性。最典型的就是 color 这个属性。现在汇总一下，以后写css的时候，就可以更放心了。
/*常用*/ color:; text-indent:; text-align:; line-height:; list-style-type:; list-style-image:; list-style-position:; list-style:; cursor:; /*不常用*/ direction:; text-transform:; word-spacing:; white-space:; letter-spacing:; caption-side:; border-spacing:; empty-cells:; border-collapse:; speak-header:; page-break-inside:; page:; orphans:; widows:; volume:; speak:; azimuth:; quotes:;
Axure PR 是目前比较流行的 Web产品原型软件啦。今天无意看到一个涂鸦式的产品原型制作软件-Balsamiq Mockups。 这个软件是基于 adobe air 制作的。想试试的朋友，就要先装一下air了。
桌面版下载安装地址：http://www.balsamiq.com/products/mockups/desktop#download
其相关资源下载：http://www.mockupstogo.net/
注册码：
organization name:leexij@gmail.com
Serial Key:eNrzzU/OLi0odswsqslJTa3IzHJIz03MzNFLzs+tMTQyNrcwsTQyAIEa5xpDAIFxDy8=
Balsamiq Mockups 支持 桌面程序、网站、iphone、等各种软件产品原型的制作。
1.桌面程序
2. 网站web产品
3.ipone
4. RIA 产品
现在唯独IE6 这个死家伙不支持min-height 属性，平时在某些页面需要使用到的时候，就出现问题了。目前我想找了一个比较笨的方法实现： 因为IE6 容器的高度是根据容器内容多少而自动增长的。所以只要单独给ie6一个hack 就可以了。
<style type="text/css">
div{
border:1px #000 solid;
min-height:200px;
_height:200px; /*hack 4 ie6*/
}
</style>
<div>
test
</div>
<html>
<head>
<meta http-equiv=";Content-Type"; content="34;text/html; charset=utf-8" />
<title>基于dl dt dd 实现toggle 隐藏显示的方法</title>
<script type="text/javascript"; src="jquery-1.3.2.min.js";></script>
<style type="text/css">
.none{
display:none;
}
dl dt{cursor:pointer; font-weight:bold;}
</style>
</head>
<body>
<dl id="test">
<dt >栏目一</dt>
<dd>1.0</dd>
<dd>1.1</dd>
<dd>1.2</dd>
<dd>1.3</dd>
<dt>栏目二</dt>
<dd>2.1</dd>
<dd>2.3</dd>
<dd>2.3</dd>
</dl>
<script type="text/javascript">
$("#test dt").each(function(){
var dt = $(this);
//找到dt下的dd
var objList =new Array();
var tmpDD = dt.next();
while(tmpDD.attr("tagName")!=null && tmpDD.attr("tagName")!="DT")
{
objList.push(tmpDD);
tmpDD = tmpDD.next();
}
//alert(dt.html()+" 有:"+objList.length+"个dd");
dt.toggle(
function(){
$(objList).each(function(){
$(this).addClass("none");
});
},
function(){
$(objList).each(function(){
$(this).removeClass("none");
});
}
);
});