chrome斷點調試&&其餘技巧

時間 2019-11-18

標籤 chrome 斷點調試其餘技巧欄目 Chrome 简体版

原文原文鏈接

chrome斷點調試

1.　html

　在編寫JavaScript代碼時，若是chrome

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

　　　實例代碼以下：dom

<!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>

View Code

　　　首先，咱們先要認識其中的主要功能，以下圖：ide

咱們看到瀏覽器頁面共分爲了四個模塊：函數

第一個其實是顯示頁面，這裏由於我打了斷點，因此顯示爲暗色。
右邊三個模塊即是console控制檯中的了。第一個是sources資源，經過這個模塊，咱們能夠找到任何咱們須要的頁面資源。
控制檯中的第二個頁面即爲顯示源碼的頁面，這裏咱們能夠在代碼的左邊打斷點，圖中：藍色代碼所在行表示目前代碼的執行階段，即目前代碼在第9句執行；深藍色表明將要執行但還未執行的代碼。而淺藍色表明已經執行過了的代碼。所以，目前執行的是var i;尚未複製爲0；因此咱們把鼠標停留在i=0中的i處，則會顯示undefined。
最右邊的模塊即是調試的重點模塊了。最上面的圖片如圖所示：
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的使用測試

　　代碼以下：this

  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中斷點調試，斷點打在最長的一行，以下：spa

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

　　可是咱們若是想知道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的狀況，這樣就不用咱們每次親自去測試了。另外，包括斷點中的內部節點發生變化、屬性發生變化、斷點要移除以後都會出現斷點的狀況。因此能夠多多利用之。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。