JS錯(cuò)誤處理與調(diào)試操作實(shí)例分析
本文實(shí)例講述了JS錯(cuò)誤處理與調(diào)試操作。分享給大家供大家參考,具體如下:
JavaScript 錯(cuò)誤 - throw、try 和 catch
try 語(yǔ)句測(cè)試代碼塊的錯(cuò)誤。
catch 語(yǔ)句處理錯(cuò)誤。
throw 語(yǔ)句創(chuàng)建自定義錯(cuò)誤。
finally 語(yǔ)句在 try 和 catch 語(yǔ)句之后,無(wú)論是否有觸發(fā)異常,該語(yǔ)句都會(huì)執(zhí)行。
JavaScript try 和 catch
try 語(yǔ)句允許我們定義在執(zhí)行時(shí)進(jìn)行錯(cuò)誤測(cè)試的代碼塊。
catch 語(yǔ)句允許我們定義當(dāng) try 代碼塊發(fā)生錯(cuò)誤時(shí),所執(zhí)行的代碼塊。
JavaScript 語(yǔ)句 try 和 catch 是成對(duì)出現(xiàn)的。
語(yǔ)法
try {
... //異常的拋出
} catch(e) {
... //異常的捕獲與處理
} finally {
... //結(jié)束處理 }
例:
var txt="";
function message()
{
try {
adddlert("Welcome guest!");
} catch(err) {
txt="本頁(yè)有一個(gè)錯(cuò)誤。\n\n";
txt+="錯(cuò)誤描述:" + err.message + "\n\n";
txt+="點(diǎn)擊確定繼續(xù)。\n\n";
alert(txt);
}
}
finally 語(yǔ)句
finally 語(yǔ)句不論之前的 try 和 catch 中是否產(chǎn)生異常都會(huì)執(zhí)行該代碼塊。
<input id="demo" type="text">
<button type="button" οnclick="myFunction()">點(diǎn)我</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 "值不是一個(gè)數(shù)字";
x = Number(x);
if(x > 10) throw "太大";
if(x < 5) throw "太小";
}
catch(err) {
message.innerHTML = "錯(cuò)誤: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
</script>
Throw 語(yǔ)句
throw 語(yǔ)句允許我們創(chuàng)建自定義錯(cuò)誤。
正確的技術(shù)術(shù)語(yǔ)是:創(chuàng)建或拋出異常(exception)。
如果把 throw 與 try 和 catch 一起使用,那么您能夠控制程序流,并生成自定義的錯(cuò)誤消息。
語(yǔ)法
throw exception
異常可以是 JavaScript 字符串、數(shù)字、邏輯值或?qū)ο蟆?/p>
實(shí)例
本例檢測(cè)輸入變量的值。如果值是錯(cuò)誤的,會(huì)拋出一個(gè)異常(錯(cuò)誤)。catch 會(huì)捕捉到這個(gè)錯(cuò)誤,并顯示一段自定義的錯(cuò)誤消息:
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 = "錯(cuò)誤: " + err;
}
}
JavaScript 調(diào)試工具
在程序代碼中尋找錯(cuò)誤叫做代碼調(diào)試。
調(diào)試很難,但幸運(yùn)的是,很多瀏覽器都內(nèi)置了調(diào)試工具。
內(nèi)置的調(diào)試工具可以開(kāi)始或關(guān)閉,嚴(yán)重的錯(cuò)誤信息會(huì)發(fā)送給用戶。
有了調(diào)試工具,我們就可以設(shè)置斷點(diǎn) (代碼停止執(zhí)行的位置), 且可以在代碼執(zhí)行時(shí)檢測(cè)變量。
瀏覽器啟用調(diào)試工具一般是按下 F12 鍵,并在調(diào)試菜單中選擇 "Console" 。
console.log() 方法
如果瀏覽器支持調(diào)試,你可以使用 console.log() 方法在調(diào)試窗口上打印 JavaScript 值:
實(shí)例
a = 5; b = 6; c = a + b; console.log(c);
設(shè)置斷點(diǎn)
在調(diào)試窗口中,你可以設(shè)置 JavaScript 代碼的斷點(diǎn)。
在每個(gè)斷點(diǎn)上,都會(huì)停止執(zhí)行 JavaScript 代碼,以便于我們檢查 JavaScript 變量的值。
在檢查完畢后,可以重新執(zhí)行代碼(如播放按鈕)。
debugger 關(guān)鍵字
debugger 關(guān)鍵字用于停止執(zhí)行 JavaScript,并調(diào)用調(diào)試函數(shù)。
這個(gè)關(guān)鍵字與在調(diào)試工具中設(shè)置斷點(diǎn)的效果是一樣的。
如果沒(méi)有調(diào)試可用,debugger 語(yǔ)句將無(wú)法工作。
開(kāi)啟 debugger ,代碼在第三行前停止執(zhí)行。
實(shí)例
var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript傳值操作技巧總結(jié)》、《javascript編碼操作技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JavaScript將DOM事件處理程序封裝為event.js 出現(xiàn)的低級(jí)錯(cuò)誤問(wèn)題
- Extjs學(xué)習(xí)過(guò)程中新手容易碰到的低級(jí)錯(cuò)誤積累
- 7個(gè)你應(yīng)該知道的JS原生錯(cuò)誤類型
- 詳解JavaScript錯(cuò)誤捕獲
- JavaScript語(yǔ)句錯(cuò)誤throw、try及catch實(shí)例解析
- JS常見(jiàn)錯(cuò)誤(Error)及處理方案詳解
- javascript 初學(xué)教程及五子棋小程序的簡(jiǎn)單實(shí)現(xiàn)
- JavaScript初學(xué)者必看“new”
- JavaScript初學(xué)者容易犯的幾個(gè)錯(cuò)誤
相關(guān)文章
微信小程序用戶授權(quán)環(huán)節(jié)實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了微信小程序用戶授權(quán)環(huán)節(jié)實(shí)現(xiàn)過(guò)程,在商城項(xiàng)目中,我們需要對(duì)部分的頁(yè)面,進(jìn)行一個(gè)授權(quán)的判別,例如購(gòu)物車,及個(gè)人中心,需要完成用戶信息的授權(quán)后,獲取到相關(guān)信息2023-01-01
three.js開(kāi)發(fā)3d地圖的實(shí)現(xiàn)示例
本文主要介紹了three.js開(kāi)發(fā)3d地圖的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
基于javascript實(shí)現(xiàn)放大鏡特效
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)放大鏡特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12
在 JavaScript 中保留小數(shù)點(diǎn)后兩位的方法
在 JavaScript 中,有多種方法可以保留小數(shù)點(diǎn)后兩位,本文給大家分享比較常用的方法,文末給大家介紹了實(shí)現(xiàn)數(shù)據(jù)格式化保留兩位小數(shù)的多種方法,感興趣的朋友一起看看吧2023-10-10
javascript實(shí)現(xiàn)的DES加密示例
DES加密算法的方法把用戶信息在發(fā)送的時(shí)候進(jìn)行加密很實(shí)用,下面有個(gè)不錯(cuò)的示例,需要的朋友可以參考下2013-10-10
js實(shí)現(xiàn)遍歷含有input的table實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)遍歷含有input的table方法,結(jié)合實(shí)例形式分析了jsp讀取數(shù)據(jù)庫(kù)動(dòng)態(tài)生成table及JavaScript遍歷table的相關(guān)技巧,需要的朋友可以參考下2015-12-12
使用JavaScript優(yōu)雅實(shí)現(xiàn)文本展開(kāi)收起功能
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript優(yōu)雅實(shí)現(xiàn)文本展開(kāi)收起功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04

