Web前端開發必備工具推薦

  http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/無論你作前端開發仍是網頁重構，前端工具都起着很是重要的做用，這裏向你們推薦一些優秀，且被廣爲用之的前端開發工具。下面主要爲你們

推薦的是輔助開發工具和網頁調試工具。

1.前端開發必備工具之輔助開發工具篇

在這裏推薦一些前端開發中能夠是你提升開發效率的小工具，既小巧又方便；

1、截圖，取色，量尺寸，屏幕錄製工具

• FastStone Capture

主要用途：截圖，取色，量尺寸，屏幕錄製工具；推薦指數：***。此外你們還能夠考慮取色器 Adesclrpicker，TakeColor

FastStone Capture是一款靈活簡單的屏幕抓圖軟件，取色、放大鏡、 標尺、 抓圖、 截圖、截圖、 屏幕錄製所有搞定。它能夠抓取某個窗口或者對象的圖片，也能夠全屏或者以矩形模式抓圖，甚至能夠按照手繪的任意形狀抓圖。另外它還支持浮動條、熱鍵、調整 大小、剪裁、文字註釋、打印以及郵件發送等功能。支持包括BMP、JPEG、JPEG 2000、GIF、PNG、PCX、TIFF、WMF、ICO和TGA在內的全部主流圖片格式，其獨有的光滑和毛刺處理技術讓圖片更加清晰，提供縮放、旋 轉、減切、顏色調整功能。只要點點鼠標就能隨心抓取屏幕上的任何東西，支持拖放，能夠直接從系統、瀏覽器或其餘程序中導入圖片，收藏夾功能讓你能更好的收 集更多精彩圖片。

FastStone Capture還集成了取色，放大鏡，標尺（能夠量出元素的寬高），這對前端開發來講至關的有用，方便。FastStone Capture還有簡單的圖片編輯功能，並能直接複製圖像粘貼到Photoshop中，很是方便。

2、看圖軟件

• ACDSee3.1美化版和PicaView插件

主要用途：圖片及圖片屬性瀏覽；推薦指數：

ACDSee3.1 SR-1，一種速度最快、功能最強大，同時使用也最方便的 Windows 圖像查看程序！ACDSee 是諸多工具的集成體。全功能圖像查看程序能夠較高的質量快速顯示圖像。圖像瀏覽器可用於高效查找圖像並對其加以組織。ACDSee 還提供了幾種圖像處理功能，包括便利的相片加強程序。ACDSee3.1 SR1自帶了PicaView，就是用鼠標右鍵直接預覽圖片的軟件，能夠方便的瀏覽圖片及圖片屬性。

2.前端開發必備工具之網頁調試工具篇

在前端開發中咱們常常會要調試頁面，主要html、css調試和js調試，這裏整理一些工具：

1、firefox網頁調試插件

.firefox插件Firebug

主要用於html、css的調試和js調試；推薦指數：*****

從事了數年的Web開發工做，愈來愈以爲如今對WEB開發有了更高的要求。要寫出漂亮的HTML代碼；要編寫精緻的CSS樣式表展現每一個頁面模塊；要調試javascript給頁面增長一些更活潑的要素；要使用Ajax給用戶帶來更好的體驗。一個優秀的WEB開發人員一定會收藏這個Firebug插件。  

 

firefox插件Web Developer 1.1.6

 

主要用於html、css、js的查看和編輯；推薦指數：Firefox 上開發和調試web站點的不二之選。Web developer toolbar包含了一系列工具，從cookie管理到CSS調試，從導航線到屏幕標尺，功能簡直是多得說不完。僅次於Firebug的網頁開發設計者工 具。功能衆多並且強勁。看着這使人眼花繚亂的插件設置窗口，就能一窺它的強大。推薦網頁開發者和網頁設計者使用，可以幫助你方便的對頁面進行調整和完善;

fire

fox插件JavaScript Debugger Venkman：

主要用於JavaScript調試；推薦指數：*****

一個基於Mozilla的瀏覽器的JavaScript調試環境，是Mozilla瀏覽器的一個擴展。Venkman基於Mozilla JavaScript調試API（js/jsd），js/jsd API 構成了 Netscape JavaScript Debugger 1.1的基礎，Netscape瀏覽器4.x系統都提供了這個調試工具。Venkman是目前比較流行的JavaScript調試工具。強烈推薦這個剛下載了一個Mozilla免費調試器 JavaScript Debugger。這個調試器的前身爲Netscape的JavaScript調試器，它是Mozilla的一個附加產品。Venkman JavaScript調試器既是一個圖形，也是一個控制檯調試器。下載並安裝Venkman JavaScript調試器後，就能夠經過「工具|Web開發|JavaScript調試器」菜單啓動它。這個附加產品容許你查看和調試位於源文件或網頁中的JavaScript.

Venkman相關下載：https://addons.mozilla.org/zh-CN/firefox/addon/216

2、ie網頁調試插件

SuperPreview微軟的網頁開發調試利器

主要用於html、css的調試和各個瀏覽器（目前只能針對IE6-IE8）的頁面呈現測試；推薦指數：****

SuperPreview 是微軟將推出的 Expression Web 3 的一部分，主要用於頁面的調試，目前的 Expression Web SuperPreview 容許用戶對比他們的站點在 IE 6 與 IE 7， IE 8 中的外觀，而在未來的完整版中，還將支持 Firefox， Safari， Google Chrome（可能）以及更多瀏覽器.。

Internet Explorer Collection讓你同時擁有IE1-IE8

主要用於Internet Explorer 瀏覽器（IE1-IE8）各個版本的頁面呈現測試；推薦指數：***

Internet Explorer Collection可使你的計算機同時安裝IE1-IE8，不過這個工具對vista系統支持不是很好。

IE Developer Toolbar及IE8 開發人員工具

主要用於html、css的調試和js調試；推薦指數：***

雖然這玩意改了時髦的名字，可是卻也不是什麼新玩意，它的前身是 「IEdevtoolbar」。可是，之前只是IE的一個插件而已。而在IE8中，瀏覽器已經自動集成了這玩意，不只改了個有點土鱉的名字，並且功能也加 強了不少。開發人員工具在IE8的工具菜單下，或者直接點擊F12快捷鍵也能夠呼叫出來。

微軟的英特網探索者開發工具條是IE上最好的DOM檢查和CSS調試工具。因爲IE具備高市 場佔有率而又在整個渲染模型上充滿缺陷（好比臭名昭著的hasLayout邊距重疊BUG），調試IE是web開發必不可少的步驟——沒有這個工具 條，IE的調試將會成爲一場噩夢。雖然IE Developer Toolbar要比Firebug稍微弱智一點，不過他至少能幫你馴服IE這頭怪獸。

.IE下的調試工具IE WebDeveloper

主要用於html、css的調試和js調試；推薦指數：****

IE WebDeveloper可讓你檢查和編輯你的HTML DOM， 顯示錯誤信息， 日誌信息， 顯示網站源代碼， 監視DHTML事件和HTTP流量。若是你是一個開發人員或設計人員， 但日常又喜歡使用IE， 那IE webdeveloper是個不錯的選擇。它的功能能夠和火狐下的Firebug相媲美，甚至有些功能還強於Firebug,IE WebDeveloper容許直接地在瀏覽器窗口中瀏覽、傳輸和更新HTML DOM。該軟件能夠實時分析網頁而且顯示爲一種容許你察看錶格風格、Javascript腳本，表格以及其它網頁元素的樹形風格。該軟件還能夠在瀏覽器中交互式地突出顯示被選擇的網頁元素，所以你能夠在實際網頁中定位其代碼。 查看style元素，定位div等等。且支持一鍵w3c檢查（包括HTML/XHTML/CSS/Javascript tutorial等）。雖然用起來不如Firebug那麼駕輕就熟，可是畢竟解決了咱們在ie上調試工具不足的問題。

IETester-同時擁有IE六、IE七、IE8（Vista兼容）

主要用於Internet Explorer 瀏覽器各個版本的頁面呈現測試；推薦指數：*****

使用IETester可以較好的解決，測試網頁兼容性的多IE版本的需求。暫時已經支持IE5.5——IE8beta1，我想這已經足夠了。還在苦苦找尋IE6和IE7共存或者IE7和IE8共存的朋友，能夠試試這個軟件。

前端調試利器DebugBar

主要用於html、css的調試和js調試；推薦指數：****

這裏我再推薦一個DebugBar；你們確定都知道ieTester，你們都用ieTester來測試各個IE版本的頁面兼容性，其實新版的ieTester（點擊下載目前最新版的ieTester v0.3.2 ）還有一個很強大的頁面調試插件：DebugBar。

用vs2008調試Javacscript

主要用於js調試；推薦指數：****

面對一大段的JavaScript腳本，之前老是會很頭疼，找不到調試這些代碼的方法。若是出現什麼錯誤或異常，老是要從頭分析，而後插入不少Alert（），調試起來很麻煩。Visual Studio 2008中JavaScript所具備的另一個特性，是它提供了更增強大的JavaScript調試功能，這使得JavaScript的使用及構建AJAX應用都變得容易不少。一樣，這項功能在免費的Visual Web Developer Express版本中和Visual Studio中都具備。