天天看點

《JavaScript精粹(修訂版)》——1.10 腳本調試

本節書摘來自異步社群《javascript精粹(修訂版)》一書中的第1章,第1.10節,作者:【英】edwards, j. , 【澳】adams, c.著,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

調試是一個查錯改錯的過程。絕大多數浏覽器擁有内建的報告錯誤的功能,還有一些外部的調試工具也值得關注。

1.10.1 了解浏覽器内建的錯誤報告

opera、mozilla浏覽器(例如firefox)以及internet explorer都擁有很好的内建的錯誤報告功能,不過opera和mozilla的調試工具最為有用。

(1)opera。 通過菜單tools→advanced→javascript console可以打開javascript控制台。也可以把它設定為遇到錯誤的時候自動打開,方法是依次選擇tools→preferences→advanced→content菜單項,單擊javascript選項按鈕,打開一個對話框,然後選中open javascript console on error選項。

(2)firefox和其他的mozilla浏覽器。通過菜單tools→javascript console打開javascript控制台。

(3)internet explorer for windows。依次選擇tools→internet options→advanced,然後取消disable script debugging選項,再選中display a notification about every script error選項。這樣,每次發生錯誤就會彈出一個對話框。

(4)internet explorer for mac。 依次選擇explorer→preference→web browser→web content菜單項,然後選中show scripting error alerts選項。

safari在預設情況下是不包括錯誤報告的,不過新版本有了一個“隐藏”的調試菜單,包括一個javascript控制台,可以通過如下的終端指令來激活1:

<code>$ defaults write com.apple.safari includedebugmenu -bool true</code>

也可以使用一種叫做safari enhancer2的擴充,這種擴充包含了一個選項,可以将javascript錯誤資訊輸出到mac os的控制台;但是,這些資訊常常都沒太大用處。

了解不同浏覽器報告的錯誤資訊需要一點練習,因為每種浏覽器給出的資訊都不相同。這裡給出一個例子——一個錯誤類型的函數調用:

firefox給出了非常簡要但卻很準确的報告,包括了發生錯誤的行号以及具體描述,如圖1.1所示。

如圖1.2所示,opera給出了一個非常詳細的報告,包括産生錯誤的回溯資訊和發生錯誤的行号,以及具體描述。

《JavaScript精粹(修訂版)》——1.10 腳本調試

回溯資訊有助于定位由别的代碼引發的錯誤,例如,事件處理者調用一個函數,該函數再調用第二個函數,在這個位置發生了錯誤。opera的控制台能夠回溯出調用過程并找到錯誤最初發生時的函數調用或事件處理。

internet explorer給出了非常基本的資訊,如圖1.3所示。它提供了發生錯誤的行号(不過可能與真實的錯誤位置有偏差)3,還有一個很概括的錯誤類型描述,但是卻沒有指出具體的錯誤。

《JavaScript精粹(修訂版)》——1.10 腳本調試

我對internet explorer給出的很簡略的錯誤報告并沒有太多的抱怨,至少比沒有好,起碼我知道有錯誤發生了。

1.10.2 使用alert

分析錯誤的時候,使用alert函數是一種非常有用的方法,可以在任何位置用它來顯示對象或者變量的值,看是否是您所期望的值。例如,如果有一個有很多條件分支的函數,可以在每個分支使用alert,看看到底哪條分支被執行了:

檔案:debugging-dialogs.js

也許傳入的years根本就不是一個數字,不像函數期望的那樣。可以在這段代碼的開頭加入一個alert,看看究竟什麼類型的變量被傳了進來:

從理論上說,可以用alert對話框顯示任意多的資訊,雖然一個非常長的串會使得彈出的對話框非常寬,以至于超出了螢幕視窗的限制而被截斷。可以給輸出的資訊加上換行符“n”來避免這種情況。

1.10.3 使用try-catch

try-catch具有令人難以置信的力量,可以做某種嘗試,然後就能夠處理可能發生的任何錯誤了。最基本的形式如下:

檔案:debugging-trycatch.js (excerpt)

如果無法确定哪裡發生了錯誤,可以用一個try-catch将一大塊代碼包起來,并且處理最可能的錯誤,然後一點點縮小包圍圈。例如,可以将一個函數的部分包在try語句中,然後看看哪裡發生了錯誤。然後将嫌疑代碼再分割,在适當的位置使用try,這個過程持續下去,直到鎖定出問題的那一行。

catch有一個參數(在這個例子中将它命名為err)是用來接收錯誤對象的,我們可以通過檢查這個對象的屬性,例如名字和資訊,來得到這個錯誤的具體細節。

通常,我會用一個for-in語句來周遊整個對象,看看它究竟包含了什麼資訊:

1.10.4 向頁面和視窗中寫入資料

如果在調試的時候需要檢查很多資料,或者正在處理的資料有着很複雜的格式,則最好直接把資料寫入一個頁面或者一個彈出的視窗中,而不需要用許多alert對話框。如果檢查的是循環中的資料,這樣也避免了産生無數個對話框,要知道,這些對話框最後還得一個一個手工去關閉,這是非常麻煩的。

針對這些情況,可以使用元素的innerhtml屬性,将資料寫入頁面中。下面的例子是通過使用一個數組的内容建立一個清單,然後将它寫入test div中:

檔案:debugging-writing.js (excerpt)

如果在頁面中沒有足夠的和友善的地方來顯示資料,也可以将資料寫入彈出對話框中:

您可以以任何自己喜歡的格式輸出資料,隻要那種輸出格式便于找到程式中的錯誤即可。

如果需要檢查的資料比較少,可以用一種更簡單的辦法來輸出資料,即把資料直接寫入标題元素中:

<code>document.title = '0 = ' + data[0];</code>

最後在用這種方法檢查那種持續和快速變化的資料的時候,特别有用。例如,由setinterval函數(這是一個異步的計時器,将在第14章詳細介紹)處理的值。

1.10.5 使用外部調試器

下面推薦兩個調試器:

 venkman for mozilla and firefox4;

 microsoft script debugger for windows internet explorer5。

外部調試器在分析代碼的時候能夠提供更多的細節,比浏覽器中内建的調試器的能力要強大許多。外部調試器可以在特定的點停止運作,也可以觀察屬性的值,這樣就可以弄清楚屬性的變化情況。它們還提供單步執行代碼的能力,這樣,那些難于分離檢查的錯誤或者提示資訊比較模糊的錯誤就可以更加容易定位。

外部調試器是比較複雜的軟體,開發者們要想正确地使用這些軟體,還需要花一些時間學習。它們對于尋找邏輯錯誤非常有用,作為學習javascript的工具也有其價值,不過它們對于浏覽器的相容性問題無能為力,隻有浏覽器的調試器支援的bug,用它們來調試才有意義。

繼續閱讀