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