Web 开发中常用工具

1. JavaScript 代码格式化

当我们要研究别人的 javascript 代码，却发现那些 javascript 代码被混淆和压缩，所有的变量名称都被更改，javascript 语法没有断行整个文档代码只有一行。或者我们自己的代码出于安全考虑也被混淆了，现在有个bug要修改这部分代码。此时如果直接阅读混淆的代码是非常困难的，我们必须要将代码按照 javascript 的语法重新格式化，以便使代码阅读起来更加方便。一些在线格式化工具可以使用。

如：http://www.msii.cn/tools/jsb/index.html

格式化前：

/*   paste in your code and press Beautify button   */
if('this_is'==/an_example/){do_something();}else{var a=b?(c%d):e[f];}
格式化后：

/*   paste in your code and press Beautify button   */
if ('this_is' == /an_example/) {
    do_something();
} else {
    var a = b ? (c % d) : e[f];
}

2. Css 样式表格式化

我本人以前写css使喜欢这样写：

.imgbox a{

     display:block;

     width:20px;

     height:20px;

}

.imgbox span{

    padding:2px;

     display:block;

     width:20px;

     height:20px;

}

后来发现这样写太占文档视图窗口空间，一个小功能的css 经常在一个窗口中显示不下，要滚动窗口才能找到相对应的css代码。使用这种方式的好处是每个样式的属性都是单行列出比较清晰。但是按照我们解决问题思路的过程，首先是要在文档中查找我们要修改的样式在文档中的大致范围，这个过程花费的时间要久一些。然后才是具体要修改某一样式项，当确定并定位要修改的样式后再小范围定位修改某一特定样式项时就容易得多。所以我现在写css方式是：

.imgbox a{display:block;width:20px;height:20px;}

.imgbox span{padding:2px;display:block;width:20px;height:20px;}

这样一眼就能定位到我要修改的地方是哪一行，然后再在该行查找要修改的样式属性项。但是有时候如果css样式出了语法问题时这种方式很难查找，我们必须将其美化。以下是一些在线工具。

http://www.nmju.net/UserFiles/CSS_format.html