JS錯誤處理與調(diào)試操作實例分析
本文實例講述了JS錯誤處理與調(diào)試操作。分享給大家供大家參考,具體如下:
JavaScript 錯誤 - throw、try 和 catch
try 語句測試代碼塊的錯誤。
catch 語句處理錯誤。
throw 語句創(chuàng)建自定義錯誤。
finally 語句在 try 和 catch 語句之后,無論是否有觸發(fā)異常,該語句都會執(zhí)行。
JavaScript try 和 catch
try 語句允許我們定義在執(zhí)行時進(jìn)行錯誤測試的代碼塊。
catch 語句允許我們定義當(dāng) try 代碼塊發(fā)生錯誤時,所執(zhí)行的代碼塊。
JavaScript 語句 try 和 catch 是成對出現(xiàn)的。
語法
try { ... //異常的拋出 } catch(e) { ... //異常的捕獲與處理 } finally { ... //結(jié)束處理 }
例:
var txt=''; function message() { try { adddlert('Welcome guest!'); } catch(err) { txt='本頁有一個錯誤。nn'; txt+='錯誤描述:' + err.message + 'nn'; txt+='點擊確定繼續(xù)。nn'; alert(txt); } }
finally 語句
finally 語句不論之前的 try 和 catch 中是否產(chǎn)生異常都會執(zhí)行該代碼塊。
<input type='text'><button type='button' οnclick='myFunction()'>點我</button><p id='p01'></p><script>function myFunction() { var message, x; message = document.getElementById('p01'); message.innerHTML = ''; x = document.getElementById('demo').value; try { if(x == '') throw '值是空的'; if(isNaN(x)) throw '值不是一個數(shù)字'; x = Number(x); if(x > 10) throw '太大'; if(x < 5) throw '太小'; } catch(err) { message.innerHTML = '錯誤: ' + err + '.'; } finally { document.getElementById('demo').value = ''; }}</script>
Throw 語句
throw 語句允許我們創(chuàng)建自定義錯誤。
正確的技術(shù)術(shù)語是:創(chuàng)建或拋出異常(exception)。
如果把 throw 與 try 和 catch 一起使用,那么您能夠控制程序流,并生成自定義的錯誤消息。
語法
throw exception
異常可以是 JavaScript 字符串、數(shù)字、邏輯值或?qū)ο蟆?/p>
實例
本例檢測輸入變量的值。如果值是錯誤的,會拋出一個異常(錯誤)。catch 會捕捉到這個錯誤,并顯示一段自定義的錯誤消息:
function myFunction() { var message, x; message = document.getElementById('message'); message.innerHTML = ''; x = document.getElementById('demo').value; try { if(x == '') throw '值為空'; if(isNaN(x)) throw '不是數(shù)字'; x = Number(x); if(x < 5) throw '太小'; if(x > 10) throw '太大'; } catch(err) { message.innerHTML = '錯誤: ' + err; }}
JavaScript 調(diào)試工具
在程序代碼中尋找錯誤叫做代碼調(diào)試。
調(diào)試很難,但幸運(yùn)的是,很多瀏覽器都內(nèi)置了調(diào)試工具。
內(nèi)置的調(diào)試工具可以開始或關(guān)閉,嚴(yán)重的錯誤信息會發(fā)送給用戶。
有了調(diào)試工具,我們就可以設(shè)置斷點 (代碼停止執(zhí)行的位置), 且可以在代碼執(zhí)行時檢測變量。
瀏覽器啟用調(diào)試工具一般是按下 F12 鍵,并在調(diào)試菜單中選擇 'Console' 。
console.log() 方法
如果瀏覽器支持調(diào)試,你可以使用 console.log() 方法在調(diào)試窗口上打印 JavaScript 值:
實例
a = 5;b = 6;c = a + b;console.log(c);
設(shè)置斷點
在調(diào)試窗口中,你可以設(shè)置 JavaScript 代碼的斷點。
在每個斷點上,都會停止執(zhí)行 JavaScript 代碼,以便于我們檢查 JavaScript 變量的值。
在檢查完畢后,可以重新執(zhí)行代碼(如播放按鈕)。
debugger 關(guān)鍵字
debugger 關(guān)鍵字用于停止執(zhí)行 JavaScript,并調(diào)用調(diào)試函數(shù)。
這個關(guān)鍵字與在調(diào)試工具中設(shè)置斷點的效果是一樣的。
如果沒有調(diào)試可用,debugger 語句將無法工作。
開啟 debugger ,代碼在第三行前停止執(zhí)行。
實例
var x = 15 * 5; debugger; document.getElementbyId('demo').innerHTML = x;
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript傳值操作技巧總結(jié)》、《javascript編碼操作技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章:
1. Java之JSP教程九大內(nèi)置對象詳解(中篇)2. springboot基于Redis發(fā)布訂閱集群下WebSocket的解決方案3. 詳解Python中openpyxl模塊基本用法4. 使用css實現(xiàn)全兼容tooltip提示框5. IDEA項目的依賴(pom.xml文件)導(dǎo)入問題及解決6. 詳解CSS不定寬溢出文本適配滾動7. CSS自定義滾動條樣式案例詳解8. 使用ProcessBuilder調(diào)用外部命令,并返回大量結(jié)果9. PHP與已存在的Java應(yīng)用程序集成10. JS繪圖Flot如何實現(xiàn)動態(tài)可刷新曲線圖
