前台开发使用工具集合

javascript && html && css 专栏收录该内容
38 篇文章 0 订阅
前台开发使用工具集合

1。 Fiddler
一个很强大的http流查看工具
http://www.fiddlertool.com/fiddler/

2。 Httpwatch
数据分析工具,头消息接受/发送的查看,POST数据查看.等等
http://www.httpwatch.com

3。IE Developer Toolsbar
IE下的FireBug.HTML及CSS调试工具
http://www.windowsmarketplace.com/details.aspx?itemid=2695980

4。 FireBug
强的没话说了已经....如果你不知道这是什么....那我更没话说了....
https://addons.mozilla.org/en-US/firefox/addon/1843

5。 Web Developer
FireFox下的查看工具,可以查看JS,CSS等页面信息
https://addons.mozilla.org/en-US/firefox/addon/60

6。 YSlow
why slow?页面性能优化查看器.基于FireBug
http://developer.yahoo.com/yslow

7。 Javascript Debugger
FireFox下的javascript调试工具,比FireBug有更强大的调试功能.
https://addons.mozilla.org/en-US/firefox/addon/216

8。 Opera Developer Tools
Opera下的DOM,CSS查看工具,类似FireBug.
http://dev.opera.com/articles/view/opera-developer-tools/

转载请注明出处:http://www.css88.com/

9。 webkit
Safari下的开发调试工具
http://nightly.webkit.org/

 

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

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

 

11。 web开发利器Aptana (js助手)

 

 

 

12。 前端开发工具箱——抓色工具(ColorPic)

 

名称:ColorPic
大小:400k

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

备注:绿色,解压即可使用。

特点:
有方案的概念,可以建立多组方案。
强大的色盘功能,多种方式可以选择。
吸色时,局部放大(放大比率可以自己调整),方便抓取细微部分的颜色。
使用Ctrl+G快捷键取色。

截图:

 

 

 

13、XHTML、CSS、标准代码检测

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

 

 

 

14、火狐插件

 

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

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有一些重叠,但是也很强大

 

 

15、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

 

 

16、CSS整形工具——使用CSSTidy 1.2

 

我们在写CSS样式的时候通常会根据自己的一些习惯来写,比如有些时候不会使用样式缩写,样式格式随意,大小写不分(另存下来的样式是大写的)等等;

晚上有一种CSS整形工具叫CSSTidy 1.2大家可以使用一下,可以优化你写的样式,特备是节省字节方面效果显著;

17、IE插件——IE DeveloperToolbar 1.0

愚人码头个人观点:建议使用上面的火狐插件,如果你死活没有用火狐的习惯那就用IE的这个插件

在经历了一年半的测试期之后,微软5月正式发布了其IE Developer Toolbar最终正式版,支持IE6/7。微软开发者工具条可以让开发人员更为方便的分析网页结构,调整包括CSS在内的各种特定元素,帮助开发者更好地创建Web应用。
  微软此次发布的1.0版相较Beta 3测试版并无新鲜元素加入,按照微软的说法,1.0版本主要改善了可靠性更适合作为一个正式版本来发布。


IEDeveloperToolbar特性如下:
  -浏览和修改Web页的文档对象模型(DOM)。
  -通过多种技术方式定位、选定Web页上的特定元素。
  -禁止或激活IE设置。
  -查看HTML对象的类名、ID,以及类似链接路径、tab顺序、快捷键等细节。
  -描绘表格、单元格、图片或选定标签的轮廓。
  -显示图片象素、大小、路径、替代文字等。
  -即时重定义浏览器窗口大小到800x600或自定义大小。
  -清空浏览器缓存和cookie,被清除项可从所有对象或给定域中选择。
  -直接访问关联W3C规范参考、IE开发组blog或其他来源。
  -显示设计时标尺,帮助对齐对象。


插件使用方法:在IE菜单的"查看" -> "浏览器栏" 里面钩选“IE Developer Toolbar”即

汉化方法:
1.先安装原版将IEDevToolbar
2.关闭所有IE浏览器
3.将IEDevToolbar.dll文件替换X:\Program Files\Microsoft\Internet Explorer Developer Toolbar
中的IEDevToolbar.dll文件.X为你的系统盘.
4.重新打开IE.

 

 

 

18、参看手册

 

JavaScript参考手册

说明:JavaScrip必备宝典

下载地址:http://www.alixixi.com/Down/eBook/Manual/2007/20070301109.html

2.CSS参考手册

说明:苏沈小雨css2.0中文手册,页面开发人员必备手册

下载地址:http://www.div-css.com/html/download/books/00444.html

 

19、Beyond Compare v2.52 Build 252 简体中文版

说明:Beyond Compare 是一款不可多得的专业级的文件夹和文件对比工具。使用他可以很方便的对比出两个文件夹或者文件的不同之处。并把相差的每一个字节用颜色加以表示,查看方便。并且支持多种规则对比。对软件汉化者来说,这绝对是一款不可多得的工具。

下载地址:http://www.crsky.com/soft/2975.html

注册码:
urKH3mXZVDiTNgCKQnFnfvaQB5tTtahvtUr5HqwT9YZu50+b3T9bkzYKwKsfjhhiDgzR9Dr5qbmJ2EmNzYfSAptuo90Ga7NTytXRVPnH-nTye3q+vgdqSmegWMmJmaU9VsqLQNrNfxx1QLBNDdNpUBxrcdm6TPbh8-NYzpYCJmQXJOkTOb7MgovRGiJLLuTN7mpUKRcaT8uxfx1ej+sSKj4JMFGCTSzS+B2L7lKPzT6LKV8oQgg3vGcrU+Y857A2

 

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值