前端开发必备工具

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

1.取色工具——TakeColor

2.量距离工具(像素)

介绍下载请参见:https://www.360docs.net/doc/d26275365.html,/article.asp?id=483

=================================2008年7月17日更新==========================

JavaScript调试器VenKman【firefox插件】

=================================2008年5月23日更新==========================

26.IE WebDeveloper V2.3.2.108:点击下载

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

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

注册码:88ZWT-71C2D4E621BD3D4A

=================================2008年5月6日更新==========================

25.IETester-同时拥有IE6、IE7、IE8(Vista兼容)

具体参见:https://www.360docs.net/doc/d26275365.html,/article.asp?id=361

虽然以前我写过IE6、IE7、IE8共存的解决方案,但是看到IETester这个软件以后那些都已经没有意义了(那些办法副作用比较大,而且实现起来有些难度)。使用IETester能够较好的解决,测试网页兼容性的多IE版本的需求。暂时已经支持IE5.5——IE8beta1,我想这已经足够了。还在苦苦找寻IE6和IE7共存或者IE7和IE8共存的朋友,可以试试这个软件。当然这个软件也不是万能的,在最后,官方非常厚道的给出了暂时存在的重要bug列表。

推荐理由:

1同时拥有IE 5.5、IE6、IE7、IE8

2.常用的IE6绿色版不能在Vista上使用

二十四搜索引擎——百搜吧(https://www.360docs.net/doc/d26275365.html,)

直接搜索网址:https://www.360docs.net/doc/d26275365.html,/

https://www.360docs.net/doc/d26275365.html,/so/baiso.htm

做我们这行搜索少不了,碰到有什么问题就要马上google或者百度一下,找一些相关的资料。读书那会有问题就跑图书馆,工作之后就用搜索,不过有些时候google搜不到,又得用百度,要搜图片什么的还要点来点去麻烦,做这行效率是很关键的,提高效率、节约生命嘛!

发现一个很好的网站:百搜吧。输入一次关键字能同时搜索百度、谷歌、雅虎三大搜索引擎及国内知名网站和专业网站的资源,具备根据您自己的需要自定义搜索引擎偏好,随时切换网页、电影、新闻、娱乐、图像、音乐、视频、论坛、博客、词典等专业搜索,保存您的搜索历史记录,中英文界面切换等人性化功能...

二十三Fiddler

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

https://www.360docs.net/doc/d26275365.html,/fiddler/

二十二Httpwatch

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

https://www.360docs.net/doc/d26275365.html,

二十一IE Developer Toolsbar

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

https://www.360docs.net/doc/d26275365.html,/details.aspx?itemid=2695980

二十Companion.JS

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

https://www.360docs.net/doc/d26275365.html,/wiki/CompanioNJS/HomePage

十九FireBug

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

https://https://www.360docs.net/doc/d26275365.html,/en-US/firefox/addon/1843

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

十九Web Developer

FireFox下的查看工具,可以查看JS,CSS等页面信息

https://https://www.360docs.net/doc/d26275365.html,/en-US/firefox/addon/60

十八YSlow

why slow?页面性能优化查看器.基于FireBug

https://www.360docs.net/doc/d26275365.html,/yslow

十七Javascript Debugger

FireFox下的javascript调试工具,比FireBug有更强大的调试功能.

https://https://www.360docs.net/doc/d26275365.html,/en-US/firefox/addon/216

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

十六Opera Developer Tools

Opera下的DOM,CSS查看工具,类似FireBug.

https://www.360docs.net/doc/d26275365.html,/articles/view/opera-developer-tools/

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

十五webkit

Safari下的开发调试工具

https://www.360docs.net/doc/d26275365.html,/

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

=================================2008年3月15日更新===========================

十四JavaScript 压缩工具

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

使用方法:

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

点击查看https://www.360docs.net/doc/d26275365.html,/ysjs/ysjs.html

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

=================================2008年3月5日更新===========================

十三web开发利器Aptana

点击查看https://www.360docs.net/doc/d26275365.html,/article.asp?id=190

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

=================================2008年3月1日更新===========================

十二Javascrīpt开发工具大集合

https://www.360docs.net/doc/d26275365.html,/article.asp?id=186

=================================2008年2月25日17:55:27更新===========================

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

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

名称:ColorPic

大小:400k

下载地址:https://www.360docs.net/doc/d26275365.html,/article.asp?id=182

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

特点:

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

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

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

使用Ctrl+G快捷键取色。

截图:

=================================================================== ============

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

一、搜索引擎——百度(https://www.360docs.net/doc/d26275365.html,)

二、测试浏览器——同时拥有IE7、IE6、IE5.5

自从IE7出来,IE6和IE7的测试就成了问题,同一台电脑不能同时安装IE7和IE6,前台开发长久的痛啊!

哈哈,皇天不负有心人,终于有解决办法了,码头现在提供IE6破解绿色版下载,国外网站下载的,从ie的第一个版本到IE6都有的,现在提供IE6和IE5.5的破解绿色版下载

IE6的破解绿色版点击下载:点击下载此文件

IE5.5破解绿色版点击下载:点击下载此文件

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

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

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

————————————2007年12月23日1:10:18更新————————————————

看不懂英文的兄弟请用https://www.360docs.net/doc/d26275365.html,/css-validator/(中文的)检测css

另:建议先使用DreamWeaver或vs2008本地检测一下;

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

四、JS脚本调试和书写工具——vs2008

======================================2008年3月1日18:56:00==========================

VS 2008已有正式版本

文件详情:Visual Studio Team System 2008 Team Suite

软件版本:2008简体中文正式版(试用版)

文件格式:RAR 压缩文档

文件大小:4.24 GB

发布日期:2008.2.9

官方网站:https://www.360docs.net/doc/d26275365.html,/vstudio

免责声明:

下载地址为90天试用版(官方正式简体中文),只要按上面的说明更换CDKey即可完美升级为正式版。7个分卷压缩包均需下载才能正常安装,包含MSDN。前面6个压缩包均为700M,最后一个压缩包为142M

VS2008下载页面:分卷压缩包1 分卷压缩包2 压缩包3 压缩包4 压缩包5 压缩

包6 压缩包7

VS2008破解方法非常简单,在开始>设置>控制面版>添加或删除程序>卸载https://www.360docs.net/doc/d26275365.html,2008>出现卸载界面>点击Next>输入上面CD-key ->出现成功画面即可完美将试用版升级成为正式版。

VS2008正式版序列号CDKEY:PYHYP-WXB3B-B2CCM-V9DX9-VDY8T

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

======================================2008年3月1日18:56:00==========================

VS 2008不再是程序员专用工具,VS 2008可以非常完美地支持JavaScript和https://www.360docs.net/doc/d26275365.html, AJAX的智能感知和调试。.NET 3.5内置了https://www.360docs.net/doc/d26275365.html, AJAX,并且UpdatePanel终于可以支持WebPart了。

VS2008 beta2简体中文版下载:

下载地址:

TFS:

https://www.360docs.net/doc/d26275365.html,/downloads/details.aspx?FamilyId=053E83D0-DEB4-4EBB-B4C 8-CBFFE928B4AA&displaylang=zh-cn

VSTS:

https://www.360docs.net/doc/d26275365.html,/downloads/details.aspx?FamilyId=428C076F-E3EF-4290-9FF4 -F6FD8F180B7D&displaylang=zh-cn

微软发布页面:https://www.360docs.net/doc/d26275365.html,/downloads/details.aspx?FamilyID=428c076f-e 3ef-4290-9ff4-f6fd8f180b7d&DisplayLang=zh-cn

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

五、火狐插件

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

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

5.还有好的话请大家留言,我更新。。。

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

六、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(点击下载)

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

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

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

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

点击进入CSS整形工具CSSTidy 1.2

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

八、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.

点击下载IE DeveloperToolbar 1.0(web前台开发利器)汉化版

=========================以下2008年1月26日1:32:57更新===========================

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

九、参看手册

JavaScript参考手册

说明:JavaScrip必备宝典

下载地址:https://www.360docs.net/doc/d26275365.html,/Down/eBook/Manual/2007/20070301109.html

2.CSS参考手册

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

下载地址:https://www.360docs.net/doc/d26275365.html,/html/download/books/00444.html

转载请注明出处:https://www.360docs.net/doc/d26275365.html,/

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

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

下载地址:https://www.360docs.net/doc/d26275365.html,/soft/2975.html

注册码:

urKH3mXZVDiTNgCKQnFnfvaQB5tTtahvtUr5HqwT9YZu50+b3T9bkzYKwKsfjhhiDgzR9 Dr5qbmJ2EmNzYfSAptuo90Ga7NTytXRVPnH-nTye3q+vgdqSmegWMmJmaU9VsqLQN rNfxx1QLBNDdNpUBxrcdm6TPbh8-NYzpYCJmQXJOkTOb7MgovRGiJLLuTN7mpUKRc aT8uxfx1ej+sSKj4JMFGCTSzS+B2L7lKPzT6LKV8oQgg3vGcrU+Y857A2

qi 其他内容陆续更新中,敬请期待。。。

一个强大的新工具现在提供给使用基于Mozilla的系列浏览器(包括Firefox,Mozilla套件和Netscape 7.x)的Web开发人员。JavaScript调试器,又名“Venkman”,已经成为Mozilla 浏览器、Web社区和脚本开发人员的一部分很长时间了。这篇文档提供一个JavaScript调试器的概览和一些在Web页面脚本开发中使用它的实际例子。这篇“入门”是一系列关于Venkman文档的第一篇。假设你已经开始使用Venkman,这里所提到的特性、程序和要点会让你作为一个Web开发人员或脚本调试者更加自信。

Venkman是一个同时拥有控制台界面和图形界面的调试器。你可以根据自己的喜好或特长,从控制台界面或图形界面使用“断点控制”,“调用栈”和“变量/对象监视器”。交互式的命令行界面允许你执行任何可用的JavaScript代码。Venkman的键盘快捷键可用于可视化的调试环境,gdb用户对于Venkman的/break,/step,/next,/finish,/frame,/where 命令一定非常熟悉。

在Windows平台上上,JavaScript调试器的界面外观和Visual Interdev以及其它大型的web开发工具是很相似的。在其它操作系统平台上,如Mac OS和Unix,它提供了一个在易用性、性能居于同等水平上的独特的开发调试环境。

相关主题
相关文档
最新文档