JS｜7種JavaScript代碼調試的方法

S是解釋型語言，是逐條語句解釋執行的，如果錯誤發生在某個語句塊，此語句塊以前的語句一般都可以正常執行。這不同于C等編譯型語言。

代碼調試的重點在于找到錯誤發生點，然后才能有的放矢。

1 alert()

通常可以使用警告框來提示變量信息。

alert(document.body.innerHTML);

當警告框彈出時，用戶將需要單擊“確定”來繼續。

2 html標簽內使用document.write()

<div id="demo">
    <script>
        var arr=[1,2,3,4,5]
        document.write(arr[2] + ' ') //3
    </script>
</div>

需要注意的是是，以下寫法會替換整個頁面的內容：

即使是函數調用也是如此。

3 innerHTML()

document.getElementById("demo").innerHTML =""

<h1>JavaScript Array.filter()</h1>

<p>使用通過測試的所有數組元素創建一個新數組。</p>

<p id="demo"></p> //45,25

<script>
    var numbers = [45, 4, 9, 16, 25];
    var over18 = numbers.filter(myFunction);

    document.getElementById("demo").innerHTML = over18;

    function myFunction(value, index, array) {
        return value > 18;
}
</script>

4 console()

JS的運行環境是瀏覽器，由瀏覽器引擎解釋執行JS代碼，一般來說，瀏覽器也提供調試器，如chrome按F12即可調出高試器：

<!DOCTYPE html>
<html>
<body>
<h4>我的第一張網頁</h4>
<p>使用F12在瀏覽器（Chrome、IE、Firefox）中激活調試，然后在調試器菜單中選擇“控制臺”。</p>
    <script>
        a = 5;
        b = 6;
        c = a + b;
        console.log(c);
    </script>
</body>
</html>

如果您的瀏覽器支持調試，那么您可以使用 console.log() 在調試窗口中顯示 JavaScript 的值：

內置的調試器可打開或關閉，強制將錯誤報告給用戶。

通過調試器，您也可以設置斷點（代碼執行被中斷的位置），并在代碼執行時檢查變量。

5 try catch捕獲錯誤

<p id="demo"></p>

<script>
try {
  adddlert("歡迎您，親愛的用戶！");
}
catch(err) {
  demo.innerHTML = err.message; //adddlert is not defined
}
</script>

JavaScript 實際上會創建帶有兩個屬性的 Error 對象：name 和 message。

name 設置或返回錯誤名。

message 設置或返回錯誤消息（一條字符串）。

6 debugger

debugger停止執行 JavaScript，并調用調試函數（如果可用）。

7 注釋法或增量法

可以注釋掉一些可疑代碼來確定錯誤發生點。

或者考慮逐步增加代碼的方法，逐步驗證，以避免錯誤。

8 一些常見的 JavaScript 錯誤。

8.1 意外使用賦值運算符

如果程序員在 if 語句中意外使用賦值運算符（=）而不是比較運算符（===），JavaScript 程序可能會產生一些無法預料的結果。

8.2 令人困惑的加法和級聯

加法用于加數值。

級聯（Concatenation）用于加字符串。

在 JavaScript 中，這兩種運算均使用相同的 + 運算符。

正因如此，將數字作為數值相加，與將數字作為字符串相加，將產生不同的結果：

var x = 10 + 5;          // x 中的結果是 15
var x = 10 + "5";         // x 中的結果是　"105"

而加法以外的其它算法運算符可以將字符串進行自動類型轉換。

10-"5" // 5

8.3 令人誤解的浮點數

JavaScript 中的數字均保存為 64 位的浮點數（Floats），符合IEEE754的標準。

所有編程語言，包括 JavaScript，都存在處理浮點值的困難：

var x = 0.1;
var y = 0.2;
var z = x + y             // z＝0.30000000000000004

8.4 錯位的分號

因為一個錯誤的分號，此代碼塊無論 x 的值如何都會執行：

if (x == 19);
{
     // code block
}

在一行的結尾自動關閉語句是默認的 JavaScript 行為。

在 JavaScript 中，用分號來關閉（結束）語句是可選的。

8.5 對象使用命名索引

在 JavaScript 中，數組使用數字索引。

在 JavaScript 中，對象使用命名索引。

如果您使用命名索引，那么在訪問數組時，JavaScript 會將數組重新定義為標準對象。

<p id="demo"></p>

<script>
var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length;         // person.length 將返回 0
var y = person[0];              // person[0] 將返回 undefined
y=person["age"]; //ok
y=person.age;//ok
document.getElementById("demo").innerHTML = y
</script>

8.6 Undefined 不是 Null

Undefined 的類型是 Undefined，Null的類型是Object。

JavaScript 對象、變量、屬性和方法可以是未定義的。

此外，空的 JavaScript 對象的值可以為 null。

在測試非 null 之前，必須先測試未定義：

if (typeof myObj !== "undefined" && myObj !== null)

8.7 JS沒有塊作用域（與C語言不同）

在 ES2015 之前，JavaScript 只有兩種類型的作用域：全局作用域和函數作用域。

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript不會為每個代碼塊創建新的作用域。</p>

<p>此代碼將顯示 i（10）的值，即使在 for 循環塊之外：</p>

<p id="demo"></p>

<script>
for (var i = 0; i < 10; i++) {
  // some code
}
document.getElementById("demo").innerHTML = i; //10
</script>

</body>
</html>

ES2015 引入了兩個重要的 JavaScript 新關鍵詞：let 和 const。

這兩個關鍵字在 JavaScript 中提供了塊作用域（Block Scope）變量（和常量）。

for (let i = 0; i < 10; i++) {

  // some code

}

document.getElementById("demo").innerHTML = i; //不能訪問

-End-

在編寫 JavaScript 時，如果沒有調試工具將是一件很痛苦的事情。

JavaScript 調試

沒有調試工具是很難去編寫 JavaScript 程序的。

你的代碼可能包含語法錯誤，邏輯錯誤，如果沒有調試工具，這些錯誤比較難于發現。

通常，如果 JavaScript 出現錯誤，是不會有提示信息，這樣你就無法找到代碼錯誤的位置。

	通常，你在編寫一個新的 JavaScript 代碼過程中都會發生錯誤。

JavaScript 調試工具

在程序代碼中尋找錯誤叫做代碼調試。

調試很難，但幸運的是，很多瀏覽器都內置了調試工具。

內置的調試工具可以開始或關閉，嚴重的錯誤信息會發送給用戶。

有了調試工具，我們就可以設置斷點 (代碼停止執行的位置), 且可以在代碼執行時檢測變量。

瀏覽器啟用調試工具一般是按下 F12 鍵，并在調試菜單中選擇 "Console" 。

console.log() 方法

如果瀏覽器支持調試，你可以使用 console.log() 方法在調試窗口上打印 JavaScript 值：

實例

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

a = 5;

b = 6;

c = a + b;

console.log(c);

</script>

</body>

</html>

設置斷點

在調試窗口中，你可以設置 JavaScript 代碼的斷點。

在每個斷點上，都會停止執行 JavaScript 代碼，以便于我們檢查 JavaScript 變量的值。

在檢查完畢后，可以重新執行代碼（如播放按鈕）。

debugger 關鍵字

debugger 關鍵字用于停止執行 JavaScript，并調用調試函數。

這個關鍵字與在調試工具中設置斷點的效果是一樣的。

如果沒有調試可用，debugger 語句將無法工作。

開啟 debugger ，代碼在第三行前停止執行。

實例

var x = 15 * 5;

debugger;

document.getElementbyId("demo").innerHTML = x;

主要瀏覽器的調試工具

通常，瀏覽器啟用調試工具一般是按下 F12 鍵，并在調試菜單中選擇 "Console" 。

各瀏覽器的步驟如下:

Chrome 瀏覽器

打開瀏覽器。
在菜單中選擇工具。
在工具中選擇開發者工具。
最后，選擇 Console。

Firefox 瀏覽器

打開瀏覽器。
訪問頁面:
http://www.getfirebug.com。
按照說明 :
安裝 Firebug。

Internet Explorer 瀏覽器。

打開瀏覽器。
在菜單中選擇工具。
在工具中選擇開發者工具。
最后，選擇 Console。

Opera

打開瀏覽器。
Opera 的內置調試工具為 Dragonfly，詳細說明可訪問頁面:
http://www.opera.com/dragonfly/。

Safari

打開瀏覽器。
右擊鼠標，選擇檢查元素。
在底部彈出的窗口中選擇"控制臺"。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

JavaScript中調試任何內容的最簡單方法之一是使用日志記錄console.log。但是控制臺提供了許多其他方法可以幫助您更好地進行調試。

開始

先看一個簡單的示例，我們經常會使用打印一個對象的方式來調試這個對象的值，如下

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>JS</title>
 </head>
 <body>
 <script>
 const foo = { id: 1, verified: true, color: "藍色" };
 const bar = { id: 2, verified: false, color: "紅色" };
 console.log(foo);
 console.log(bar);
 </script>
 </body>
</html>

這段代碼我們在進入頁面后，打印了兩個對象，這樣有一個很明顯的問題就是我們并不知道變量名，當然，你也可以在打印的時候帶上變量名，就像這樣

<script>
 const foo = { id: 1, verified: true, color: "藍色" };
 const bar = { id: 2, verified: false, color: "紅色" };
 console.log("foo", foo);
 console.log("bar", bar);
 console.log({ foo, bar });
</script>

這兩種方式都可以，要么自己打印出來，要么組合成一個對象，而且大多數情況下我們也有可能就是這么干的，看下控制臺

缺點就是我們需要展開對象才能看到對象屬性的值。

console.table（）

除了console.log()我們還可以使用console.table(),我們來嘗試下

 <script>
 const foo = { id: 1, verified: true, color: "藍色" };
 const bar = { id: 2, verified: false, color: "紅色" };
 console.table({ foo, bar });
 </script>

瀏覽器截圖如圖，控制臺輸出了一個表格和一個組合對象，這樣要比單純的console.log()直觀的多

console.group（）

如果你想要將相關詳細信息分組或嵌套在一起或者在函數中包含一些日志語句并且希望能夠清楚地看到與每個語句對應的范圍時，可以使用console.group（），示例代碼如下

<script>
 console.group("用戶詳情：");
 console.log("姓名: 孫悟空");
 console.log("職業: 軟件開發工程師");
 console.group("住址");
 console.log("街道: 123 大唐路");
 console.log("城市: 大唐");
 console.groupEnd();
</script>

瀏覽器截圖如下

相當的直觀，雖然這樣的場景可能我們遇到的并不多，如果你想默認折疊這段信息，你可以使用groupCollapsed替代group。

console.warn（）和console.error（）

根據具體情況，為了確保控制臺更具可讀性，可以使用console.warn()或console.error() 添加日志。console.info()在某些瀏覽器中還會顯示“i”圖標；

 <script>
 console.error("這是一error");
 console.warn("這是一個warn");
 console.info("這是一個info");
</script>

設置可以添加自定義樣式更進一步。可以使用%c指令將樣式添加到任何日志語句。這可以通過保持約定來區分API調用，用戶事件等。下面是一個例子：

<script>
 console.log(
 "%c Auth ",
 "color: white; background-color: #2274A5",
 "登錄也渲染了"
 );
 console.log(
 "%c GraphQL ",
 "color: white; background-color: #95B46A",
 "獲取用戶詳情"
 );
 console.log(
 "%c Error ",
 "color: white; background-color: #D33F49",
 "獲取用戶信息出錯"
 );
 </script>

console.trace()

調試JavaScript程序時，有時需要打印函數調用的棧信息，這可以通過使用console.trace()來實現，示例如下：

<script>
 function doTask() {
 doSubTask(1000, 10000);
 }
 function doSubTask(countX, countY) {
 for (var i = 0; i < countX; i++) {
 for (var j = 0; j < countY; j++) {}
 }
 console.trace();
 }
 doTask();
 </script>

console.time()

如同其他語言的一些定時函數，我們可以使用console.time()來監視一段代碼執行的時間

<script>
 let i = 0;
 console.time("While");
 while (i < 1000000) {
 i++;
 }
 console.timeEnd("While");
 console.time("For");
 for (i = 0; i < 1000000; i++) {
 // For Loop
 }
 console.timeEnd("For");
</script>

總結一下

本文總結了一些在Web開發中常用的調試技巧，能讓我們在開發時如魚得水，希望對你有所幫助！

在線咨詢

上一篇：重蔚的php學習第二天之HTML篇
下一篇：jsp+servlet做的用戶注冊登錄刪除功能

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商