如何調試網頁和javaScript

您不會還在用不斷的alert來調試你的js代碼吧

來介紹一下我使用調試網頁的工具吧

對於IE

    指令碼調試器使用office內建或.net的指令碼調試器就可以了(如果沒有去微軟下載簡板)，你要做的只是我在上一篇中介紹的方法開啟指令碼調試（修改ie工具- -選項- -進階中的2個預設設定： 去掉“禁用指令碼提示”的選擇，勾選“顯示每個指令碼的錯誤通知”）。然後在你想進入調試的js中的地方加入一句話“debugger；”即可在運行到這句話時進入調試環境；當網頁出錯時，會彈出對話方塊問你是否調試，點擊“是”也可以進入指令碼調試。調試進入的是.net的調試環境，可以設斷點，步進跟蹤等等，可以查看變數內容，變數重新賦值，查看呼叫堆疊等等，調試自己開發的網頁那是相當的好用

    HttpWatch是一個監測瀏覽器和伺服器間http協議互動內容的強大工具，上網找個試用版吧，有了他所有的互動都無所遁形

對於FireFox

    firebug是個絕好的外掛程式，設定斷點，查看dom，點擊網頁定位代碼，在多js檔案內尋找方法定義等等等等，試試吧，好到你無法拒絕。相對與IE的指令碼調試器，firebug的好處是可以方便的為別人的網站中的js設定斷點，然後進行跟蹤，轉位仁兄的詳細介紹。js本身是透明的，這個算是偷學別人js的利器

    Live HTTP Headers是個類似HttpWatch的外掛程式，但是沒有那麼功能強大，如果你訪問的網站不是只支援firefox不支援ie，那你還是用HttpWatch吧

    有了firebug之後我似乎不再需要別的了，沒錯。不過還有幾個外掛程式還是很好用的，反正免費不如下來用用可能對你胃口

    View Source Chart老牌外掛程式了，可以方便的查看頁面結構

    jsView 方便的查看頁面引用的所有js和css檔案，對於含有動態js的網頁的js查看很有協助

    IE Tab 提供切換到IE的捷徑，即方便對比也可免去在IE和FF間複製網址這樣的無趣的事

    羅嗦一句，FF中工具->附加軟體->擷取擴充，在開啟頁面搜尋方塊中搜上面這些外掛程式就可以下載

    還有就是 FireFox2內建了Dom查看器， 在安裝時候選擇自訂安裝，就可以選擇安裝Dom查看器，然後即可從工具菜單中開啟。Dom查看器展示當前頁面清晰的DomTree結構，選中某個葉子結 點，可以查看他支援的屬性與方法。這樣可以方便的知道有些IE常用的屬性方法，在FireFox中有沒有相應的方法，方法名是否一樣。誰讓我沒有找到 FireFox的HTML和JS手冊呢

對於Opera

    Opera內建DEV工具，通過工具->進階->開發人員工具開啟。類似Dom查看器和jsView的結合體，功能一般般，試試看就知道了。只是沒有設定斷點和變數Watch的功能，不爽。不過Opera和FireFox很像了，基本上FF跑的通的Opera也行。前幾天逼的我用yui開發了一個跨瀏覽器的Watch工具  

常用的手冊

   中文的《DHTML手冊》和中文的《JScript手冊》都是chm格式的，大家上網找找吧，都是針對IE的手冊。FF沒有合適的中文手冊，開發基本靠猜，大家推薦下

    懶了，沒貼圖。如果有什麼說的不清楚的給我留言