如何在頁面中調(diào)試JavaScript
發(fā)表時間:2024-06-04 來源:明輝站整理相關(guān)軟件相關(guān)文章人氣:
[摘要]插入 alert 進入代碼是最常見的方式,可以提示變量的值、類型,函數(shù)參數(shù),對象屬性。如果你用分支代碼以支持分別做不同的事,你可以使用 confirm 來強制執(zhí)行指定的分支功能。如果你想能夠剪切粘貼結(jié)果可使用 prompt。 要想得到更詳細(xì)的錯誤報告你可以使用 window.onerror 或 ...
插入 alert 進入代碼是最常見的方式,可以提示變量的值、類型,函數(shù)參數(shù),對象屬性。如果你用分支代碼以支持分別做不同的事,你可以使用 confirm 來強制執(zhí)行指定的分支功能。如果你想能夠剪切粘貼結(jié)果可使用 prompt。
要想得到更詳細(xì)的錯誤報告你可以使用 window.onerror 或 try..catch 語句。這會讓代碼直接運行,不會因某個錯誤而終止掛起,從而在代碼執(zhí)行完成后報告出所有的錯誤。
有些錯誤在我們不知不覺中進入我們的代碼,并且難于發(fā)現(xiàn)。我們要嚴(yán)格遵守代碼約定,如用分號顯式地結(jié)束語句而不是用分號插入;總是使用花括號把控制結(jié)構(gòu)括起來如 if, if..else, switch, while, do..while, for, for..in 語句; 使用圓括號來表示優(yōu)先而不是靠運算符本身的優(yōu)先等組;使用統(tǒng)一的詳細(xì)的命名規(guī)則;使用統(tǒng)一的代碼縮進規(guī)則讓源碼更易讀;使用顯式的類型聲明避免自動類型或者采別的方式達(dá)到同樣效果;對于不同的瀏覽器有些簡便的方式(特別是 ie),盡量使用符合標(biāo)準(zhǔn)語法的代碼……。通過以上方式減少這些難以發(fā)現(xiàn)的錯誤產(chǎn)生。
可以通過 js lint來運行代碼,它可以檢測某些潛在的錯誤。
以上是我們通過代碼本身做的事。下面我們看看在瀏覽器中代碼的檢測
使用多個不同類型的瀏覽器測試你開發(fā)的角本。在windows環(huán)境中,至少要用到 ie6w、op7以及moz。在mac機中,要至少用到 saf、op7、ie5m和moz。如果存在代碼在一個或多個瀏覽器中不起作用,要看看換些不同的代碼能否解決。如果還不行,就要根據(jù)不同瀏覽器做一個分支執(zhí)行代碼。
在 ie中一定要啟用錯誤報告。如果使用的是 windows,可以利用 Microsoft Script Debugger。如果需跟蹤一個錯誤,你可以利用角本中的 debugger 關(guān)鍵字控制角本在調(diào)試模式下執(zhí)行。推薦主要使用 ie 測試,用 op7 或 moz 來調(diào)試。
在 Op7 當(dāng)中,一定要啟用 在JavaScript Console 中 JavaScript 錯誤報告。Op7 的 JavaScript Console 遠(yuǎn)比 ie 錯誤報告要好些,擁有更好的代碼跟蹤功能,更容易看到函數(shù)調(diào)用來源。并且可以報告出正確的錯誤行,不同于 iew 。
在 moz 中有很多工具。可利用 Mozilla JavaScript Console,它可以報告錯誤和警告,并且允許做簡單的角本賦值。可以啟用嚴(yán)厲警告提示出許多潛在錯誤位置?梢允褂 DOM Inspector 顯示 document 樹,stylesheets 樹,computed styles,JavaScript 對象。可以用 Venkman (Mozilla JavaScript Debugger)獲取更高級的 JavaScript 調(diào)試工具。可供使用的有 Ian Hickson’s JavaScript Evaluation Sidebar 或者 Jesse Ruderman’s JavaScript Environment、view scripts bookmarklet、JavaScript Shell 或者 view variables bookmarklet 或者 ViewScripts bookmarklet 。
在 konq 當(dāng)中,靠自己的力量要更多些,使用一些源代碼的技巧。
在 saf 中需要啟用隱藏調(diào)試菜單(Hiden debug menu),不用在系統(tǒng)控制臺顯示毫無意義的錯誤信息,使用 Show DOM Tree 功能會更有用。如果你啟用了顯示調(diào)試菜單,Safari不運行,在終端使用下面的命令:
代碼:
defaults write com.apple.Safari IncludeDebugMenu 1