`

前端开发大众手册(包括工具、网址、经验等)

阅读更多
一直觉得前端开发缺个手册,这是个体力活。不过总得有人来干。

今天闲来无事,把一些工具(online和client的)、常用网址、以及经验总结等罗列出来和大家分享下。这个标题起地大了点,肯定会有很多地方没列到,包括类目的分法也可能考虑不周,所以还请大家积极补充指正,可以直接留言,也可以发邮件给我(sorrycc#gmail.com)。之所以加上“大众”两字,因为以下资源对于高手来说可能早就很熟悉了。

另外想提一句,工具是死的,好不好用得看你会不会用。比如Firefox、Fiddler等,除了显而易见的功能以外,都有一些小的技巧,掌握了可以让你事半功倍。

更新记录:

[20081025] 第一版
快捷导航:

在线工具集
常用Firefox插件
IE下的调试工具
参考手册
批处理工具
IDE及其他工具
Bookmarklet
前端开发者社区及权威网站
推荐订阅的博客和网站
另外还搞了个Firefox插件《前端开发工具集》,把资源整合到一个菜单下,方便查询。数据放在线上(Google AppEngine),速度应该会有保证,更新也会比较方便哈,见图。


在线工具集

书籍类:
Book Shelf 2.0 beta —— 荐,分类很清晰,下载很方便
Book Go!
原版图书免费下载链接收集站
51CNNET.NET
JavaScript类:
Beautify JavaScript —— JavaScript格式化工具,效果很理想
AJAX Libraries API
Regex Tester
Compressor Packer —— 以前一直用这个压JS,自从有了TBCompressor,就放弃他了
CSS类:
CSS选择器性能测试
CSSTidy —— CSS格式化工具
CSS Compressor  —— CSS压缩
其他:
GUID 生成器 —— 做某些东西(Firefox插件)时需要唯一资源标志符时用
W3Counter
WebWait - Benchmark Your Website
常用Firefox插件

支付宝安全控件 和 旺旺协议 —— 网购专用,Firefox+浦发网银,无敌了
Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版
Firecooike —— 支持Cookie的查看和编辑
Jiffy —— 调试性能的,用起来比较麻烦,没试过
YSlow —— Why Slow? YUI出品
Pixel Perfect —— 把设计稿直接拖到Firefox里进行对比
Rainbow for Firebug —— JS高亮,性能不是很理想
Fiddler 开关 —— 简化在Firefox里切换Fiddler的操作,感谢Taobao UED的空帏同学
Web Developer
DevBoi —— 把Html, Dom, JavaScript等手册放在侧栏里,可以自定义增加,快捷键Ctrl+F9。可以在这里找到更多的Package。
RefControl —— 针对每个站点发送想要的HTTP Referer
GreaseMonkey —— 看某个网站不爽,写个小脚本来优化下还是不错的
HttpFox —— 查看当前Http链接状态,类似IE下的HttpWatch
User Agent Switcher —— 切换User-Agent,同时开发iphone和web版本的时候很方便
FoxyProxy —— 穿墙工具,配合专业代理公布器使用很和谐
IE下的调试工具

Fiddle2 —— 非常强悍的一款http流查看工具,默认支持IE,其他浏览器可以设置将{Document}\Scripts\BrowserPAC.js设为代理进行使用。Firefox下可用上述”Fiddler 开关”进行快速切换。支持插件。
IE Developer Toolbar —— 查看元素、禁用缓存、禁用CSS\JS、Outline元素、查看生成的源码等功能,IE8自带了一个加强版的。
Microsoft Script Debugger + Companion.JS —— 调试JS用,虽然报错还是有误差,但是我已经满足了。安装顺序是:Microsoft Script Debugger,Companion.JS,在”IE选项-高级”里取消禁用脚本调试。
多版本IE共存两种方案:
IE7/8 + IE Tester —— 大众型配置,可以基本满足日常需要。
IE6 + Internet Explorer Collection —— 在IE 6用户占绝对优势以及IE 6神奇bug满天飞的时代,我还是推荐这种方案,因为只有神奇的原装IE 6,才能抵挡运营神奇的问题。另外如果还有其他机器可供支配的话,建议再装个IE 8 + IE Tester,因为IE 8下的Developer Toolbar还是有很大改进的,调试起来会方便一些。
以下三个软件相对不重要些:
HttpWatch —— http流查看
Instant Source —— 可查看JS生成的源码
NetLimiterPro —— 网速限制
参考手册

XHTML、CSS & DOM W3C 手册 —— 玉伯整理的版本,包含了W3C手册以及其他有用的资料。

苏昱的CSS中文手册和Dom中文手册
JScript语言参考
XML指南
XMLHTTP参考手册
jQuery 1.2.6 API和jQuery and jQuery UI Reference 1.2
Apache 2.2 中文版参考手册在线版
MySQL 5.1 参考手册 (在线版)
PHP手册
YUI Cheatsheet
Cheat Sheet Roundup - Over 30 Cheatsheets for developers
23个Cheatsheet打包下载
批处理工具

TBCompressor —— 淘宝UED的JS/CSS压缩工具,详见玉伯的介绍
pngOptimizer —— png优化工具
jpegTran —— jpeg去冗余meta工具
IDE及其他工具

Editplus v301 汉化版
Tortoise SVN
移动版本的 Apache + PHP —— 灰常灰常好用,灰常灰常移动,见明城的说明





Bookmarklet(右键另存)

Firebug Lite —— 官方介绍
Xray —— 官方介绍
MRI —— 官方介绍
<A href=”javascript:”+ window.document.documentElement.outerHTML+ ‘‘+ window.document.documentElement.outerHTML+ ””&gt;查看生成的源码,<A href=”javascript:(function(){var w=window.open(’about:blank’);w.document.write(”+ window.document.documentElement.outerHTML+ ‘‘+ window.document.documentElement.outerHTML+ ”);})()”&gt;打开新窗口查看生成的源码 —— for IE
开发者社区及权威网站

Mozilla Developer Center (MDC)
YAHOO! Developer Network (YDN)
Dev.Opera
Apple Developer Connection
MSDN
IBM Developers中国 (Web 前端开发技术专题)
WebKit
AOL Developer Network
SlideShare - Share PPT —— 在线PPT分享,资源丰富
Google Doctype —— Web开发人员的百科全书
W3C (香港,中国)
Position Is Everything
HTML Dog
维基百科
推荐订阅的博客和网站(排名不分先后)

国外
内容聚合:A List Apart,Ajaxian,Smashing Magazine,456 berea street,Script & Style,CSS Globe,CSS-Tricks,SitePoint
团队Blog:Yahoo! User Interface Library (YUI),IEBlog
个人Blog:John Resig,PPK: QuirksMode,Douglas Crockford,Dean Edwards,Nate Koechley,Julien Lecomte,Eric A. Meyer,Andy Budd,Steven Levithan,HedgerWow
国内
内容聚合:Blueidea,无忧脚本,网页设计师(W3CN),JavaScript教程网
团队Blog:淘宝,口碑,阿里巴巴国际站,阿里巴巴中文站,阿里巴巴中文站前端开发团队(方凳),阿里妈妈,支付宝,阿里软件,19楼,九天音乐,金蝶与友商网
个人Blog,这里列出的是原创并更新相对频繁的博客,如有遗漏,请告之(sorrycc#gmail.com):怿飞,手气不错,Realazy,old9(需穿墙术),沙滩凉鞋(空帏),射雕(玉伯),Aether,振之,嗷嗷,JunChen,爆牙齿,秦歌,克军,5key,小志,Rage(正淳),麦鸡,云烈,老冒,番茄红了,Joyqi,卢力,CSS森林(Ghost),Twinsen,Gulu77,Rlog,Dlog,子鼠,西风坊 …
分享到:
评论
1 楼 AlexChen_China 2010-09-28  
Web开放工具是如此的丰富啊...
初来乍道很多工具都不知道;

相关推荐

    阿里web前端开发手册.pdf

    "阿里web前端开发手册" 阿里web前端开发手册是一份详细的前端开发规范,涵盖了项目命名、目录命名、JS、CSS、SCSS、HTML、PNG 文件命名等多个方面的命名规范。下面是本手册中的一些重要知识点: 1. 命名规范: 在...

    前端开发规范手册前端开发规范手册

    # 前端开发规范手册 此手册主要实现的目标:**代码一致性**和**最佳实践**。通过代码风格的一致性,降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践,确保页面性能得到最佳优化和高效的代码。 此...

    Web前端开发规范手册

    Web 前端开发规范手册 摘要:本手册旨在提高团队协作效率、便于后台人员添加功能及前端后期优化维护,输出高质量的文档。本手册涵盖了文件规范、CSS 书写规范、html 书写规范、JavaScript 书写规范、图片规范、注释...

    前端开发离线手册.zip

    这份压缩包包含了两个重要的子文件,分别是W3School离线手册(2018.04.01).chm和CSS4.2.7(飘零雾雨版).chm,它们都是前端开发人员日常学习和工作中不可或缺的参考工具。 W3School离线手册是前端开发者的必备宝典,...

    前端开发帮助手册大全

    - 学会使用Chrome开发者工具进行前端调试,包括元素检查、网络请求分析、性能分析等。 - Jest、Mocha等测试框架配合Chai、JSDom等库,可以编写单元测试和集成测试,确保代码质量。 8. Accessibility(无障碍性)...

    前端开发各种离线手册

    在前端开发领域,离线手册是一种非常实用的学习和工作资源,尤其对于初学者和经验丰富的开发者来说,它们提供了快速查询和理解技术规范、API、框架和工具的能力,无需始终依赖互联网连接。本压缩包文件“离线手册”...

    前端开发人员手册2017版

    这份手册不仅适合初学者,也对有经验的开发者有所启发,旨在帮助读者理解和掌握前端开发的核心概念,工具和框架。 一、JavaScript开发 作为前端开发的基础,JavaScript在2017年已经发展成熟且广泛应用。手册可能...

    vscode前端开发工具

    vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具...

    Web前端开发规范|CSS手册|W3c手册资料合集

    Web前端开发规范、CSS手册以及W3C手册资料合集是前端开发者不可或缺的学习资源,它们涵盖了前端开发的基础知识、最佳实践以及最新的标准指南。在这个资料合集中,"小趴菜前端资料合集"可能包含了丰富的教程、实战...

    Web前端开发规范手册.pdf

    《Web前端开发规范手册》是一份针对Web前端开发人员制定的开发规范,其主要目的是为了提高团队协作效率、便于前端开发及后期的优化维护、帮助新进团队成员快速上手,以及确保输出高质量的代码。规范手册中详细阐述了...

    Web前端开发规范手册.rar

    这份文档涵盖了前端开发的多个方面,包括但不限于代码规范、项目结构、版本控制、性能优化、可访问性以及测试策略等关键知识点。以下是对这些核心内容的详细解析: 1. **代码规范**:代码规范是保证团队协作效率的...

    前端开发工程师取色小工具

    标题中的“前端开发工程师取色小工具”是一个专为前端开发者和UI设计师设计的应用程序,它的主要功能是对屏幕或页面中的颜色进行识别,并提供颜色的精确数值,以便于在开发过程中使用。这样的工具极大地提高了工作...

    前端开发规范手册.pdf

    【前端开发规范手册】 《前端开发规范手册》旨在提供一套标准和最佳实践,以提高代码质量和团队协作效率。手册覆盖了HTML、CSS、JavaScript、性能优化以及移动端优化等多个方面,适用于互联网行业的前端开发者。 *...

    前端人员的开发手册

    该手册详细介绍了前端开发实践、学习资源和开发工具,旨在为初学者和专业开发者提供实用的指导和帮助。 首先,手册强调了前端开发实践的重要性,认为前端工程师应熟练运用HTML、CSS、DOM和JavaScript这四种基础技术...

    阿里巴巴前端开发规范.docx

    本规范涵盖了前端开发中的多个方面,包括命名规范、HTML 规范、CSS 规范等。 命名规范 命名规范是前端开发中的一个重要方面。好的命名规范可以提高代码的可读性和维护性。阿里巴巴前端开发规范对命名规范提出了...

    HBuilder前端开发工具

    《HBuilder前端开发工具详解》 HBuilder,作为一款强大的前端开发工具,是广大Web开发者不可或缺的利器。这款工具以其高效、智能、便捷的特点,在前端开发领域占据了一席之地。本文将详细介绍HBuilder的主要功能、...

    2020前端入门开发规范手册.pdf

    - 手册中还会介绍一些常用的前端开发工具,比如代码编辑器、版本控制工具、构建工具等。 #### 参考资料 - 手册提供了多个参考资料,这些资料可能包括GitHub上的开源项目、在线文档、博客文章等,以便开发者进一步...

    Web前端开发规范手册参考.pdf

    在文档《Web前端开发规范手册参考.pdf》中,我们可以提炼出许多关于Web前端开发的关键知识点。这些内容涵盖了HTML、CSS、JavaScript以及图片资源的使用等。 首先,文档提到了HTML文档的结构和规范。HTML是构成网页...

Global site tag (gtag.js) - Google Analytics