不管你是JavaScript新手还是经验丰富的开发者，你所使用的工具直接影响你的工作效率。开放源代码运动使得拥有得力的工具不再意味着付一大笔钱；实际上你什么都不用付出。下面是一个对JavaScript开发者真正有实用价值的免费工具列表。
在我们写样式的时候，页面的CSS在经历几个版本的修改之后，可能有些样式已经用不到了，或许将某些样式更名了而原来的忘了删除，总之页面中可能存在着一些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗，也会增大我们的维护成本。那么有没有一些办法来清理那些无用的样式呢？今天就让我们来了解一下几个比较有用的工具。
Dust-Me selectors
Dust-Me是一个很有用也很好用的Firefox插件，它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。
支持本地和远程样式文件，包括使用link标签、< ?xml-stylesheet?>处理指令、@import语句等方式引入的样式文件；(但是不支持页面中的style块和内联样式)
支持IE条件注释中引入的样式文件；
可以检查一个页面，也可以检查整个网站；
支持CSS1选择器、大部分CSS2和CSS3选择器；
理解通用的CSS hack，比如 “* html #fuck-ie”将会被认为是”html #fuck-ie”；
支持Firefox 3.5和Firefox 3.0，事实上得益于FF 3.5的js引擎的改进，FF 3.5中的性能比FF 3.0要高50%。
安装：点击这里。了解更多请访问 Dust-Me selector官方页面。
Page Speed
Page Speed是Google提供的一个前端性能分析工具，有些类似于YSlow，但是提供了一些比较个性且很有用的工具，比如Remove unused CSS.
Page Speed和YSlow一样依赖Firebug，了解详情和安装请访问这里。
CSS Redundancy Checker
CSS Redundancy Checker 是一个免费的在线应用，可以检查所有的使用某个CSS文件的页面中无用的样式。可以同时检查某一个样式在多个页面中的使用情况。该工具的不足是虽然一次能检查多个HTML页面，但每次只能检查一个CSS文件，而且还要手动输入
http://services.immike.net/css-checker/
IntelliJ IDEA
IntelliJ IDEA 这是一个颇强大的IDE，类似于DreamWeaver，不过在国内用的不多。该软件包括一个即时代码分析工具(On-the-fly Code Analysis)，可以分析CSS文件中未用到的class和id。
Expression Web
Expression Web作为微软的新一代网站开发工具，还是有很多人使用的，其CSS Report功能可以检查未用到需要被清除的CSS（我的确没有使用EW开发过网站，希望使用该软件的童鞋可以帮忙确认一下这一点）。
来自：http://www.qianduan.net/
InfoWorld从Windows上的自由免费软件中挑选出了其中10款不逊色于私有软件的最佳FOSS软件。上榜的软件如Firefox和OpenOffice.org，早已闻名遐迩；其它如TrueCrypt和VirtualBox，则是未经打磨的钻石。这些软件包括：
FileZilla——FTP客户端
VirtualBox——虚拟机
OpenOffice.org——办公组件
Mozilla Firefox——浏览器
Paint.net——图像编辑工具
Media Player Classic——播放器
TrueCrypt——加密工具
PDFCreator——创建PDF工具
7-Zip——解压缩工具
ClamWin——杀毒软件。
演示地址：http://wlog.com.cn/code/jquery/liandong/demo.html
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery 二级联动</title>
<script src="http://wlog.com.cn/lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#province").change(function(){
$("#province option").each(function(i,o){
if($(this).attr("selected"))
{
$(".city").hide();
$(".city").eq(i).show();
}
});
});
$("#province").change();
});
</script>
</head>
<body>
<select id="province">
<option>----请选择省份----
<option>北京
<option>上海
<option>江苏
</select>
<select class="city">
<option>----请选择城市----
</select>
<select class="city">
<option>东城</option>
<option>西城</option>
<option>崇文</option>
<option>宣武</option>
<option>朝阳</option>
</select>
<select class="city">
<option>黄浦</option>
<option>卢湾</option>
<option>徐汇</option>
<option>长宁</option>
<option>静安</option>
</select>
<select class="city">
<option>南京</option>
<option>镇江</option>
<option>苏州</option>
<option>南通</option>
<option>扬州</option>
</select>
</body>
</html>
这是一套适用于JavaScript程序的编码规范。它基于Sun的Java程序编码规范。但进行了大幅度的修改, 因为JavaScript不是Java。
软件的长期价值直接源于其编码质量。在它的整个生命周期里,一个程序可能会被许多人阅读或修改。如果一个程序可以清晰的展现出它的结构和特征,那就能减少在以后对其进行修改时出错的可能性。
编程规范可以帮助程序员们增加程序的健壮性。
所有的JavaScript代码都是暴露给公众的。所以我们更应该保证其质量。保持整洁很重要。
JavaScript文件
JavaScript程序应独立保存在后缀名为.js的文件中。
JavaScript代码不应该被包含在HTML文件中,除非这是段特定只属于此部分的代码。在HTML中的JavaScript代码会明显增加文件大小,而且也不能对其进行缓存和压缩。
filename.js>应尽量放到body的后面。这样可以减少因为载入script而造成其他页面内容载入也被延迟的问题。也没有必要使用language或者type属性。MIME类型是由服务器而非scripttag来决定的。
一、IE网页调试插件
IE Developer Toolsbar
IE下的FireBug.HTML及CSS调试工具
http://www.windowsmarketplace.com/details.aspx?itemid=2695980
Microsoft Script Debugger
Companion.JS 需要安装Microsoft Script Debugger才可
Companion.JS
IE下的javascript调试工具.
http://www.my-debugbar.com/wiki/CompanioNJS/HomePage
SuperPreview
主要用于html、css的调试和各个浏览器（目前只能针对IE6-IE8）的页面呈现测试
IETester-同时拥有IE6、IE7、IE8（Vista兼容）
http://www.my-debugbar.com/wiki/IETester/HomePage
二、firefox网页调试插件
FireBug
firefox下一套强大的网页开发调试工具
https://addons.mozilla.org/en-US/firefox/addon/1843
Web Developer
FireFox下的查看工具,可以查看JS,CSS等页面信息
https://addons.mozilla.org/en-US/firefox/addon/60
YSlow
why slow 页面性能优化查看器.基于FireBug
http://developer.yahoo.com/yslow
Javascript Debugger
FireFox下的javascript调试工具,比FireBug有更强大的调试功能.
https://addons.mozilla.org/en-US/firefox/addon/216
Opera Developer Tools
三、其它
Opera下的DOM,CSS查看工具,类似FireBug.
http://dev.opera.com/articles/view/opera-developer-tools/
webkit
Safari下的开发调试工具
Fiddler
一个很强大的http流查看工具
http://www.fiddlertool.com/fiddler/
Httpwatch
数据分析工具,头消息接受/发送的查看,POST数据查看.等等
一款不错的密码强度插件！
1 jquery.pstrength插件和jquery文件
2 载入jquery文件和jquery.pstrength文件
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.pstrength-min.1.2.js"></script>
<script type="text/javascript">
$(function() {
$('#user_password').pstrength();
});
</script>
3 HTML加入密码输入框，id=”user_password”:
密码：<input type="password" id="user_password" name="user_password" />
4 css:
.pstrength-minchar {
font-size : 10px;
}
input {
width:180px;
height:12px;
line-height:12px;
padding:4px 0px;
border: #cfcfcf 1px solid;
color: #585858;
}
在 Facebook 上有一个彩蛋：
登录 facebook.com ，点击你首页的任何地方，键盘输入 Up, Up, Down, Down, Left, Right, Left, Right, B, A, Enter 后，再点击页面或滚动一下滚动条，你会发现特殊的变化（如下图），嘿嘿 ^^
玩过“魂斗罗”的朋友，肯定一眼就能看出输入的字符原来就是“魂斗罗”中的“秘技”。其实“秘技”的术语叫 Konami Code，详细见图示：
那如何用 JavaScript 也在自己的页面上添加一个类似的彩蛋呢？
Abhi 在 《Konami Code on Facebook : How to implement it on your site》 一文中提供了大体思路：
var $ = {
enabled: false,
tmp: Array(),
_konamiCode: Array(65,66,39,37,39,37,40,40,38,38),
init: function() {
this.tmp = Array(65,66,39,37,39,37,40,40,38,38);
},
konamiCode: function(e) {
if(!this.enabled) {
var t = this.tmp.pop();
if((e.keyCode-t) == 0) {
if(this.tmp.length == 0) {
this.enabled = true;
}
} else {
this.init();
}
} else {
this.action();
}
},
// Change the action() function to whatever you want to
action: function() {
//alert("Konami Code Activated");
}
}
然后在 load 的时候调用 $.init() 方法，在 keydown 的时候调用 $.konamiCode(event) 方法。
<body onload="$.init()" onkeydown="$.konamiCode(event)"> </body>
不过 Abhi 的方法还是冗余了点，Jan Jarfalk 在留言中提供了一个短小精悍的代码：
// Tweetable Konami code
var k=[];
function(e){
k.push(e.keyCode);
if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0) {
//alert("Konami Code Activated");
}
}
PS：有兴趣的还可以在 Google Reader 上尝试下此“秘技”
来源：planabc.net
