JavaScript是解釋型代碼,代碼執行到哪里,才調試到哪里,不像是C/C++,可以進行編譯,鏈接,也不像是Python,進行預編譯。
調試有幾種方法:
方法1: 瀏覽器自帶的調試功能,我們這里使用Google Chrome舉例
例如下面的代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Debug</title>
</head>
<body>
<h1>This is a Test</h1>
<p id="p1">this is a test</p>
<script>
document.getElementById("p1").innerHTML="hello world" ;
</script>
</body>
</html>
我們希望將<p>標簽中的內容,從"this is a test", 修改成"hello world”
輸出如上圖,輸出結果仍然是“this is a test" ,並沒有改變成”hello, world"
這個時候在瀏覽器按 F12
選擇console窗口
有一個錯誤提示,“invalid or unexpected token"
這個錯誤一般是輸入了不識別的字符,仔細檢查代碼發現:11行輸入了中文”,“,而不是”;", 修改后,可以正常輸出了。
方法二: 使用alert方法
例如下面的代碼
<body>
<h1>This is a Test</h1>
<p id="p1">3</p>
<p id="p2">3</p>
<p id="p3"></p>
<script>
var a = document.getElementById("p1").innerHTML ;
var b = document.getElementById("p2").innerHTML ;
c = a+b;
document.getElementById("p3").innerHTML="a+b="+c ;
</script>
</body>
我們將P1,p2中的數字相加,顯示到P3當中去,輸出的結果是33:
這個並不是我們想要的結果,那我們想知道中間的結果是c到底是什么呢?
在代碼中添加alert("a+b");
會彈出窗口,將C的內容顯示出來,確實是33
為什么會出現這樣的現象呢,是因為解釋器將a和b解釋成了字符串對象,然后相加。
修改語句:c = parseInt(a)+parseInt(b);輸出正確的結果。
方法二: 使用console.log方法
如果程序體非常大,或者執行過程中,有一些中間值,我們需要查看,可以使用console.log的方法,這個信息,將打印到方法一中的console中,
例如:
<h1>This is a Test</h1>
<p id="p1">4</p>
<p id="p2">4! = </p>
<p id="p3"></p>
<script>
var a = document.getElementById("p1").innerHTML ;
var b = a-1
var c = a;
while (b>0){
a = a*b;
c = c.concat("x",b);
b = b-1;
console.log(c);
console.log("%d",a);
}
document.getElementById("p2").innerHTML=c ;
document.getElementById("p3").innerHTML=a ;
</script>
控制台顯示的信息:
以上的三種方法,調試小程序是足夠了,可以發現代碼中的語法錯誤。
但是如果代碼中模塊和函數眾多,調用關系復雜的話,還是要寫測試用例來進行測試。