官方赌博的软件

書名： JavaScript修煉之道
作者名：聶常紅劉偉
本章字數： 3135字
更新時間： 2020-04-29 16:12:17

1.2 JavaScript代碼的調試方法

開發人員在開發程序時，經常會碰到程序異常現象，要快速定位并解決程序異常，要求開發人員掌握一些常用的代碼調試方法和調試工具。在JS代碼中，最常用的調試方法是alert()方法和console.log()方法，而常用的調試工具則是IE瀏覽器的的“開發人員工具”、Firefox瀏覽器的“Firebug”工具（對較低版本的Firefox瀏覽器）或Firefox瀏覽器的“開發者>>Web控制臺”（對較高版本的Firefox瀏覽器）以及Chrome瀏覽器的“開發者工具”。

1.2.1 使用alert()方法調試腳本代碼

在JS程序中常使用window對象的alert()方法進行代碼跟蹤或定位程序錯誤。alert()方法的作用是生成一個警告對話框，對話框中顯示的信息由方法參數設定。alert()方法可以出現在腳本程序中的任意位置。alert()方法通過顯示的變量值來跟蹤代碼，以及是否能顯示警告對話框來定位錯誤。

alert()基本語法：

方式一：alert(msg);
方式二：window.alert(msg);

alert()方法是window對象的方法，在調用時可以通過window對象來調用，也可以直接調用。參數msg的值可以是任意值，當參數為非空對象以外的值時，警告對話框中顯示的信息為參數值；當參數為非空對象時，在警告對話框中顯示的是以[object object]格式表示的對象，其中第二個“object”會根據具體的對象來變化。例如，如果對象是一個表單輸入框時，在對話框中將顯示：[objectHTMLInputElement]。

需要注意的是，不同瀏覽器彈出的警告對話框外觀不一樣，比如對“alert("這些是警告對話框顯示的信息")”這條代碼，在Chrome瀏覽器（本書中示例的瀏覽器的版本主要為：Chrome73）中顯示的警告對話框如圖1-3所示，在Firefox瀏覽器中顯示的警告對話框則如圖1-4所示，在IE11瀏覽器中顯示的警告對話框如圖1-5所示。

圖1-3 Chrome瀏覽器中顯示的警告對話框

圖1-4 Firefox瀏覽器中顯示

圖1-5 IE11瀏覽器中顯示的警告對話框的警告對話框

【示例1-1】使用alert()方法調試代碼。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用alert()方法調試代碼</title>
<script>
     var sum = 0,i = 1;
     while(sum < 20){
         sum += i;
         alert("sum=" + sum); //跟蹤sum變量的值
         alert("i=" + i); //跟蹤變量i的值
         i++;     
     }
</script>
</head>
<body>
  累加結果：<input id="val" type="text"/>
  <script>
      alert('111');  //定位錯誤
      var oText = documnt.getElementById('val');
      alert('222'); //定位錯誤
      oText.value = sum;
  </script>
</body>
</html>

注：示例代碼中包含了多條JS代碼。對這些代碼的作用，我們現在不用過多關注，后面將會一一介紹到，目前大家只需要關注調試JS代碼的方法就可以了。

上述代碼在while循環語句中使用了兩個alert()方法來分別跟蹤sum變量和i變量的值，從顯示的對話框的值我們可以看到這兩個變量值的變化。另外在第二個script標簽對之間也使用了alert()方法，這兩個alert()方法主要是用來定位錯誤的。

上述代碼在Chrome瀏覽器時，首先執行第一個<script></script>標簽對之間的JS代碼塊，該代碼塊主要處理一個循環語句，在第一次循環時會彈出圖1-6所示的警告對話框，然后程序停止執行，直到單擊了圖1-6所示對話框中的“確定”按鈕后才程序會繼續執行，此時會彈出圖1-7所示對話框，同樣，如果不單擊圖1-7所示對話框中的“確定”按鈕，程序也停止執行。可見，alert()具有阻塞程序執行的作用。

圖1-6 第一次循環時顯示的變量sum值

圖1-7 第一次循環時顯示的變量i值

從運行結果中，可看到while循環語句總共執行了6次，每次都會彈出兩個警告對話框分別顯示變量sum和變量i的值。限于篇幅，在此，只顯示了第一次循環的運行結果，其他循環的運行結果和圖1-6、圖1-7類似，所不同的是這兩個變量的值不一樣。

執行完第一個<script></script>之間的JS代碼塊后，頁面中顯示表單輸入框，接著執行第二個<script></script>之間的JS代碼塊。結果只顯示圖1-8所示的警告對話框，即只有alert('111')執行了，alert('222')并沒有執行。可見alert('111')和alert('222')之間的代碼塊有錯誤，導致程序無法往下執行。對該行代碼進行檢查后，發現倒數第6行“documnt”寫錯了，正確的寫法是“document”。

圖1-8 第二個script標簽對之間的alert()輸出結果

需要注意的是，用于調試代碼的alert()方法在調試結束后要全部刪掉。

1.2.2 使用console.log()方法調試腳本代碼

在JS中，除了使用alert()調試代碼外，我們還常常使用console對象的log()對JS程序進行調試，console.log()方法的作用是在瀏覽器的控制臺中輸出指定的參數值。

需要注意的是，在一些較低版本的瀏覽器，比如IE6以及沒裝“Firebug”插件的較低版本的Firefox等瀏覽器中是不能使用console.log()的。現在IE11以及較新版本的Firefox和Chrome不用安裝任何插件，都具備調試功能，對這些瀏覽器，window對象會自動注冊一個名為console的成員變量，指代調試工具中的控制臺。

console.log()的使用語法如下：

console.log(msg);

log()方法的參數msg和alert()的參數用法一樣，也可以是任意值；但當參數為非空對象時，不同于alert()輸出的是[object object]格式的內容，log()的輸出內容包含對象的結構內容。

就調試作用來說，alert()和console.log()方法類似，但相比于alert()，使用console.log()是一種更好的方式，原因如下。

（1）alert()會阻塞JS程序的執行，不單擊“確定”按鈕，后續代碼無法繼續執行；而console.log()僅在控制臺中打印相關信息，不會阻塞JS程序的執行。

（2）對于輸出內容為對象時，console.log()輸出的對象能看到對象結構；而alert()則是以[object object]格式輸出對象，無法看到對象結構。

【示例1-2】使用console.log()方法調試代碼。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用console.log()方法調試代碼</title>
<script>
     window.onload = function (){
        var sum = 0,i = 1;
        var oText = document.getElementById('val');
        while(sum < 20){
           sum += i;
           console.log("sum=" + sum); //跟蹤sum變量的值
           console.log("i=" + i); //跟蹤變量i的值
           i++;     
        }

        oText.value = sum;
     };
</script>
</head>
<body>
累加結果：<input id="val" type="text"/>
</body>
</html>

上述代碼在Chrome瀏覽器中執行后，同時按“Ctrl+Shift+I”組合鍵（對Mac蘋果電腦使用的是Command+Option+I組合鍵），打開Chrome瀏覽器的“開發者工具”，默認將打開“Console”瀏覽器控制臺，在控制臺中查看各個console.log()的輸出結果，可看到圖1-9所示的結果。刷新圖1-9所示頁面，可看到幾乎在控制臺顯示結果的同時，也顯示了表單輸入框，可見console.log()不會阻塞JS程序的執行。

圖1-9 console.log()的輸出結果

1.2.3 使用Chrome的“開發者工具”調試腳本代碼

對JS程序的調試，除了在JS程序中使用alert()、console.log()方法跟蹤和調試代碼外，開發人員也會經常使用一些調試工具。最常用的JS調試工具就是一些主流的瀏覽器的調試工具，如IE11瀏覽器的“開發人員工具”、Firefox瀏覽器的“Firebug”工具或較新版本的“開發者>>Web控制臺”以及Chrome瀏覽器的“開發者工具”。限于篇幅的原因，本節將只介紹Chrome瀏覽器的“開發者工具”調試工具，IE瀏覽器的“開發人員工具”和Firefox瀏覽器的“Firebug”以及“開發者>>Web控制臺”工具的使用和Chrome瀏覽器的“開發者工具”類似，大家可參考Chrome瀏覽器的“開發者工具”來使用它們。

相對于使用alert()方法來定位錯誤，使用調試工具會更便捷高效。因為調試工具可以在控制臺具體指出出錯的代碼行數，以及具體的錯誤類型。此外，還可以使用控制臺直接運行JS代碼。接下來我們將通過示例1-3的JS代碼的的調試來介紹Chrome的“開發者工具”的使用。

【示例1-3】使用Chrome的“開發者工具”調試代碼。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用調試工具調試代碼</title>
<script>
     window.onload = function (){
         var sum = 0,i = 1;
         var oText = documnt.getElementById('val');
         while(sum < 20){
              sum += i;
              i++;     
         }
         oText.value = sum;
     };
</script>
</head>
<body>
累加結果：<input id="val" type="text"/>
</body>
</html>

1．調試定位錯誤

在Chrome瀏覽器中運行示例1-3，當沒有得到預期結果時，使用調試工具會比較容易定位錯誤。操作步驟為：同時按“Ctrl+Shift+I”組合鍵，打開Chrome瀏覽器的“開發者工具”，此時在默認打開的“Console”控制臺可以看到顯示出錯代碼行及錯誤類型，如圖1-10所示。

圖1-10 在控制臺中顯示錯誤信息

圖1-10報引用錯誤，說文件ex1-3.html中的第9行代碼中的“documnt”沒有定義，根據這個錯誤信息，我們很容易發現原來這個單詞寫錯了，正確的寫法是“document”。

2．跟蹤調試代碼

使用調試工具，同樣也可以跟蹤變量的變化，步驟如下。

（1）修改圖1-10所報錯誤后，將“開發者工具”中的選項卡切換到“Sources”，將打開一個包含3個窗口的界面，在左側的窗口中雙擊文件“ex1-3.html”，此時會在中間窗口中打開源代碼，如圖1-11所示。

圖1-11 打開源代碼

（2）對代碼添加斷點。對代碼設置斷點的方法是：在需要添加斷點的那個代碼行的行號處單擊鼠標左鍵，此時該行行號會顯示藍色背景，如圖1-12所示。

圖1-12 設置斷點

（3）設置斷點后刷新頁面，此時根據需要可單擊右側的調試窗口中的這3個按鈕中的其中一個或按這3個按鈕對應的快捷鍵F10、F11和Shift+F11，分別實現逐句（F10）、逐過程（F11）和跳出（Shift+F11）這3種調試情況。在調試過程中，我們可以在右側的調試窗口中的“Local”項中跟蹤每一個變量在運行過程中的取值情況，如圖1-13所示。