JavaScript代碼調(diào)試方法實(shí)例小結(jié)

更新時(shí)間：2019年01月05日 08:44:17 作者：deniro_li

這篇文章主要介紹了JavaScript代碼調(diào)試方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript錯(cuò)誤信息的處理與代碼調(diào)試相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript代碼調(diào)試方法。分享給大家供大家參考，具體如下：

1 把消息記錄到控制臺(tái)

IE8、Firefox、Chrome 和 Safari 中可以使用 console 對象向 JavaScript 控制臺(tái)寫入消息，它有這些方法：

error(message)：錯(cuò)誤性消息。
info(message)：信息性消息。
log(message)：一般性消息。
warn(message)：警告性消息。

Opera 10.5 之前的版本，是使用 opera.postError() 方法把消息寫入控制臺(tái)的。

可以使用下面的這個(gè)函數(shù)作為統(tǒng)一寫入控制臺(tái)的接口：

/**
 * 跨瀏覽器，向控制臺(tái)寫入消息
 * @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);
  }
}

可以在瀏覽器中安全地使用這個(gè)函數(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ù)必移除所有的消息。這可以在部署之前，通過編寫特定的代碼步驟，實(shí)現(xiàn)自動(dòng)清理。不要使用 alert()，因?yàn)閺棾龅木婵驎?huì)阻止程序的執(zhí)行；而且在測試異步操作對時(shí)間的影響時(shí)，使用警告框也會(huì)影響測試結(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 控制臺(tái)的 IE7 以及早期版本中，特別有用。

注意：在發(fā)布之前，也要移除把錯(cuò)誤消息輸出到頁面中的代碼。

3 拋出錯(cuò)誤

如果錯(cuò)誤消息很具體，那么就可以直接把它當(dāng)做確定錯(cuò)誤來源的依據(jù)，比如下面的這個(gè)函數(shù)：

function divide(num1, num2){
  return num1/num2;
}

這個(gè)函數(shù)如果其中的一個(gè)參數(shù)不是數(shù)值，那么就會(huì)返回 NaN。所以可以在計(jì)算前先進(jìn)行檢測：

function divide(num1, num2){
  if(typeof num1 !="number" || typeof num2 !="number"){
    throw new Error("divide(): 兩個(gè)參數(shù)都必須是數(shù)值")
  }
  return num1/num2;
}

這個(gè)錯(cuò)誤消息包含了函數(shù)的名稱以及導(dǎo)致錯(cuò)誤的真正原因，所以如果拋出了這個(gè)錯(cuò)誤，我們就能立即知道錯(cuò)誤的來源以及問題的性質(zhì)。

大型的應(yīng)用程序，可以使用下面的這個(gè) assert() 函數(shù)拋出自定義錯(cuò)誤：

<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錯(cuò)誤與調(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è)計(jì)有所幫助。

您可能感興趣的文章: