AJAX調試技術 IE篇__ajax

     AJAX技術在WEB開發中是一種最常用的開發技術，因為具有的一些優秀的特點，成為廣大程式員優先使用的技術之一。AJAX可以在局部重新整理的情況下從服務端抓取資料，給使用者良好的體驗，而傳統的頁面重新整理則採用重新導向或者是轉寄的方式，需要整頁面的重新整理，在重新整理期間會出現一個空白頁。AJAX技術從誕生到現在已經變的相當穩定，同時也出現了很多開源架構，例如大名鼎鼎的jQuery，Ext JS等架構，這些架構的出現不僅可以很好的解決局部重新整理的問題，還有諸多好處，例如：瀏覽器特徵屏蔽，使用這些架構不用考慮瀏覽器安全色性的問題；快速開發功能介面，Ext JS提供了豐富的使用者控制項，使用這些控制項，大家可以快速的開發出所需的功能介面。

AJAX給程式員帶來諸多好處的同時，也給軟體的開發調試帶來了很多困難，軟體調試是軟體開發過程中的一把牛刀，用好這把牛刀，大家可以在開發過程中遊刃有餘的解決問題。本文主要講解如何利用瀏覽器的調試器來調試AJAX程式。

  1   使用IE的調試器調試AJAX程式

     在IE9以上的版本裡，已經內建了調試工具，IE9以下的版本，需要自行安裝，大家可以在百度上搜尋IE調試工具，自行下載，本文不在闡述。

瀏覽器調試工具可以為我們做很多事情，例如查看HTML代碼、查看資源的網路狀態、控制台、指令碼調試等功能，下面我們依次講解一下這些功能。按F12鍵，可以開啟IE調試工具。如下圖：

 

  1.1         HTML調試

    HTML選項卡可以查看HTML元素，任何顯示在介面中的HTML元素和隱藏元素都可以在這裡看，給調試HTML代碼帶來極大的方便，使用“單擊選擇元素”的小箭頭可以快速選和定位元素。

 

 

     下面我們用小箭頭來定位“消費專案管理”菜單，結果如下：

 

    

       在右側的小視窗中可以修改樣式，並且可以立即在瀏覽器中生效，用這種辦法調試樣式，可以不用更改代碼，待樣式調好後，再更改對應的代碼，省去了頻繁的修改代碼和發布代碼的麻煩。

  1.2         網路資源調試

     網路資源調試器是AJAX調試中非常重要的調試步驟，用好了網路資源調試器，可以快速定位服務端的問題，例如伺服器500異常，圖片無法下載（404），服務端逾時，效能測試等等問題。網路調試需要熟悉幾種常見的HTTP狀態，下面給出常見的HTTP狀態對照表：

 

200	請求已成功，請求所希望的回應標頭或資料體將隨此響應返回
304	文檔未改變
404	資源未找到
500	伺服器異常

 

下圖是網路調試視窗：

 

    

         AJAX使用的資料格式有兩種，一種是XML，一種是JSON，由於JSON是索引值對組成的數組，比XML的體積要小很多，傳輸速度更快，所以JSON數組在AJAX中的應用更為廣泛，我們可以使用網路調試工具查看JSON數組返回是正確，以http://localhost:8080/MCS/queryMenu這個URL為例，單擊這個URL，可以展開該URL的詳細資料，包括請求標題、請求本文、響應本文、Cookie、啟動器、計時資訊，將選擇卡切換到響應本文一欄，可以看到響應的JSON數組，這個JSON數組則是AJAX程式的資料來源。如下圖：

 

  1.3         指令碼調試

 

     AJAX的核心是Java Script，在編寫指令碼的過程中，通常會遇到各種各樣的問題，各種服務端語言例如Java、C#、C++等等語言都有自己的調試器，可以進行逐過程和逐語句的調試，為程式開發帶來了很大的方便，很多莫名其妙的問題，看一下堆棧瞬間就明白了，既然調試器在軟體開發中是如此的重要，那麼Java Script到底有沒有調試器呢。當然有啦，不過IE推出調試器比Firefox晚，IE6版本的調試器是很難用的，但後續的IE版本都有增強，到了IE9，調試器功能也可以和FireBug有的一比了，我想大概是因為Firefox是開放技術體系的原因，因為FireBug本身也是有網友編寫的開源軟體，而IE則是一直不開放源碼的，所以IE調試器一般都是由微軟官方推出，也許是微軟人力資源有限的原因，所以推出的調試器比市場其他瀏覽器要晚。由於Windows作業系統在中國是主流作業系統，所在大家在開發WEB程式時也是以IE作為主要瀏覽器，所以，WEB程式在IE瀏覽器上的相容性顯得尤為重要。IE的指令碼調試器和其他語言一樣，首先需要設定斷點。將調試器切換到指令碼選項卡，並在你需要調試的指令碼中設定一個斷點，雙擊代碼對應的行即可，這裡，我們對第32行代碼設定斷點，然後啟動調試，單擊某一個菜單後，程式進入調試狀態，並且以黃色背景高顯示，如下圖：

 

 

     

      大家可能會問了，如果My Code量很龐大，找起來很費勁怎麼辦。我們可以在代碼裡加上debugger關鍵字，debugger可以在代碼中打上一個斷點，如果需要打多個斷點，用多個debugger即可，我們來看一下，用debugger打斷點和在調試器中直接打斷點是一樣的效果。如下圖：

 

  1.4   控制台

      控制台的作用主要用來輸出錯誤資訊，任何的指令碼程式錯誤都會在控制台顯示出來，故控制台是調試指令碼程式重要的工具之一，我們也可以在控制台輸出自己的資訊，我想大部份程式員都喜歡用alert輸出調試資訊，其實這種辦法也有很不方便的地方，如果程式員在調試完程式後忘記刪除alert語句，而把代碼部署到了生產環境，會影響客戶體驗。所以最好的辦法是直接在控制台輸出，我們在指令碼中加入下列代碼，就可以在控制台中輸入自訂的調試資訊：

console.info("這是一個調試資訊");

 

控制台截圖：