做設計和前臺開發三年了，整理一下好的經驗和工具共享給各位來我部落格的網友，謝謝光臨我的部落格

=================================2009年1月22日更新==========================

HttpFox 抓包工具【FF外掛】

類似IE的HttpWatch 或 IEInspector ，使用方法也差不多，

漂亮、免費的取色器 Adesclrpicker

實用方便，還有取色記憶功能，

=================================2009年1月8日更新==========================

前端開發桌面終極工具（FastStone Capture）推薦

主要用於截圖，截圖，量尺寸，取色。

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

介紹2款前端小工具【取色工具和量距離工具】

1.取色工具——TakeColor

2.量距離工具（畫素）

=================================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相容）

雖然以前我寫過IE6、IE7、IE8共存的解決方案，但是看到IETester這個軟體以後那些都已經沒有意義了（那些辦法副作用比較大，而且實現起來有些難度）。使用IETester能夠較好的解決，測試網頁相容性的多IE版本的需求。暫時已經支援IE5.5——IE8beta1，我想這已經足夠了。還在苦苦找尋IE6和IE7共存或者IE7和IE8共存的朋友，可以試試這個軟體。當然這個軟體也不是萬能的，在最後，官方非常厚道的給出了暫時存在的重要bug列表。

推薦理由：

1同時擁有IE 5.5、IE6、IE7、IE8

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

=================================2008年4月28日更新==========================

      做我們這行搜尋少不了，碰到有什麼問題就要馬上google或者百度一下，找一些相關的資料。讀書那會有問題就跑圖書館，工作之後就用搜索，不過有些時候google搜不到，又得用百度，要搜圖片什麼的還要點來點去麻煩，做這行效率是很關鍵的，提高效率、節約生命嘛！
發現一個很好的網站：百搜吧。輸入一次關鍵字能同時搜尋百度、谷歌、雅虎三大搜索引擎及國內知名網站和專業網站的資源，具備根據您自己的需要自定義搜尋引擎偏好，隨時切換網頁、電影、新聞、娛樂、影象、音樂、視訊、論壇、部落格、詞典等專業搜尋，儲存您的搜尋歷史記錄，中英文介面切換等人性化功能...

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

二十二 Httpwatch
資料分析工具,頭訊息接受/傳送的檢視,POST資料檢視.等等
http://www.httpwatch.com

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

十四 JavaScript 壓縮工具
 這程式是由Mike Hall寫的，JavaScript的壓縮不是為了保護程式碼而壓縮，而是壓縮後的js程式碼檔案可以小一倍甚至多倍，從而使這個js程式碼快速的下載到客戶端，特別js檔案較大時速度效果非常明顯．

使用方法：
  使用下面的表單,你可以濃縮JavaScript程式碼.只用將任何指令碼程式碼貼上到輸入的文字框,壓下 '壓縮' 按鈕,那濃縮的版本就出現在 '輸出' 裡. 然後你可以使用 '全選' 按鈕,快速選中'輸出'裡的程式碼,剪下貼上到一個新的原始碼檔案.

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

十三 web開發利器Aptana

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

十二 Javascrīpt開發工具大集合

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

十— 前端開發工具箱——抓色工具(ColorPic)

備註：綠色，解壓即可使用。

特點：
有方案的概念，可以建立多組方案。
強大的色盤功能，多種方式可以選擇。
吸色時，區域性放大（放大比率可以自己調整），方便抓取細微部分的顏色。
使用Ctrl+G快捷鍵取色。

截圖：

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

二、測試瀏覽器——同時擁有IE7、IE6、IE5.5

自從IE7出來，IE6和IE7的測試就成了問題，同一臺電腦不能同時安裝IE7和IE6，前臺開發長久的痛啊！

哈哈，皇天不負有心人，終於有解決辦法了，碼頭現在提供IE6破解綠色版下載，國外網站下載的，從ie的第一個版本到IE6都有的，現在提供IE6和IE5.5的破解綠色版下載

IE6的破解綠色版點選下載：點選下載此檔案

IE5.5破解綠色版點選下載：點選下載此檔案

三、XHTML、CSS、標準程式碼檢測

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

另：建議先使用DreamWeaver或vs2008本地檢測一下；

四、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
官方網站： http://msdn.microsoft.com/vstudio

免責宣告：

下載地址為90天試用版（官方正式簡體中文），只要按上面的說明更換CDKey即可完美升級為正式版。7個分卷壓縮包均需下載才能正常安裝，包含MSDN。前面6個壓縮包均為700M，最後一個壓縮包為142M

VS2008下載頁面：  分卷壓縮包1   分卷壓縮包2    壓縮包3    壓縮包4    壓縮包5    壓縮包6    壓縮包7
 

　VS2008破解方法非常簡單，在開始>設定>控制面版>新增或刪除程式>解除安裝vs.net2008＞出現解除安裝介面＞點選Next＞輸入上面CD-key ->出現成功畫面即可完美將試用版升級成為正式版。

VS2008正式版序列號CDKEY：PYHYP-WXB3B-B2CCM-V9DX9-VDY8T

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

VS 2008不再是程式設計師專用工具，VS 2008可以非常完美地支援JavaScript和ASP.NET AJAX的智慧感知和除錯。.NET 3.5內建了ASP.NET AJAX，並且UpdatePanel終於可以支援WebPart了。

VS2008 beta2簡體中文版下載：

下載地址：
 TFS: http://www.microsoft.com/downloads/details.aspx?FamilyId=053E83D0-DEB4-4EBB-B4C8-CBFFE928B4AA&displaylang=zh-cn

VSTS: http://www.microsoft.com/downloads/details.aspx?FamilyId=428C076F-E3EF-4290-9FF4-F6FD8F180B7D&displaylang=zh-cn

五、火狐外掛

前臺開發我認為必裝的火狐外掛

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.還有好的話請大家留言，我更新。。。

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

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

我們在寫CSS樣式的時候通常會根據自己的一些習慣來寫，比如有些時候不會使用樣式縮寫，樣式格式隨意，大小寫不分（另存下來的樣式是大寫的）等等；

晚上有一種CSS整形工具叫CSSTidy 1.2大家可以使用一下，可以優化你寫的樣式，特備是節省位元組方面效果顯著；

點選進入CSS整形工具CSSTidy 1.2

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

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

九、參看手冊

JavaScript參考手冊

說明：JavaScrip必備寶典

2.CSS參考手冊

說明：蘇沈小雨css2.0中文手冊，頁面開發人員必備手冊

十、Beyond Compare v2.52 Build 252 簡體中文版

說明：Beyond Compare 是一款不可多得的專業級的資料夾和檔案對比工具。使用他可以很方便的對比出兩個資料夾或者檔案的不同之處。並把相差的每一個位元組用顏色加以表示，檢視方便。並且支援多種規則對比。對軟體漢化者來說，這絕對是一款不可多得的工具。

註冊碼：
urKH3mXZVDiTNgCKQnFnfvaQB5tTtahvtUr5HqwT9YZu50+b3T9bkzYKwKsfjhhiDgzR9Dr5qbmJ2EmNzYfSAptuo90Ga7NTytXRVPnH-nTye3q+vgdqSmegWMmJmaU9VsqLQNrNfxx1QLBNDdNpUBxrcdm6TPbh8-NYzpYCJmQXJOkTOb7MgovRGiJLLuTN7mpUKRcaT8uxfx1ej+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，它提供了一個在易用性、效能居於同等水平上的獨特的開發除錯環境。

下載，基礎教程：http://www.css88.com/article.asp?id=448