Java Script代碼的簡單調試方法


 

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>
控制台顯示的信息:

 

 

以上的三種方法,調試小程序是足夠了,可以發現代碼中的語法錯誤。

但是如果代碼中模塊和函數眾多,調用關系復雜的話,還是要寫測試用例來進行測試。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM