JavaScript代碼調(diào)試方法實例小結(jié)
本文實例講述了JavaScript代碼調(diào)試方法。分享給大家供大家參考,具體如下:
1 把消息記錄到控制臺
IE8、Firefox、Chrome 和 Safari 中可以使用 console 對象向 JavaScript 控制臺寫入消息,它有這些方法:
- error(message):錯誤性消息。
- info(message):信息性消息。
- log(message):一般性消息。
- warn(message):警告性消息。
Opera 10.5 之前的版本,是使用 opera.postError()
方法把消息寫入控制臺的。
可以使用下面的這個函數(shù)作為統(tǒng)一寫入控制臺的接口:
/** * 跨瀏覽器,向控制臺寫入消息 * @param message */ function log(message) { if (typeof console == "object") { console.log(message); } else if (typeof opera == "object") { opera.postError(message); } else if (typeof java == "object" && typeof java.lang == "object") { java.lang.System.out.println(message); } }
可以在瀏覽器中安全地使用這個函數(shù):
function sum(num1, num2) { log("Entering sum(), arguments are " + num1 + "," + num2); log("Before calculation"); var result = num1 + num2; log("After calculation"); log("Exiting sum()"); return result; }
注意:在發(fā)布之前,務(wù)必移除所有的消息。這可以在部署之前,通過編寫特定的代碼步驟,實現(xiàn)自動清理。不要使用 alert()
,因為彈出的警告框會阻止程序的執(zhí)行;而且在測試異步操作對時間的影響時,使用警告框也會影響測試結(jié)果。
2 把消息記錄到當(dāng)前頁面
可以在頁面中開辟出一小塊區(qū)域,用于顯示消息:
function log(message) { var console = document.getElementById("debuginfo"); if (console == null) { console = document.createElement("div"); console.id = "debuginfo"; console.style.background = "#dedede"; console.style.border = "1px solid silver"; console.style.padding = "5px"; console.style.width = "400px"; console.style.position = "absolute"; console.style.right = "0px"; console.style.top = "0px"; document.body.appendChild(console); } console.innerHTML += "<p>" + message + "</p>"; }
這種技術(shù)在不支持 JavaScript 控制臺的 IE7 以及早期版本中,特別有用。
注意:在發(fā)布之前,也要移除把錯誤消息輸出到頁面中的代碼。
3 拋出錯誤
如果錯誤消息很具體,那么就可以直接把它當(dāng)做確定錯誤來源的依據(jù),比如下面的這個函數(shù):
function divide(num1, num2){ return num1/num2; }
這個函數(shù)如果其中的一個參數(shù)不是數(shù)值,那么就會返回 NaN。所以可以在計算前先進(jìn)行檢測:
function divide(num1, num2){ if(typeof num1 !="number" || typeof num2 !="number"){ throw new Error("divide(): 兩個參數(shù)都必須是數(shù)值") } return num1/num2; }
這個錯誤消息包含了函數(shù)的名稱以及導(dǎo)致錯誤的真正原因,所以如果拋出了這個錯誤,我們就能立即知道錯誤的來源以及問題的性質(zhì)。
大型的應(yīng)用程序,可以使用下面的這個 assert()
函數(shù)拋出自定義錯誤:
<script type="text/javascript"> function assert(condition, message) { if (!condition) { throw new Error(message); } } function divide(num1, num2) { assert(typeof num1 == "number" && typeof num2 == "number", "divide():Both arguments must be numbers."); return num1 / num2; } divide(1,"tt"); </script>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript傳值操作技巧總結(jié)》、《javascript編碼操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript 關(guān)于元素獲取焦點(diǎn)(隱藏元素與div)
關(guān)于元素獲取焦點(diǎn)要注意2個小問題,需要的朋友可以參考下。2011-01-01npm install 、npm install --save 和&n
這篇文章主要介紹了npm install 、npm install --save 和 npm install --save-dev的區(qū)別介紹,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04Extjs 點(diǎn)擊復(fù)選框在表格中增加相關(guān)信息行
這篇文章主要介紹了Extjs 點(diǎn)擊復(fù)選框在表格中增加相關(guān)信息行 的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07JS實現(xiàn)鏈表數(shù)據(jù)結(jié)構(gòu)的代碼詳解
很多前端的同學(xué)對數(shù)據(jù)結(jié)構(gòu)和算法這塊沒有太多的概念,很多l(xiāng)eetcode的題目看不懂,有時候可能看了題解也不知道是什么意思,這篇文章咱們來簡單的談一談鏈表,文中給大家介紹了JS實現(xiàn)鏈表數(shù)據(jù)結(jié)構(gòu)的示例代碼,需要的朋友可以參考下2024-01-01JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三):鏈表
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三):鏈表,本文分別講解了單鏈表與雙鏈表以及增加節(jié)和刪除節(jié)的代碼實例,需要的朋友可以參考下2015-06-06