html-css-js的几款前端开发工具

一、介绍2款前端小工具【取色工具和量距离工具】

 

 

1.取色工具——TakeColor

 

 

2.量距离工具（像素）

 

 

介绍下载请参见：http://www.css88.com/article.asp?id=483

 

 

 

 

二、JavaScript调试器VenKman【firefox插件】

 

 

 

 

 

 

三、IE WebDeveloper V2.3.2.108：点击下载

 

 

   一款用于IE浏览器的插件，允许直接地在浏览器窗口中浏览、传输和更新HTML DOM。该软件可以实时分析网页并且显示为一种允许你察看表格风格、Java脚本，表格以及其它网页元素的树形风格。该软件还可以在浏览器中交互式地突出显示被选择的网页元素，因此你可以在实际网页中定位其代码。

 

 

其详细介绍见：IE DOM查看工具,IE Web Developer V2 破解版本

 

 

注册码:88ZWT-71C2D4E621BD3D4A

 

 

 

 

 

四、Fiddler

 

 

一个很强大的http流查看工具

 

 

http://www.fiddlertool.com/fiddler/

 

 

 

 

 

五、Httpwatch

 

 

数据分析工具,头消息接受/发送的查看,POST数据查看.等等

 

 

http://www.httpwatch.com

 

 

 

 

六、IE Developer Toolsbar

 

 

IE下的FireBug.HTML及CSS调试工具

 

 

http://www.windowsmarketplace.com/details.aspx?itemid=2695980

 

 

 

 

七、Companion.JS

 

 

IE下的javascript调试工具.福音啊!

 

 

http://www.my-debugbar.com/wiki/CompanioNJS/HomePage

 

 

 

 

八、FireBug

 

 

强的没话说了已经....如果你不知道这是什么....那我更没话说了

....

 

 

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

 

 

 

 

十二、JavaScript 压缩工具

 

 

这程序是由Mike Hall写的，JavaScript的压缩不是为了保护代码而压缩，而是压缩后的js代码文件可以小一倍甚至多倍，从而使这个js代码快速的下载到客户端，特别js文件较大时速度效果非常明显． 使用方法：

 

 

 

使用下面的表单,你可以浓缩JavaScript代码.只用将任何脚本代码粘贴到输入的文本框,压下 '压缩' 按钮,那浓缩的版本就出现在 '输出' 里. 然后你可以使用 '全选' 按钮,快速选中'输出'里的代码,剪切粘贴到一个新的源码文件.

 

 

点击查看： http://www.css88.com/ysjs/ysjs.html

 

 

转载请注明出处：

http://www.css88.com/

 

 

 

 

十三、前端开发工具箱——抓色工具(ColorPic)

 

 

名称：ColorPic

 

 

大小：400k

 

 

下载地址：http://www.css88.com/article.asp?id=182

 

 

备注：绿色，解压即可使用。

 

 

特点：

 

 

有方案的概念，可以建立多组方案。

 

 

强大的色盘功能，多种方式可以选择。

 

 

吸色时，局部放大（放大比率可以自己调整），方便抓取细微部分的颜色。

 

 

使用Ctrl+G快捷键取色。

 

 

截图：

 

 

 

 

 

 

十四、XHTML、CSS、标准代码检测

 

 

做网页的朋友应该都去过

 

 

 http://validator.w3.org/ 和 http://jigsaw.w3.org/css-validator/。现在有人把他们集成到了一起，搞了一个网站叫 “XHTML-CSS Validator”，点击旁边的 “Advanced” ，还可以选择校验文档类型、CSS版本等等，有兴趣可以试试。

 

 

 

 

十五、火狐插件

 

 

前台开发我认为必装的火狐插件

 

 

1.CSSViewer 1.0.2

 

 

 

看具体DOM的CSS，Web开发者可以用。

 

 

2.Firebug 1.05

 

 

 

调试JS的利器，同时也可进行一些简单的DOM Hook。特爽。

 

 

唯一的缺陷就是狂吃资源，如果不是Debug时间，最好把它disable掉

 

 

3.JSView 1.2.9

 

 

 

我人为非常重要的，可以查看当前页面的外埠js和css，这对开发者来说很重要。

 

 

4.Web Developer 1.1.3

 

 

功能上可能跟Firebug有一些重叠，但是也很强大

 

 

 

 

十六、flash

破解——ASV

 

 

Action Script Viewer

（简称ASV） 可以分析 Flash 文件(.swf)文件的内部结构，并将其中的动作脚本(action scripts)分解出来，软件支持 Flash 3 4 5 及最新的 MX 制作的 swf 文件，分解出的动作脚本可以保存为文本格式，在编辑过程中可以随时对 Flash 文件进行预览。4.0版支持Macromedia Flash 4, 5 , MX , MX 2004和flash 8的 SWF 文件。

 

 

ASV5

详细教程

 

 

1.

从Action Script Viewer 5.0 中打开要"还原"的.swf文件。

 

 

2.

文件菜单 > 导出重建数据

 

 

file > Export Rebuild data(JSFL)

 

 

 

3.

导出数据到指定文件夹

 

 

4.

打开Flash, 新建Flash文件, 将刚才文件夹中的SWF/MP3/WAV/FLV文件全部导入到库中(不要导入到场景

 

 

5.

确认后保存文件, 将文件命名为"rebuild.fla" . 目的是于.jsfl文件同名 . 保存后关闭该文件。

 

 

6.

然后打开"rebuild.jsfl"文件 (不要从Flash中用打开命令, 简单的方法是从文件夹中双击，此时Flash的时间轴/工具栏哗啦啦的闪)

 

 

保存该FLA文件, 然后用Ctrl+Enter发布。

 

 

Action Script Viewer 5.0

可以还原flash8的swf

 

 

目前可供下载的最高版本：

Action Script Viewer v5.01（点击下载）

 

 

 

 

十七、CSS整形工具——使用CSSTidy 1.2

 

 

我们在写CSS样式的时候通常会根据自己的一些习惯来写，比如有些时候不会使用样式缩写，样式格式随意，大小写不分（另存下来的样式是大写的）等等；晚上有一种CSS整形工具叫CSSTidy 1.2大家可以使用一下，可以优化你写的样式，特备是节省字节方面效果显著；点击进入CSS整形工具CSSTidy 1.2