軟體開發工具介紹之 6.Web開發工具

1.EditPlus

 無論是編寫xhtml頁面，還是css、js檔案，甚至隨筆記記這樣的事情，我都會使用EditPlus，感覺它不僅功能強大，更難得的是：綠色、輕量級、啟動速度快、穩定性高

1.1 設定檔範本

設定好EditPlus的設定檔，告別重複的體力勞動。如果我們經常建立一種檔案，而這種檔案總會包含一些重複的文字或者代碼的話，我們就可以建立模板，然後通過模板建立檔案。從而擺脫每次都要重複的體力勞動。

1.2 順手的側邊欄

側邊欄包含了“快速目錄路徑”和“快速剪貼簿”功能“快速剪貼簿”可以存放一些代碼片斷、常用文言等等文字。當你需要這些文字的時候，只要雙擊，就可以方便的添加到游標所在位置了。預設情況下會有一些html，css代碼。如果嫌多，可以建立一個自己最常用的“剪貼簿”庫。

1.3 華麗的自動完成功能
當你打一個“ua”字，然後按下空格，編輯器裡面就出現了右邊的代碼，而且滑鼠就停留在第一個href的雙引號之間。使用EditPlus的自動完成功能將會極大的提高你的工作效率。而且我們可以根據不同的檔案類型，建立不同的“自動完成”，例如，如果是xhtml檔案，打“b”+ 空格”，就是  ，而在css檔案中，“b”+ 空格”，就是 "border:1px solid red;"。非常的人性化。
你可以通過這樣的設定，來使用EditPlus的自動完成功能。

1.4 彩色的檔案，高亮文法檔案

很多的開發工具都有文法高亮顯示功能，EditPlus雖小，但是也有這個功能哦。和“自動完成”功能一樣，只要為不同的檔案類型指定“高亮文法”檔案即可。css、html等常用的檔案類型，EditPlus已經內建了高亮文法檔案。如果內建的高亮文法檔案沒有你需要的，你可以去EditPlus官方網站的檔案下載。

2.ColorPic

 一個免費的軟體，用於拾取顏色的，滑鼠移動到哪裡就拾取哪裡的顏色，可以對拾取的顏色分組，這樣我們就可以把需要的顏色都一次性拾取完，再慢慢的用了。
拾取顏色和重新拾取時都是用Ctrl + G 快速鍵.

3.FireBug、IEDevToolBar、IE開發人員工具、HttpWatch等

3.1 微軟的IEDevToolBar

這是一個免費的專門為Web開發人員製作的IE外掛程式，IE外掛程式IEDevToolBar可以協助我們分析網站的布局結構，有助於我們學習和分析頁面的CSS，其主要功能有：
1.以樹結構查看CodeDom，並查看每個Element屬性，可以使用滑鼠點擊選中Element，這個在我們製作和調試網頁時很有用；
2.產生圖片報表，就是將頁面上說有出現的圖片產生一份詳細的報表，這樣就省的我們自己去找圖片路徑和量圖片大小等等；
3.高亮顯示表格，表格單元，Div等的邊框，這個在我們調整布局時也是很有用；
4.頁面尺子，可以然你任意在頁面上度量長度，這個是大大的提高了我們的工作效率，不用為了量個長度而抓圖再用畫圖工具量。

官方站免費下載
http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

3.2 HttpWatch

 強大的網頁資料分析工具.整合在Internet Explorer工具列.包括網頁摘要.Cookies管理.緩衝管理.訊息頭髮送/接受.字元查詢.POST 資料和目錄管理功能.報告輸出。

官方站
http://www.httpwatch.com/download/
它有2個版本：
HttpWatch Basic Edition （免費的，有部分功能限制）
HttpWatch Professional Edition

4.IETester

IETester是一個非常棒的網頁設計師的必備工具,有了這個工具,就可以知道網頁在IE6,或者IE7,或者IE8的顯示情況、相容性，讓我們看一下辛苦作好的CSS樣式或網站版面是否可以在各個主要瀏覽器正常顯示。 IETester是以”分頁標籤”的方式，分別在不同的頁簽中顯示你所指定的IE瀏覽器版本的網頁瀏覽畫面。

5.指令碼壓縮

JavaScript和CSS壓縮的目的是在保持指令碼的執行效能的同時，減少資料傳遞的位元組數（可以通過減小原始檔案，也可以利用gzip。大多數產品級的網路伺服器都把gzip作為HTTP協議的一部分）。

http://dean.edwards.name/packer/

YUI compressor（http://developer.yahoo.com/yui/compressor/），一款 jQuery官方推薦的壓縮指令碼的工具。