前端開發必備調試工具（Chrome的F12自帶的功能和firebug插件差很少）

前端開發必備調試工具（Chrome的F12自帶的功能和firebug插件差很少）

1、總結

Chrome的F12自帶的功能和firebug插件差很少

 

2、前端開發必備調試工具

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

3、firefox網頁調試插件

1.firefox插件Firebug

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

從事了數年的Web開發工做，愈來愈以爲如今對WEB開發有了更高的要求。要寫出漂亮的HTML代碼；要編寫精緻的CSS樣式表展現每一個頁面模塊；要調試javascript給頁面增長一些更活潑的要素；要使用Ajax給用戶帶來更好的體驗。一個優秀的WEB開發人員須要顧及更多層面，才能交出一份一樣優秀的做業。爲幫助廣大正處於Web2.0洪流中的開發人員，在這裏爲你們介紹一款輕巧靈活的輔助開發工具。(轉載請註明出處：WEB前端開發 http://www.css88.com/)
介紹下載請參見： http://www.css88.com/archives/130

 

2.firefox插件Web Developer 1.1.6(最新版本，中文版)

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

介紹下載請參見：http://www.css88.com/archives/417

 

3.firefox插件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.(轉載請註明出處：http://www.css88.com)
Venkman相關下載：https://addons.mozilla.org/zh-CN/firefox/addon/216

 

4、ie網頁調試插件

 

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

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

SuperPreview 是微軟將推出的 Expression Web 3 的一部分，主要用於頁面的調試，目前的 Expression Web SuperPreview 容許用戶對比他們的站點在 IE 6 與 IE 7, IE 8 中的外觀，而在未來的完整版中，還將支持 Firefox, Safari, Google Chrome（可能）以及更多瀏覽器;
介紹下載請參見：http://www.css88.com/archives/760

 

2.Internet Explorer Collection讓你同時擁有IE1-IE8
主要用於Internet Explorer 瀏覽器（IE1-IE8）各個版本的頁面呈現測試；推薦指數：
Internet Explorer Collection可使你的計算機同時安裝IE1-IE8，不過這個工具對vista系統支持不是很好，最近還有一個發現，Internet Explorer Collection和IE8正式版彷佛有衝突，IE8正式版的下拉框會不能使用，提示「阻止了什麼彈出窗口…」,嘗試了幾百次沒法解決，最後我卸載了Internet Explorer Collection，這個問題就再也沒出現過。(轉載請註明出處：http://www.css88.com)
介紹下載請參見：http://www.css88.com/archives/687

 

3.IE Developer Toolbar及IE8 開發人員工具

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

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

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

 

4.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上調試工具不足的問題。(轉載請註明出處：http://www.css88.com)
介紹下載請參見：http://www.css88.com/archives/967

 

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

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

雖然之前我寫過IE六、IE七、IE8共存的解決方案，可是看到IETester這個軟件之後那些都已經沒有意義了（那些辦法反作用比較大，並且實現起來有些難度）。使用IETester可以較好的解決，測試網頁兼容性的多IE版本的需求。暫時已經支持IE5.5——IE8beta1，我想這已經足夠了。還在苦苦找尋IE6和IE7共存或者IE7和IE8共存的朋友，能夠試試這個軟件。固然這個軟件也不是萬能的，在最後，官方很是厚道的給出了暫時存在的重要bug列表。(轉載請註明出處：http://www.css88.com)
介紹下載請參見：http://www.css88.com/archives/345和http://www.css88.com/archives/564

 

6.前端調試利器DebugBar

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

前端調試工具備不少，好比FireFox firebug, FireFox Web Developer, DOM Inspector,遨遊的PageView，IE WebDeveloper V2，還有IE8自帶的開發工具 等等，這裏我再推薦一個DebugBar；
你們確定都知道ieTester(點擊查看ieTester相關信息),你們都用ieTester來測試各個IE版本的頁面兼容性，其實新版的ieTester(點擊下載目前最新版的ieTester v0.3.2 ）還有一個很強大的頁面調試插件：DebugBar。(轉載請註明出處：http://www.css88.com)
介紹下載請參見：http://www.css88.com/archives/785

 

7.用vs2008調試Javacscript

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

面對一大段的JavaScript腳本，之前老是會很頭疼，找不到調試這些代碼的方法。若是出現什麼錯誤或異常，老是要從頭分析，而後插入不少Alert()，調試起來很麻煩。
Visual Studio 2008中JavaScript所具備的另一個特性，是它提供了更增強大的JavaScript調試功能，這使得JavaScript的使用及構建AJAX應用都變得容易不少。一樣，這項功能在免費的Visual Web Developer Express版本中和Visual Studio中都具備。(轉載請註明出處：http://www.css88.com)
介紹下載請參見：http://www.css88.com/archives/982

 

5、其餘調試工具

 

1.用Aptana調試JavaScript教程

主要用於js的調試和各個瀏覽器；推薦指數：

1. 你必須安裝firefox瀏覽器；

2. 到http://support.aptana.com/asap/browse/STU-1769 下載並安裝aptanadebugger 及 firebug；這兩個都是firefox插件；這樣咱們就能夠調試腳本了。

介紹下載請參見： http://www.css88.com/archives/685

2.Opera Developer Tools
Opera下的DOM,CSS查看工具,相似FireBug.
http://dev.opera.com/articles/view/opera-developer-tools/
3.webkit
Safari下的開發調試工具
http://nightly.webkit.org/