chrome斷點調試&&其他技巧

chrome斷點調試

1.　

  　在編寫JavaScript代碼時，如果

出現了bug，就要不斷的去找錯誤，如果console控制台中提示還好說，可是沒有提示恐怕就要費一番周折了。但是有了chrome這個瀏覽器，我們通過開發者工具就可以很好的實現調試了。

　　　實例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        for(var i=0;i<10;i++){
            (function(){
                console.log(i+5);    
            })();
        }
    </script>
</body>
</html>

 

　　　首先，我們先要認識其中的主要功能，如下圖：

我們看到瀏覽器頁面共分為了四個模塊：

1. 第一個實際上是顯示頁面，這里因為我打了斷點，所以顯示為暗色。
2. 右邊三個模塊便是console控制台中的了。第一個是sources資源，通過這個模塊，我們可以找到任何我們需要的頁面資源。
3. 控制台中的第二個頁面即為顯示源碼的頁面，這里我們可以在代碼的左邊打斷點，圖中：藍色代碼所在行表示目前代碼的執行階段，即目前代碼在第9句執行；深藍色代表將要執行但還未執行的代碼。而淺藍色代表已經執行過了的代碼。因此，目前執行的是var i;還沒有復制為0；所以我們把鼠標停留在i=0中的i處，則會顯示undefined。
4. 最右邊的模塊便是調試的重點模塊了。最上面的圖片如圖所示：
   1. 第一個圖標是：resume script excution。會將斷點執行過程重啟（resume）。
   2. 第二個圖表是：step over next function ，即如果遇到一個函數，它會直接執行完這個函數，而是直接執行跳過進入下一步，不顯示細節。
   3. 第三個圖表是：step into next function ，即如果遇到一個函數，它不會一下運行完這個函數，而是進入函數內部，一步一步地執行，這樣，我們可以更清楚地觀察執行過程。

　　　　　  4.第四個圖表示：step out of current function,即如果利用 step into已經進入了函數內部，我們可以通過此功能來一下執行完函數內部剩下的代碼。

　　

 

2.  watch的使用

　　代碼如下：

  var a = 1;
  function test(){
      var a, b, c, d, e;
      a = 2;
      b = a - 1;
      b = 9;
      c = 3;
      d = 4;
      e = (a + b * c) * (a - d);
      return e;
  }
 console.log(test()) ;

　　在chrome中斷點調試，斷點打在最長的一行，如下：

     

　　我們可以發現在這一行中，只要我們把鼠標放在其中的一個變量上，我們就可以知道他的值是多少，如下：

    

　　但是我們如果想知道a+b+c的值卻沒有很好的辦法，其實是有的。

　　方法就是將a+b+c全部選中，然后就可以看到了，如下：

     

　　因此，可以看到這時一個不錯的方法。這樣就不用自己去就算了。

 

　　另外，如果在上面的代碼中 b = a - 1的值對我們十分重要怎么辦？  把它加入到watch中去調試，如下：

      

　　先選中，然后在點擊最后一個 Add selected text to watches, 然后注意觀察右上角的watch

　　這時一旦表達式的值發生了變化，Watch下面的表達式就會立即更新，這對於我們監控起來還是非常方便的。

　　尤其是對於類似於下面這樣的二叉樹查找：

     Array.prototype.binary_search = function (low, high, key) {
            if (low > high) {
                return -1;
            }
            // 注意： 這里是兩者相加，如果是相減，明顯就是錯的，實踐出真知~
            var mid = parseInt((high + low)/2);
            if (key < this[mid]) {
                return this.binary_search(low, mid - 1, key);
            } else if (key > this[mid]) {
                return this.binary_search(mid + 1, high, key);
            } else {

                // return this[key]; // 最后返回key也是可以的。
                return this[mid];
            }
        }
        var arr = [15, 18, 25,45, 56, 59, 78, 83];
        console.log(arr.binary_search(0, arr.length - 1, 56));

　　給 this[mid]（這個在chrome中是沒有辦法檢測到的）先全部選中，然后Add selected text to watches即可實時觀察他的變化了。這樣我們就知道一個二分查找需要經過哪些值了。

　　

 

3. error Stack

　　我們執行下面這個有錯誤的代碼，看看是如何報錯的。

　顯然，這里a是沒有定義的，報錯如下：

即首先說明在第12行出現了一個錯誤  a is not defined。 之前我都是看到這就不往下看了，然后呢？ 下面的三行是什么呢？

第一行： at hhh.html:12 即第12行的錯誤，因為它處在一個匿名函數中，所以at 就沒有說明具體的環境，顯然程序是運行到這里之后暫停的，所以當前棧的環境在第12行。

第二行： at dfa 這是一個函數，即如果退出當前環境后所在的環境，那顯然就是在函數dfa的環境之下了。 

第三行： at hhh.html: 16，顯然，如果退出了第二行中的環境， 那么在一個全局環境之下，所以沒有具體的名稱，於是直接說明了位置。 

 

我們再看下面的例子，這個例子中是沒有匿名函數的，都是具名函數，所以具體的環境都很清楚，如下所示：

報錯如下所示：

不出意外，error stack 就是這么一個由當前錯誤退出棧的一個過程。 核心問題就在當前錯誤上。 后面指定的位置時行數。

 

 

 

 

總結： error stack的順序是由當前到原來的一個棧的退出的過程。

 

 

4. 在代碼中輸入 debugger;  那么就會在運行中自動在這里打一個斷點， 就像我們再source中設置斷點一樣。  

 

5. 在dom中，我們可以選中一行dom元素，然后在右鍵，選擇break on ，可以看到，到這里就會有斷點發生。如下所示:

 

 

可以看到，我們點擊右鍵之后，這里有很多選項都是之前很少用但是非常有用的，比如編輯、copy、hide（這樣就不用自己設置display：none了）、還有測試active、hover、focus、visited的情況，這樣就不用我們每次親自去測試了。另外， 包括斷點中的內部節點發生變化、屬性發生變化、斷點要移除之后都會出現斷點的情況。  所以可以多多利用之。