前端JQuery應用實戰筆記 3 - 開發人員工具 (下)

練習

ex.7 在程式碼設置中斷點

現在可以使用開發者工具來除錯。
ex.7 練習

index.html / all.js 同 ex.6

1. 到 Source 打開程式碼。
2. 點選測試的程式碼前的數字排列號碼，點選會有藍色中斷標誌符號。
3. 重整網頁
4. 畫面會出現 debugger 方框，底下程式碼會開始跑程式並到中斷點標籤停下，等待開始下一步
5. 箭頭按下可以繼續讓程式跑，這邊是跑迴圈，所以每按一次會跑一次目前 i = 多少。
6. 在除錯過程取消中斷點標籤，就可以讓程式繼續跑下去。
7. 可以設定多個中斷點除錯。

---

ex.8 設定中斷點中斷條件

在開發者工具中使用中斷點，也可以設定中斷的判斷條件，這邊用 1~100 的平方，在產生的過程來設定中斷條件。
ex.8 練習

index.html

<ul class="nav nav-tabs nav-stacked">
</ul>

all.js

$(function () {
  for (var i = 0; i <= 100; i++) {
    var number = i;
    var output = "<li><a>" + number + "的平方是" + (number * number) + "</a></li>";  //組建字串
    $("ul").append(output);      // 物件.append  在物件後面插入內容
  }
});

• 點選中斷點右鍵，選擇 Edit breakpoint，開啟判斷輸入框。
• 輸入要判斷中斷的條件，輸入完成後中斷標籤就會變成橘色，以視辨別。
• 這邊練習是用 i > 66 ，意思就是迴圈會跑到 67 後中斷。
• 比較常用在迴圈程式用。

---

ex.9 逐步執行觀察變數值

開發者工具中使用中斷點，也可以逐步看程式跑動的過程，這邊使用每天工作的日薪加總，利用快捷鍵逐步觀察變數跑動過程。
ex.9 練習

index.html

<ul class="nav nav-tabs nav-stacked">
</ul>

all.js

$(function () {
  function salary() {             //計算日薪的函式
    var money = 36000;
    var pay = money / 30;
    var work = pay * day;
    work = parseInt(work, 10);    //用parseInt返回整數
    return work;
  }
  for (var i = 0; i <= 30; i++) {
    var day = i;
    var out = "<li><a>工作" + day + "天領薪水" + salary(day) + "元</a></li>";
    $("ul").append(out);
  }
});

使用快捷鍵

• F8 繼續執行。
• F10 逐步執行 ( 跳過函式 )。
• F11 逐步執行 ( 進入函式 )。
• Shift + F11 逐步執行 ( 跳出函式 )。

• parseInt用法
• function搭配return用法

---

ex.10 debugger 指令

用程式碼去設定中斷點，前提是要開啟開發人員工具。
ex.10 練習

index.html

<div>
  <input type="button" value="點擊按鈕" class="btn btn-info" id="testbtn" />
</div>

all.js

$(function () {
  $("#testbtn").click(function () {
    debugger;                                //設定debugger來中斷
    alert("您已按下" + $(this).val());        //抓取目前物件的值
  });
});

• debugger 只能在有開啟開發者工具時，才會有作用。
• 沒開啟開發者工具，則會跳過繼續執行程式。
• IE8 以上才開始支援 debugger。

---

ex.11 發生錯誤中斷執行

當程式發生錯誤，通常會到開發者工具的 Console 檢查錯誤。

• 右邊紅框處的紅圈叉叉顯示有多少個錯誤。
• 直接點擊紅圈或文字連結，會直接引導程式碼有錯誤的地方。
• 在有問題使用中斷標籤，然後重整頁面檢查。
• 查出 data 值是 undefined ，所以才導致後面 .length 無法作用。

當程式碼執行發生錯誤問題時，就會立即停止，後續程式碼就不會繼續執行。

---

ex.12 try…catch..避免發生錯誤中斷執行

如果想要測試錯誤後能繼續執行，可以使用 try / catch 方法執行。

• 在 try 裡放置要測試的語法，裡面放置上個引發錯誤的語法。
• 在 catch 裡，放入 alert ，將出現問題的訊息顯示出來。

如 try 沒問題就執行裡面內容，出現問題時不會顯示錯誤訊息，就執行 catch 裡的內容，後續程式碼會繼續執行。

---

ex.13 在程式碼中使用輸出Console

在程式碼加入Console，可以即時顯示要顯示的內容，這邊使用 scrollbar，每次滾動在Console顯示目前數值。
ex.13 練習

all.js

$(function () {
  $(window).scroll(function () {             
    $("#show").text($(this).scrollTop()); //抓取現在瀏覽器的 scroll 的數值，並寫上去網站
    console.log($(this).scrollTop());     
  }).scroll();
});

使用 console.log 在開發者工具裡面的 console 產生訊息。

IE8/IE9 必須開啟過開發人員工具才能使用console物件，否則會產生錯誤訊息，此問题可用
var console = console || ( log:function()){}}; 解決。

---

ex.14 Console 小技巧

在開發工具裡的 Console 一些顯示方式。

$(function() {
    console.warn("警告");
    console.error("錯誤");           //要判斷是程式本身錯誤還只是console特意放的提示
    console.group("群組1");          //群組開頭
    console.log("文字%s", "文字");
    console.log("數字%d", 1000);
    console.groupEnd();              //群組結尾
    console.dir(document);
    console.log("%c測試文字", "font-size: 42px; color: red");
    console.count("計數器");
    //console.log($0); //$0~$4
});

• console.warn(); 黃色背景的警示。
• console.error(); 要判斷是程式本身錯誤還只是console特意放的提示，通常是放在框架或表格輸入錯誤時的提示，或者使用舊的方式導致錯誤前的提示等。
• console.group(); 群組的開頭，之後console放置的內容，包括到 console.groupEnd();群組結尾結束。
• console.dir(document); dir 用來輸出 DOM 的屬性。
• console.log("%cXX",....); 用 %c 來套用樣式，逗點後面就放上要套用的樣式屬性，只能用基本的顏色大小等設定。
• console.count(); 計算()裡的值被計算幾次，每console一次就計算一次。

console.log($0) 只能在開發工具裡的 Console 顯示使用，依照點擊順序，依序紀錄 $0 ~ $4，有5組記憶空間。

---