前端開發大眾手冊(包括工具、網址、經驗等)

shilei22發表於2010-12-24
[b]國外CSS酷站欣賞 [/b]
[url=http://www.forcss.com/]forcss.Com [/url]
http://www.forcss.com
http://www.urbantrash.net/cssgallery/
http://www.csselite.com/
http://www.cssheroes.com/

快捷導航:
線上工具集
常用Firefox外掛
IE下的除錯工具
參考手冊
批處理工具
IDE及其他工具
Bookmarklet
前端開發者社群及權威網站
推薦訂閱的部落格和網站
另外還搞了個Firefox外掛[url=https://addons.mozilla.org/zh-CN/firefox/addon/9385]《前端開發工具集》[/url],把資源整合到一個選單下,方便查詢。資料放線上上(Google AppEngine),速度應該會有保證,更新也會比較方便。

線上工具集
書籍類:
[url=http://book.mvnsearch.org/]Book Shelf 2.0 beta[/url] —— 薦,分類很清晰,下載很方便
[url=http://www.bookgo.org/]Book Go![/url]
[url=http://www.cnshare.org/]原版圖書免費下載連結收集站[/url]
[url=http://www.51cnnet.net/]51CNNET.NET[/url]
JavaScript類:
[url=http://elfz.laacz.lv/beautify/]Beautify JavaScript[/url] —— JavaScript格式化工具,效果很理想
[url=http://code.google.com/apis/ajaxlibs/]AJAX Libraries API[/url]
[url=http://regexpal.com/]Regex Tester[/url]
[url=http://dean.edwards.name/packer/]Compressor Packer[/url] —— 以前一直用這個壓JS,自從有了TBCompressor,就放棄他了
CSS類:
[url=http://mootools.net/slickspeed/]CSS選擇器效能測試[/url]
[url=http://www.osxcn.com/csstidy/]CSSTidy[/url] —— CSS格式化工具
[url=http://www.cssdrive.com/index.php/main/csscompressor/]CSS Compressor[/url] —— CSS壓縮
其他:
[url=http://www.guidgen.com/]GUID 生成器[/url] —— 做某些東西(Firefox外掛)時需要唯一資源標誌符時用
[url=http://www.w3counter.com/globalstats.php]W3Counter[/url]
[url=http://webwait.com/]WebWait[/url] - Benchmark Your Website
常用Firefox外掛
[url=https://addons.mozilla.org/zh-CN/firefox/addon/6707]支付寶安全控制元件[/url] 和 [url=https://addons.mozilla.org/zh-CN/firefox/addon/8625]旺旺協議[/url] —— 網購專用,Firefox+浦發網銀,無敵了
[url=https://addons.mozilla.org/zh-CN/firefox/addon/1843]Firebug[/url] —— 這個不用介紹了吧,附空幃的[url=http://www.quchao.com/entry/fix-encoding-bug-with-open-with-editor-in-firebug/]外部編輯器亂碼修正版[/url]
[url=https://addons.mozilla.org/zh-CN/firefox/addon/6683]Firecooike[/url] —— 支援Cookie的檢視和編輯
[url=https://addons.mozilla.org/zh-CN/firefox/addon/7613]Jiffy[/url] —— 除錯效能的,用起來比較麻煩,沒試過
[url=https://addons.mozilla.org/zh-CN/firefox/addon/5369]YSlow[/url] —— Why Slow? YUI出品
[url=https://addons.mozilla.org/zh-CN/firefox/addon/7943]Pixel Perfect[/url] —— 把設計稿直接拖到Firefox裡進行對比
[url=https://addons.mozilla.org/zh-CN/firefox/addon/7575]Rainbow for Firebug[/url] —— JS高亮,效能不是很理想
[url=https://addons.mozilla.org/zh-CN/firefox/addon/9373]Fiddler 開關[/url] —— 簡化在Firefox裡切換Fiddler的操作,感謝Taobao UED的空幃同學
[url=https://addons.mozilla.org/zh-CN/firefox/addon/60]Web Developer[/url]
[url=https://addons.mozilla.org/en-US/firefox/addon/1673]DevBoi[/url] —— 把Html, Dom, JavaScript等手冊放在側欄裡,可以自定義增加,快捷鍵Ctrl+F9。可以在[url=http://www.martincohen.info/products/devboi/packages/]這裡[/url]找到更多的Package。
[url=https://addons.mozilla.org/zh-CN/firefox/addon/953]RefControl[/url] —— 針對每個站點傳送想要的HTTP Referer
[url=https://addons.mozilla.org/zh-CN/firefox/addon/748]GreaseMonkey[/url] —— 看某個網站不爽,寫個小指令碼來優化下還是不錯的
[url=https://addons.mozilla.org/zh-CN/firefox/addon/6647]HttpFox[/url] —— 檢視當前Http連結狀態,類似IE下的HttpWatch
[url=https://addons.mozilla.org/zh-CN/firefox/addon/59]User Agent Switcher[/url] —— 切換User-Agent,同時開發iphone和web版本的時候很方便
[url=https://addons.mozilla.org/zh-CN/firefox/addon/2464]FoxyProxy[/url] —— 穿牆工具,配合[url=http://www.8558.org/]專業代理公佈器[/url]使用很和諧
IE下的除錯工具
[url=http://www.fiddler2.com/]Fiddle2[/url] —— 非常強悍的一款http流檢視工具,預設支援IE,其他瀏覽器可以設定將{Document}\Scripts\BrowserPAC.js設為代理進行使用。Firefox下可用上述"Fiddler 開關"進行快速切換。支援[url=http://www.fiddler2.com/Fiddler2/extensions.asp]外掛[/url]。
[url=http://www.microsoft.com/downloads/details.aspx?FamilyId=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en]IE Developer Toolbar[/url] —— 檢視元素、禁用快取、禁用CSS\JS、Outline元素、檢視生成的原始碼等功能,IE8自帶了一個加強版的。
[url=http://www.microsoft.com/downloads/details.aspx?familyid=2f465be0-94fd-4569-b3c4-dffdf19ccd99&displaylang=en]Microsoft Script Debugger[/url] +[url=http://www.my-debugbar.com/wiki/CompanionJS/HomePage] Companion.JS[/url] —— 除錯JS用,雖然報錯還是有誤差,但是我已經滿足了。安裝順序是:Microsoft Script Debugger,Companion.JS,在"IE選項-高階"裡取消禁用指令碼除錯。
多版本IE共存兩種方案:
IE7/8 + [url=http://www.my-debugbar.com/wiki/IETester/HomePage]IE Tester[/url] —— 大眾型配置,可以基本滿足日常需要。
[url=http://finalbuilds.edskes.net/iecollection.htm]IE6 + Internet Explorer Collection[/url] —— 在IE 6使用者佔絕對優勢以及IE 6神奇bug滿天飛的時代,我還是推薦這種方案,因為只有神奇的原裝IE 6,才能抵擋運營神奇的問題。另外如果還有其他機器可供支配的話,建議再裝個IE 8 + IE Tester,因為IE 8下的Developer Toolbar還是有很大改進的,除錯起來會方便一些。
以下三個軟體相對不重要些:
[url=http://www.box.net/shared/i9ipe3nxh2]HttpWatch[/url] —— http流檢視
[url=http://www.box.net/shared/qtdje57m5d]Instant Source[/url] —— 可檢視JS生成的原始碼
[url=http://www.box.net/shared/d361kjx8r8]NetLimiterPro[/url] —— 網速限制
參考手冊
[url=http://www.box.net/shared/botkpkrscf]XHTML、CSS & DOM W3C 手冊[/url] —— [url=http://lifesinger.org/]玉伯[/url]整理的版本,包含了W3C手冊以及其他有用的資料。

蘇昱的[url=http://assets.chencheng.org/resources/manual/css.chm]CSS中文手冊[/url]和[url=http://assets.chencheng.org/resources/manual/dom.chm]Dom中文手冊[/url]
[url=http://assets.chencheng.org/resources/manual/js.chm]JScript語言參考[/url]
[url=http://assets.chencheng.org/resources/manual/xml.chm]XML指南[/url]
[url=http://assets.chencheng.org/resources/manual/xmlhttp.chm]XMLHTTP參考手冊[/url]
[url=http://assets.chencheng.org/resources/manual/jquery-126-api.chm]jQuery 1.2.6 API[/url]和[url=http://assets.chencheng.org/resources/manual/jQuery-and-jQuery-UI-Reference-1.2.chm]jQuery and jQuery UI Reference 1.2[/url]
[url=http://assets.chencheng.org/resources/manual/apache_manual_2.2/index.html]Apache 2.2 中文版參考手冊線上版[/url]
[url=http://www.box.net/shared/dujtrpyf65]MySQL 5.1 參考手冊[/url] [url=http://assets.chencheng.org/resources/manual/mysql-manual-5.1-zh/index.html](線上版)[/url]
[url=http://www.box.net/shared/aaif34xiz7]PHP手冊[/url]
[url=http://developer.yahoo.com/yui/docs/assets/cheatsheets.zip]YUI Cheatsheet[/url]
[url=http://www.petefreitag.com/item/455.cfm]Cheat Sheet Roundup - Over 30 Cheatsheets for developers[/url]
[url=http://www.box.net/shared/30n9e5z3pf]23個Cheatsheet打包下載[/url]
批處理工具
[url=http://lifesinger.org/blog/wp-content/uploads/2008/10/TBCompressor_v2.4.zip]TBCompressor[/url] —— 淘寶UED的JS/CSS壓縮工具,詳見[url=http://lifesinger.org/blog/?p=464]玉伯的介紹[/url]
[url=http://assets.chencheng.org/resources/bat/pngOptimizer.zip]pngOptimizer[/url] —— png優化工具
[url=http://assets.chencheng.org/resources/bat/jpegTran.zip]jpegTran[/url] —— jpeg去冗餘meta工具
IDE及其他工具
[url=http://www.box.net/shared/utgl7vyl0u]Editplus v301 漢化版[/url]
[url=http://bbs.iusesvn.com/forum-7-1.html]Tortoise SVN[/url]
[url=http://www.box.net/shared/lnlr2yjbgj]移動版本的 Apache + PHP[/url] —— 灰常灰常好用,灰常灰常移動,見[url=http://www.gracecode.com/Archive/Display/2235]明城的說明[/url]

Bookmarklet(右鍵另存)
Firebug Lite —— [url=http://getfirebug.com/lite.html]官方介紹[/url]
Xray —— [url=http://www.westciv.com/xray/index.html]官方介紹[/url]
MRI —— [url=http://www.westciv.com/mri/]官方介紹[/url]
‘+ window.document.documentElement.outerHTML+ ”">檢視生成的原始碼,‘+ window.document.documentElement.outerHTML+ ”);})()">開啟新視窗檢視生成的原始碼 —— for IE
開發者社群及權威網站
[url=http://developer.mozilla.org/En]Mozilla Developer Center (MDC)[/url]
[url=http://developer.yahoo.com/]YAHOO! Developer Network (YDN)[/url]
[url=http://dev.opera.com/]Dev.Opera[/url]
[url=http://developer.apple.com/]Apple Developer Connection[/url]
[url=http://msdn.microsoft.com/zh-cn/default.aspx]MSDN[/url]
[url=http://www.ibm.com/developerworks/cn/web/]IBM Developers中國[/url] [url=http://www.ibm.com/developerworks/cn/web/wa-front/](Web 前端開發技術專題)[/url]
[url=http://webkit.org/]WebKit[/url]
[url=http://dev.aol.com/]AOL Developer Network[/url]
[url=http://www.slideshare.net/]SlideShare - Share PPT[/url] —— 線上PPT分享,資源豐富
[url=http://code.google.com/doctype/]Google Doctype[/url] —— Web開發人員的百科全書
[url=http://www.w3.org/]W3C[/url] ([url=http://www.w3c.org.hk/]香港[/url],[url=http://www.chinaw3c.org/]中國[/url])
[url=http://www.positioniseverything.net/]Position Is Everything[/url]
[url=http://www.htmldog.com/]HTML Dog[/url]
[url=http://zh.wikipedia.org/wiki/%E9%A6%96%E9%A1%B5]維基百科[/url]
推薦訂閱的部落格和網站(排名不分先後)
國外
內容聚合:[url=http://www.alistapart.com/]A List Apart[/url],[url=http://ajaxian.com/]Ajaxian[/url],[url=http://www.smashingmagazine.com/]Smashing Magazine[/url],[url=http://www.456bereastreet.com/]456 berea street[/url],[url=http://scriptandstyle.com/]Script & Style[/url],[url=http://www.cssglobe.com/]CSS Globe[/url],[url=http://css-tricks.com/]CSS-Tricks[/url],[url=http://www.sitepoint.com/]SitePoint[/url]
團隊Blog:[url=http://developer.yahoo.com/yui/]Yahoo! User Interface Library (YUI)[/url],[url=http://blogs.msdn.com/ie/default.aspx]IEBlog[/url]
個人Blog:[url=http://ejohn.org/]John Resig[/url],[url=http://www.quirksmode.org/]PPK: QuirksMode[/url],[url=http://www.crockford.com/]Douglas Crockford[/url],[url=http://dean.edwards.name/]Dean Edwards[/url],[url=http://nate.koechley.com/blog/]Nate Koechley[/url],[url=http://www.julienlecomte.net/blog/]Julien Lecomte[/url],[url=http://meyerweb.com/]Eric A. Meyer[/url],[url=http://www.andybudd.com/]Andy Budd[/url],[url=http://blog.stevenlevithan.com/]Steven Levithan[/url],[url=http://blog.hedgerwow.com/]HedgerWow[/url]
國內
內容聚合:[url=http://www.blueidea.com/]Blueidea[/url],[url=http://bbs.51js.com/]無憂指令碼[/url],[url=http://www.w3cn.org/]網頁設計師(W3CN)[/url],[url=http://www.ijavascript.cn/]JavaScript教程網[/url]
團隊Blog:[url=http://ued.taobao.com/]淘寶[/url],[url=http://ued.koubei.com/]口碑[/url],[url=http://www.aliued.com/]阿里巴巴國際站[/url],[url=http://www.aliued.cn/]阿里巴巴中文站[/url],[url=http://www.f-dev.com/]阿里巴巴中文站前端開發團隊(方凳)[/url],[url=http://ued.alimama.com/]阿里媽媽[/url],[url=http://ued.alipay.com/]支付寶[/url],[url=http://www.alisoftued.com/]阿里軟體[/url],[url=http://blog.19lou.com/?uid-10143366]19樓[/url],[url=http://www.9skyucd.com/]九天音樂[/url],[url=http://www.kdued.com/]金蝶與友商網[/url]
個人Blog,這裡列出的是原創並更新相對頻繁的部落格,如有遺漏,請告之(sorrycc#gmail.com):[url=http://www.planabc.net/]懌飛[/url],[url=http://www.gracecode.com/]手氣不錯[/url],[url=http://realazy.org/]Realazy[/url],[url=http://old9.blogsome.com/]old9[/url](需穿牆術),[url=http://quchao.com/]沙灘涼鞋(空幃)[/url],[url=http://lifesinger.org/]射鵰(玉伯)[/url],[url=http://woooh.com/]Aether[/url],[url=http://andymao.com/andy/]振之[/url],[url=http://www.aoao.org.cn/]嗷嗷[/url],[url=http://www.junchenwu.com/]JunChen[/url],[url=http://yuntian.cnblogs.com/]爆牙齒[/url],[url=http://dancewithnet.com/]秦歌[/url],[url=http://blog.360.yahoo.com/blog-sOW1QOA9crUyOdXFxOeK4xc-?cq=1]克軍[/url],[url=http://5key.net/blog/]5key[/url],[url=http://www.chencheng.org/blog/2008/10/25/f2e-manual/www.linxz.cn]小志[/url],[url=http://www.htmlcssjs.com/blog/]Rage(正淳)[/url],[url=http://www.macji.com/]麥雞[/url],[url=http://yy.mylovings.net/]雲烈[/url],[url=http://robertmao.com/]老冒[/url],[url=http://www.tblog.com.cn/]番茄紅了[/url],[url=http://www.joyqi.com/]Joyqi[/url],[url=http://www.v-sky.com/blog/]盧力[/url],[url=http://www.cssforest.org/blog/]CSS森林(Ghost)[/url],[url=http://www.twinsenliang.net/]Twinsen[/url],[url=http://blog.gulu77.com/]Gulu77[/url],[url=http://rlog.cn/]Rlog[/url],[url=http://dlog.org/]Dlog[/url],[url=http://www.zishu.cn/]子鼠[/url],[url=http://www.space007.com/]西風坊[/url] …

來自http://www.web600.net/html/editor/XHTMLCSS/201008244016.html#009

相關文章